tccd-ui 0.0.94 → 0.0.96

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 +11 -5
  2. package/dist/index.d.ts +11 -5
  3. package/dist/index.js +117 -23
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +117 -23
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -2
package/dist/index.d.mts CHANGED
@@ -64,8 +64,9 @@ interface ButtonProps {
64
64
  disabled?: boolean;
65
65
  loading?: boolean;
66
66
  width?: ButtonWidths;
67
+ className?: string;
67
68
  }
68
- declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
+ declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, className, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
70
 
70
71
  declare function Checkbox({ label, checked, onChange, }: {
71
72
  label: React$1.ReactNode | string;
@@ -75,6 +76,7 @@ declare function Checkbox({ label, checked, onChange, }: {
75
76
 
76
77
  interface DatePickerProps {
77
78
  label?: string;
79
+ labelClassName?: string;
78
80
  id?: string;
79
81
  value: string;
80
82
  onChange: (date: string) => void;
@@ -83,10 +85,11 @@ interface DatePickerProps {
83
85
  minDate?: string;
84
86
  maxDate?: string;
85
87
  }
86
- declare function DatePicker({ label, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
88
+ declare function DatePicker({ label, labelClassName, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
89
 
88
90
  interface DropdownMenuProps {
89
91
  label?: string;
92
+ labelClassName?: string;
90
93
  placeholder?: string;
91
94
  options: DropdownOption[];
92
95
  value?: string;
@@ -96,7 +99,7 @@ interface DropdownMenuProps {
96
99
  className?: string;
97
100
  id?: string;
98
101
  }
99
- declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
102
+ declare function DropDownMenu({ label, labelClassName, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
103
 
101
104
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
105
 
@@ -113,8 +116,9 @@ declare function FullScreenViewer({ isOpen, items, index, setIndex, onClose }: {
113
116
  onClose: () => void;
114
117
  }): react_jsx_runtime.JSX.Element;
115
118
 
116
- declare function InputField({ label, value, placeholder, onChange, error, id, }: {
119
+ declare function InputField({ label, labelClassName, value, placeholder, onChange, error, id, }: {
117
120
  label: string;
121
+ labelClassName?: string;
118
122
  id: string;
119
123
  value: string;
120
124
  placeholder: string;
@@ -145,6 +149,7 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
145
149
 
146
150
  interface NumberFieldProps {
147
151
  label: string;
152
+ labelClassName?: string;
148
153
  value: number | string;
149
154
  onChange: (value: number | string) => void;
150
155
  min?: number;
@@ -157,10 +162,11 @@ interface NumberFieldProps {
157
162
  }
158
163
  declare const NumberField: React$1.FC<NumberFieldProps>;
159
164
 
160
- declare function PasswordField({ id, value, label, onChange, error, }: {
165
+ declare function PasswordField({ id, value, label, labelClassName, onChange, error, }: {
161
166
  id: string;
162
167
  value: string;
163
168
  label: string;
169
+ labelClassName?: string;
164
170
  onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
165
171
  error?: string;
166
172
  }): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -64,8 +64,9 @@ interface ButtonProps {
64
64
  disabled?: boolean;
65
65
  loading?: boolean;
66
66
  width?: ButtonWidths;
67
+ className?: string;
67
68
  }
68
- declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
+ declare const Button: ({ buttonText, buttonIcon, onClick, type, disabled, loading, width, className, }: ButtonProps) => react_jsx_runtime.JSX.Element;
69
70
 
70
71
  declare function Checkbox({ label, checked, onChange, }: {
71
72
  label: React$1.ReactNode | string;
@@ -75,6 +76,7 @@ declare function Checkbox({ label, checked, onChange, }: {
75
76
 
76
77
  interface DatePickerProps {
77
78
  label?: string;
79
+ labelClassName?: string;
78
80
  id?: string;
79
81
  value: string;
80
82
  onChange: (date: string) => void;
@@ -83,10 +85,11 @@ interface DatePickerProps {
83
85
  minDate?: string;
84
86
  maxDate?: string;
85
87
  }
86
- declare function DatePicker({ label, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
88
+ declare function DatePicker({ label, labelClassName, id, value, onChange, error, disabled, minDate, maxDate, }: DatePickerProps): react_jsx_runtime.JSX.Element;
87
89
 
88
90
  interface DropdownMenuProps {
89
91
  label?: string;
92
+ labelClassName?: string;
90
93
  placeholder?: string;
91
94
  options: DropdownOption[];
92
95
  value?: string;
@@ -96,7 +99,7 @@ interface DropdownMenuProps {
96
99
  className?: string;
97
100
  id?: string;
98
101
  }
99
- declare function DropDownMenu({ label, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
102
+ declare function DropDownMenu({ label, labelClassName, placeholder, options, value, onChange, error, disabled, className, id, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
100
103
 
101
104
  declare const DropdownPopup: ({ isOpen, onClose, items, position, width, triggerRef, alignToTrigger, }: DropdownMenuProps$1) => react_jsx_runtime.JSX.Element;
102
105
 
@@ -113,8 +116,9 @@ declare function FullScreenViewer({ isOpen, items, index, setIndex, onClose }: {
113
116
  onClose: () => void;
114
117
  }): react_jsx_runtime.JSX.Element;
115
118
 
116
- declare function InputField({ label, value, placeholder, onChange, error, id, }: {
119
+ declare function InputField({ label, labelClassName, value, placeholder, onChange, error, id, }: {
117
120
  label: string;
121
+ labelClassName?: string;
118
122
  id: string;
119
123
  value: string;
120
124
  placeholder: string;
@@ -145,6 +149,7 @@ declare const Modal: ({ title, isOpen, onClose, children, className, }: {
145
149
 
146
150
  interface NumberFieldProps {
147
151
  label: string;
152
+ labelClassName?: string;
148
153
  value: number | string;
149
154
  onChange: (value: number | string) => void;
150
155
  min?: number;
@@ -157,10 +162,11 @@ interface NumberFieldProps {
157
162
  }
158
163
  declare const NumberField: React$1.FC<NumberFieldProps>;
159
164
 
160
- declare function PasswordField({ id, value, label, onChange, error, }: {
165
+ declare function PasswordField({ id, value, label, labelClassName, onChange, error, }: {
161
166
  id: string;
162
167
  value: string;
163
168
  label: string;
169
+ labelClassName?: string;
164
170
  onChange: (newValue: React$1.ChangeEvent<HTMLInputElement>) => void;
165
171
  error?: string;
166
172
  }): 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,8 +91,14 @@ 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
101
+ var import_tailwind_merge = require("tailwind-merge");
96
102
  var import_jsx_runtime = require("react/jsx-runtime");
97
103
  var Button = ({
98
104
  buttonText,
@@ -101,7 +107,8 @@ var Button = ({
101
107
  type,
102
108
  disabled = false,
103
109
  loading = false,
104
- width = ButtonWidths.AUTO
110
+ width = ButtonWidths.AUTO,
111
+ className = ""
105
112
  }) => {
106
113
  const isDisabled = disabled || loading;
107
114
  const [dark, setDark] = (0, import_react.useState)(getDarkModeEnabled());
@@ -149,7 +156,7 @@ var Button = ({
149
156
  {
150
157
  onClick: handleClick,
151
158
  disabled: isDisabled,
152
- className: `
159
+ className: (0, import_tailwind_merge.twMerge)(`
153
160
  ${stylePresets[type]}
154
161
  ${!isDisabled ? hoverStyles[type] : ""}
155
162
  ${isDisabled ? disabledStyles : ""}
@@ -157,7 +164,7 @@ var Button = ({
157
164
  rounded-full px-3 md:px-6 py-1.5 md:py-2 border font-bold text-[11px] lg:text-[12px] whitespace-nowrap
158
165
  transition-all duration-200 ease-in-out flex items-center justify-center h-fit
159
166
  ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}
160
- `,
167
+ `, className),
161
168
  children: [
162
169
  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineLoading3Quarters, { className: "animate-spin -ml-1 mr-2 h-4 w-4" }),
163
170
  loading ? "Loading..." : buttonText,
@@ -226,9 +233,11 @@ function Checkbox({
226
233
  // src/components/DatePicker.tsx
227
234
  var import_react3 = require("react");
228
235
  var import_react_dom = require("react-dom");
236
+ var import_tailwind_merge2 = require("tailwind-merge");
229
237
  var import_jsx_runtime3 = require("react/jsx-runtime");
230
238
  function DatePicker({
231
239
  label,
240
+ labelClassName,
232
241
  id,
233
242
  value,
234
243
  onChange,
@@ -240,10 +249,15 @@ function DatePicker({
240
249
  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
241
250
  const [currentMonth, setCurrentMonth] = (0, import_react3.useState)((/* @__PURE__ */ new Date()).getMonth());
242
251
  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 });
252
+ const [dropdownPosition, setDropdownPosition] = (0, import_react3.useState)({
253
+ top: 0,
254
+ left: 0,
255
+ width: 0
256
+ });
244
257
  const wrapperRef = (0, import_react3.useRef)(null);
245
258
  const buttonRef = (0, import_react3.useRef)(null);
246
259
  const dropdownRef = (0, import_react3.useRef)(null);
260
+ const dark = config.ENABLE_DARK_MODE;
247
261
  const months = [
248
262
  "January",
249
263
  "February",
@@ -258,7 +272,10 @@ function DatePicker({
258
272
  "November",
259
273
  "December"
260
274
  ];
261
- const years = Array.from({ length: 111 }, (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i);
275
+ const years = Array.from(
276
+ { length: 111 },
277
+ (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i
278
+ );
262
279
  const updateDropdownPosition = (0, import_react3.useCallback)(() => {
263
280
  if (buttonRef.current) {
264
281
  const rect = buttonRef.current.getBoundingClientRect();
@@ -387,7 +404,7 @@ function DatePicker({
387
404
  }
388
405
  return days;
389
406
  };
390
- const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
407
+ const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: dark ? "dark" : "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
391
408
  "div",
392
409
  {
393
410
  ref: dropdownRef,
@@ -401,7 +418,24 @@ function DatePicker({
401
418
  },
402
419
  children: [
403
420
  /* @__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" }) }) }),
421
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: prevMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
422
+ "svg",
423
+ {
424
+ className: "w-4 h-4 sm:w-5 sm:h-5",
425
+ fill: "none",
426
+ stroke: "currentColor",
427
+ viewBox: "0 0 24 24",
428
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
429
+ "path",
430
+ {
431
+ strokeLinecap: "round",
432
+ strokeLinejoin: "round",
433
+ strokeWidth: "2",
434
+ d: "M15 19l-7-7 7-7"
435
+ }
436
+ )
437
+ }
438
+ ) }),
405
439
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "selects-container", children: [
406
440
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
407
441
  "select",
@@ -422,7 +456,24 @@ function DatePicker({
422
456
  }
423
457
  )
424
458
  ] }),
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" }) }) })
459
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: nextMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
460
+ "svg",
461
+ {
462
+ className: "w-4 h-4 sm:w-5 sm:h-5",
463
+ fill: "none",
464
+ stroke: "currentColor",
465
+ viewBox: "0 0 24 24",
466
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
467
+ "path",
468
+ {
469
+ strokeLinecap: "round",
470
+ strokeLinejoin: "round",
471
+ strokeWidth: "2",
472
+ d: "M9 5l7 7-7 7"
473
+ }
474
+ )
475
+ }
476
+ ) })
426
477
  ] }),
427
478
  /* @__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
479
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "calendar-grid", children: renderCalendarDays() }),
@@ -442,9 +493,15 @@ function DatePicker({
442
493
  )
443
494
  ]
444
495
  }
445
- );
496
+ ) });
446
497
  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 }),
498
+ label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
499
+ "label",
500
+ {
501
+ className: (0, import_tailwind_merge2.twMerge)(`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 || ""),
502
+ children: label
503
+ }
504
+ ),
448
505
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
449
506
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
450
507
  "button",
@@ -454,14 +511,14 @@ function DatePicker({
454
511
  type: "button",
455
512
  onClick: () => !disabled && setIsOpen(!isOpen),
456
513
  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`,
514
+ 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
515
  children: getDisplayValue()
459
516
  }
460
517
  ),
461
518
  /* @__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
519
  "svg",
463
520
  {
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"}`,
521
+ 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
522
  "aria-hidden": "true",
466
523
  xmlns: "http://www.w3.org/2000/svg",
467
524
  fill: "none",
@@ -751,9 +808,11 @@ function DatePicker({
751
808
  var import_react4 = require("react");
752
809
  var import_react_dom2 = require("react-dom");
753
810
  var import_io5 = require("react-icons/io5");
811
+ var import_tailwind_merge3 = require("tailwind-merge");
754
812
  var import_jsx_runtime4 = require("react/jsx-runtime");
755
813
  function DropDownMenu({
756
814
  label,
815
+ labelClassName,
757
816
  placeholder = "Select an option",
758
817
  options,
759
818
  value,
@@ -812,7 +871,11 @@ function DropDownMenu({
812
871
  "label",
813
872
  {
814
873
  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",
874
+ className: (0, import_tailwind_merge3.twMerge)(
875
+ "text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold items-center",
876
+ dark ? "text-gray-200" : "text-label",
877
+ labelClassName
878
+ ),
816
879
  children: label
817
880
  }
818
881
  ),
@@ -1215,9 +1278,11 @@ function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
1215
1278
 
1216
1279
  // src/components/InputField.tsx
1217
1280
  var import_react8 = require("react");
1281
+ var import_tailwind_merge4 = require("tailwind-merge");
1218
1282
  var import_jsx_runtime8 = require("react/jsx-runtime");
1219
1283
  function InputField({
1220
1284
  label,
1285
+ labelClassName,
1221
1286
  value,
1222
1287
  placeholder,
1223
1288
  onChange,
@@ -1237,7 +1302,11 @@ function InputField({
1237
1302
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1238
1303
  "label",
1239
1304
  {
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",
1305
+ className: (0, import_tailwind_merge4.twMerge)(
1306
+ "text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
1307
+ dark ? "text-gray-200" : "text-label",
1308
+ labelClassName
1309
+ ),
1241
1310
  children: label
1242
1311
  }
1243
1312
  ),
@@ -1620,9 +1689,11 @@ var Modal_default = Modal;
1620
1689
  // src/components/NumberField.tsx
1621
1690
  var import_react13 = require("react");
1622
1691
  var import_react14 = require("react");
1692
+ var import_tailwind_merge5 = require("tailwind-merge");
1623
1693
  var import_jsx_runtime14 = require("react/jsx-runtime");
1624
1694
  var NumberField = ({
1625
1695
  label,
1696
+ labelClassName,
1626
1697
  value,
1627
1698
  onChange,
1628
1699
  min,
@@ -1652,7 +1723,11 @@ var NumberField = ({
1652
1723
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1653
1724
  "label",
1654
1725
  {
1655
- 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",
1726
+ className: (0, import_tailwind_merge5.twMerge)(
1727
+ "text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
1728
+ dark ? "text-gray-200" : "text-label",
1729
+ labelClassName
1730
+ ),
1656
1731
  children: label
1657
1732
  }
1658
1733
  ),
@@ -1679,11 +1754,13 @@ var NumberField_default = NumberField;
1679
1754
  var import_react15 = require("react");
1680
1755
  var import_lu2 = require("react-icons/lu");
1681
1756
  var import_react16 = require("react");
1757
+ var import_tailwind_merge6 = require("tailwind-merge");
1682
1758
  var import_jsx_runtime15 = require("react/jsx-runtime");
1683
1759
  function PasswordField({
1684
1760
  id,
1685
1761
  value,
1686
1762
  label,
1763
+ labelClassName,
1687
1764
  onChange,
1688
1765
  error
1689
1766
  }) {
@@ -1698,7 +1775,17 @@ function PasswordField({
1698
1775
  };
1699
1776
  }, []);
1700
1777
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
1701
- /* @__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 }),
1778
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1779
+ "label",
1780
+ {
1781
+ className: (0, import_tailwind_merge6.twMerge)(
1782
+ "text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold",
1783
+ isDark ? "text-gray-200" : "text-label",
1784
+ labelClassName
1785
+ ),
1786
+ children: label
1787
+ }
1788
+ ),
1702
1789
  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
1703
1790
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1704
1791
  "input",
@@ -1973,6 +2060,7 @@ function TimePicker({
1973
2060
  const wrapperRef = (0, import_react22.useRef)(null);
1974
2061
  const buttonRef = (0, import_react22.useRef)(null);
1975
2062
  const dropdownRef = (0, import_react22.useRef)(null);
2063
+ const dark = config.ENABLE_DARK_MODE;
1976
2064
  const updateDropdownPosition = (0, import_react22.useCallback)(() => {
1977
2065
  if (buttonRef.current) {
1978
2066
  const rect = buttonRef.current.getBoundingClientRect();
@@ -2046,7 +2134,7 @@ function TimePicker({
2046
2134
  };
2047
2135
  const hourOptions = use24Hour ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
2048
2136
  const minuteOptions = Array.from({ length: 60 }, (_, i) => i);
2049
- const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
2137
+ const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: dark ? "dark" : "", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
2050
2138
  "div",
2051
2139
  {
2052
2140
  ref: dropdownRef,
@@ -2140,9 +2228,15 @@ function TimePicker({
2140
2228
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick: handleDone, className: "done-button", children: "Done" })
2141
2229
  ]
2142
2230
  }
2143
- );
2231
+ ) });
2144
2232
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full timepicker-wrapper", ref: wrapperRef, children: [
2145
- 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 }),
2233
+ label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2234
+ "label",
2235
+ {
2236
+ 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`,
2237
+ children: label
2238
+ }
2239
+ ),
2146
2240
  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
2147
2241
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2148
2242
  "button",
@@ -2152,14 +2246,14 @@ function TimePicker({
2152
2246
  type: "button",
2153
2247
  onClick: () => !disabled && setIsOpen(!isOpen),
2154
2248
  disabled,
2155
- 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`,
2249
+ 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`,
2156
2250
  children: getDisplayTime()
2157
2251
  }
2158
2252
  ),
2159
2253
  /* @__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)(
2160
2254
  "svg",
2161
2255
  {
2162
- 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"}`,
2256
+ 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"}`,
2163
2257
  "aria-hidden": "true",
2164
2258
  xmlns: "http://www.w3.org/2000/svg",
2165
2259
  fill: "none",