@axzydev/axzy_ui_system 1.0.166 → 1.0.168

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 (10) hide show
  1. package/dist/index.cjs +2494 -589
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +659 -8
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +105 -33
  6. package/dist/index.d.ts +105 -33
  7. package/dist/index.js +2473 -573
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/theme/theme.ts +21 -21
package/dist/index.cjs CHANGED
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
29
29
  // src/index.ts
30
30
  var index_exports = {};
31
31
  __export(index_exports, {
32
+ FileTypeEnum: () => FileTypeEnum,
32
33
  ITBadget: () => ITBadget,
33
34
  ITButton: () => ITButton,
34
35
  ITCalendar: () => calendar_default,
@@ -49,11 +50,15 @@ __export(index_exports, {
49
50
  ITSlideToggle: () => ITSlideToggle,
50
51
  ITStepper: () => ITStepper,
51
52
  ITTable: () => ITTable,
53
+ ITTabs: () => tabs_default,
52
54
  ITText: () => ITText,
53
55
  ITThemeProvider: () => ITThemeProvider,
54
56
  ITTimePicker: () => ITTimePicker,
55
57
  ITToast: () => ITToast,
56
- createValidationSchema: () => createValidationSchema
58
+ ITTripleFilter: () => tripleFilter_default,
59
+ UploadStatus: () => UploadStatus,
60
+ createValidationSchema: () => createValidationSchema,
61
+ useITTheme: () => useITTheme
57
62
  });
58
63
  module.exports = __toCommonJS(index_exports);
59
64
 
@@ -318,17 +323,17 @@ var components = {
318
323
  }
319
324
  },
320
325
  card: {
321
- backgroundColor: "#ffffff",
326
+ backgroundColor: "var(--card-bg, #ffffff)",
322
327
  borderRadius: "1rem",
323
- borderColor: semanticColors.gray[200],
328
+ borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
324
329
  borderWidth: "1px",
325
- shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
330
+ shadow: "var(--card-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
326
331
  hover: {
327
- shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
332
+ shadow: "var(--card-shadow-hover, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))"
328
333
  },
329
334
  header: {
330
- backgroundColor: semanticColors.gray[50],
331
- borderBottom: `1px solid var(--color-secondary-200)`,
335
+ backgroundColor: `var(--card-header-bg, ${semanticColors.gray[50]})`,
336
+ borderBottom: `1px solid var(--card-header-border, var(--color-secondary-200))`,
332
337
  padding: "1rem 1.5rem",
333
338
  borderTopLeftRadius: "1rem",
334
339
  borderTopRightRadius: "1rem"
@@ -338,23 +343,23 @@ var components = {
338
343
  }
339
344
  },
340
345
  input: {
341
- backgroundColor: "#ffffff",
342
- borderColor: semanticColors.gray[300],
346
+ backgroundColor: "var(--input-bg, #ffffff)",
347
+ borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
343
348
  borderRadius: "0.5rem",
344
349
  padding: "0.5rem 0.75rem",
345
350
  fontSize: "0.875rem",
346
351
  focus: {
347
- borderColor: semanticColors.primary[500],
348
- ring: `0 0 0 3px ${semanticColors.primary[100]}`
352
+ borderColor: `var(--input-focus-border, ${semanticColors.primary[500]})`,
353
+ ring: `var(--input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
349
354
  },
350
- placeholder: semanticColors.gray[400],
355
+ placeholder: `var(--input-placeholder, ${semanticColors.gray[400]})`,
351
356
  disabled: {
352
- backgroundColor: semanticColors.gray[100],
353
- borderColor: semanticColors.gray[200]
357
+ backgroundColor: `var(--input-disabled-bg, ${semanticColors.gray[100]})`,
358
+ borderColor: `var(--input-disabled-border, ${semanticColors.gray[200]})`
354
359
  },
355
360
  error: {
356
- borderColor: semanticColors.danger[500],
357
- ring: `0 0 0 3px ${semanticColors.danger[100]}`
361
+ borderColor: `var(--input-error-border, ${semanticColors.danger[500]})`,
362
+ ring: `var(--input-error-ring, 0 0 0 3px ${semanticColors.danger[100]})`
358
363
  }
359
364
  },
360
365
  table: {
@@ -402,24 +407,24 @@ var components = {
402
407
  },
403
408
  modal: {
404
409
  overlay: {
405
- backgroundColor: "rgba(15, 23, 42, 0.75)"
410
+ backgroundColor: "var(--modal-overlay, rgba(15, 23, 42, 0.75))"
406
411
  },
407
412
  content: {
408
- backgroundColor: "#ffffff",
413
+ backgroundColor: "var(--modal-bg, #ffffff)",
409
414
  borderRadius: "1rem",
410
- shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
415
+ shadow: "var(--modal-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
411
416
  },
412
417
  header: {
413
418
  padding: "1.5rem 1.5rem 0.5rem 1.5rem",
414
- borderBottom: `1px solid var(--color-secondary-200)`
419
+ borderBottom: `1px solid var(--modal-header-border, var(--color-secondary-200))`
415
420
  },
416
421
  body: {
417
422
  padding: "1.5rem"
418
423
  },
419
424
  footer: {
420
425
  padding: "1rem 1.5rem",
421
- borderTop: `1px solid var(--color-secondary-200)`,
422
- backgroundColor: semanticColors.gray[50]
426
+ borderTop: `1px solid var(--modal-footer-border, var(--color-secondary-200))`,
427
+ backgroundColor: `var(--modal-footer-bg, ${semanticColors.gray[50]})`
423
428
  }
424
429
  },
425
430
  calendar: {
@@ -668,11 +673,21 @@ var ITCalendar = ({
668
673
  endDate,
669
674
  minDate,
670
675
  maxDate,
671
- className
676
+ className,
677
+ variant = "primary"
672
678
  }) => {
673
679
  const mode = modeProp || (onChange ? "month" : "week");
674
680
  const [currentDate, setCurrentDate] = (0, import_react2.useState)(value || /* @__PURE__ */ new Date());
675
681
  const [view, setView] = (0, import_react2.useState)("calendar");
682
+ const getVariantStyles = () => {
683
+ const v = variant || "primary";
684
+ return {
685
+ "--calendar-selected-bg": `var(--color-${v})`,
686
+ "--calendar-range-bg": `var(--color-${v}-50)`,
687
+ "--calendar-today-bg": `var(--color-${v}-100)`,
688
+ "--calendar-today-text": `var(--color-${v})`
689
+ };
690
+ };
676
691
  (0, import_react2.useEffect)(() => {
677
692
  if (value) setCurrentDate(value);
678
693
  }, [value]);
@@ -790,7 +805,8 @@ var ITCalendar = ({
790
805
  className: cn("flex flex-col h-full rounded-lg shadow-sm overflow-hidden select-none", className),
791
806
  style: {
792
807
  backgroundColor: "var(--calendar-bg, #ffffff)",
793
- border: "1px solid var(--calendar-border, #e2e8f0)"
808
+ border: "1px solid var(--calendar-border, #e2e8f0)",
809
+ ...getVariantStyles()
794
810
  },
795
811
  onMouseUp: handleMouseUp,
796
812
  onMouseLeave: () => {
@@ -798,218 +814,326 @@ var ITCalendar = ({
798
814
  setDragCurrent(null);
799
815
  },
800
816
  children: [
801
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-2 py-2 border-b border-gray-200", style: { backgroundColor: "var(--calendar-bg, #ffffff)" }, children: [
802
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
803
- "h2",
804
- {
805
- className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
806
- style: {
807
- color: "var(--calendar-header-text, #1e293b)"
808
- },
809
- onClick: () => setView(view === "calendar" ? "years" : "calendar"),
810
- onMouseEnter: (e) => {
811
- e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
812
- },
813
- onMouseLeave: (e) => {
814
- e.currentTarget.style.backgroundColor = "transparent";
815
- },
816
- children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : (0, import_date_fns.format)(currentDate, "MMMM yyyy", { locale: import_locale.es })
817
- }
818
- ),
819
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
820
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handlePrev, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronLeft, { size: 14 }) }),
821
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleToday, type: "button", className: "text-sm font-medium text-gray-700 hover:bg-gray-100 px-3 py-1.5 rounded-md transition-colors", children: "Hoy" }),
822
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleNext, type: "button", className: "p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-600", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronRight, { size: 14 }) })
823
- ] })
824
- ] }),
825
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 overflow-auto relative bg-white", children: view === "years" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
826
- "button",
817
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
818
+ "div",
827
819
  {
828
- type: "button",
829
- className: cn(
830
- "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
831
- year === currentDate.getFullYear() ? "bg-primary-600 text-white" : "hover:bg-primary-50 text-gray-700 hover:text-primary-700"
832
- ),
833
- onClick: () => {
834
- setCurrentDate((d) => {
835
- const newDate = new Date(d);
836
- newDate.setFullYear(year);
837
- return newDate;
838
- });
839
- setView("calendar");
820
+ className: "flex items-center justify-between px-2 py-2 border-b",
821
+ style: {
822
+ backgroundColor: "var(--calendar-bg, #ffffff)",
823
+ borderBottomColor: "var(--calendar-border, #e2e8f0)"
840
824
  },
841
- children: year
842
- },
843
- year
844
- )) }) : mode === "month" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-4", children: [
845
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
846
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
847
- const isDisabled = isDateDisabled(day);
848
- const isCurrentMonth = (0, import_date_fns.isSameMonth)(day, currentDate);
849
- const isSelected = selectionMode === "single" && value && (0, import_date_fns.isSameDay)(day, value);
850
- const isRangeStart = selectionMode === "range" && startDate && (0, import_date_fns.isSameDay)(day, startDate);
851
- const isRangeEnd = selectionMode === "range" && endDate && (0, import_date_fns.isSameDay)(day, endDate);
852
- const isInRange = selectionMode === "range" && startDate && endDate && (0, import_date_fns.isAfter)(day, startDate) && (0, import_date_fns.isBefore)(day, endDate);
853
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
825
+ children: [
826
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
827
+ "h2",
828
+ {
829
+ className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
830
+ style: {
831
+ color: "var(--calendar-header-text, #1e293b)"
832
+ },
833
+ onClick: () => setView(view === "calendar" ? "years" : "calendar"),
834
+ onMouseEnter: (e) => {
835
+ e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
836
+ },
837
+ onMouseLeave: (e) => {
838
+ e.currentTarget.style.backgroundColor = "transparent";
839
+ },
840
+ children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : (0, import_date_fns.format)(currentDate, "MMMM yyyy", { locale: import_locale.es })
841
+ }
842
+ ),
843
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
844
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
845
+ "button",
846
+ {
847
+ onClick: handlePrev,
848
+ type: "button",
849
+ className: "p-1.5 rounded-md transition-colors",
850
+ style: { color: "var(--calendar-days-text, #334155)" },
851
+ onMouseEnter: (e) => {
852
+ e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
853
+ },
854
+ onMouseLeave: (e) => {
855
+ e.currentTarget.style.backgroundColor = "transparent";
856
+ },
857
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronLeft, { size: 14 })
858
+ }
859
+ ),
860
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
861
+ "button",
862
+ {
863
+ onClick: handleToday,
864
+ type: "button",
865
+ className: "text-sm font-medium px-3 py-1.5 rounded-md transition-colors",
866
+ style: { color: "var(--calendar-days-text, #334155)" },
867
+ onMouseEnter: (e) => {
868
+ e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
869
+ },
870
+ onMouseLeave: (e) => {
871
+ e.currentTarget.style.backgroundColor = "transparent";
872
+ },
873
+ children: "Hoy"
874
+ }
875
+ ),
876
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
877
+ "button",
878
+ {
879
+ onClick: handleNext,
880
+ type: "button",
881
+ className: "p-1.5 rounded-md transition-colors",
882
+ style: { color: "var(--calendar-days-text, #334155)" },
883
+ onMouseEnter: (e) => {
884
+ e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
885
+ },
886
+ onMouseLeave: (e) => {
887
+ e.currentTarget.style.backgroundColor = "transparent";
888
+ },
889
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronRight, { size: 14 })
890
+ }
891
+ )
892
+ ] })
893
+ ]
894
+ }
895
+ ),
896
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
897
+ "div",
898
+ {
899
+ className: "flex-1 overflow-auto relative",
900
+ style: { backgroundColor: "var(--calendar-bg, #ffffff)" },
901
+ children: view === "years" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-4 grid grid-cols-4 gap-2", children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
854
902
  "button",
855
903
  {
856
904
  type: "button",
857
- disabled: isDisabled,
858
- onClick: () => onChange && onChange(day),
859
905
  className: cn(
860
- "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
861
- !isCurrentMonth && "opacity-40",
862
- isDisabled && "opacity-20 cursor-not-allowed"
906
+ "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
907
+ year === currentDate.getFullYear() ? "bg-[var(--calendar-selected-bg)] text-[var(--calendar-selected-text)]" : "hover:bg-[var(--calendar-today-bg)] hover:text-[var(--calendar-today-text)]"
863
908
  ),
864
909
  style: {
865
- backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : (0, import_date_fns.isToday)(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
866
- color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : (0, import_date_fns.isToday)(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
867
- fontWeight: isSelected || isRangeStart || isRangeEnd || (0, import_date_fns.isToday)(day) ? "700" : "400"
910
+ color: year === currentDate.getFullYear() ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)"
868
911
  },
869
- children: [
870
- (0, import_date_fns.format)(day, "d"),
871
- selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" }),
872
- selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-primary-50 -z-10" })
873
- ]
912
+ onClick: () => {
913
+ setCurrentDate((d) => {
914
+ const newDate = new Date(d);
915
+ newDate.setFullYear(year);
916
+ return newDate;
917
+ });
918
+ setView("calendar");
919
+ },
920
+ children: year
874
921
  },
875
- day.toISOString()
876
- );
877
- }) })
878
- ] }) : (
879
- /* Week/Day View (Scheduler) */
880
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
881
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-none w-16 border-r border-gray-100 bg-gray-50 pt-10 select-none", children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-400 -mt-2 inline-block transform -translate-y-1/2", children: (0, import_date_fns.format)((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour)) }),
882
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 border-r border-gray-100 min-w-[120px] relative", children: [
883
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn(
884
- "h-10 border-b border-gray-200 flex flex-col items-center justify-center sticky top-0 bg-white z-10",
885
- (0, import_date_fns.isToday)(day) && "bg-primary-50"
886
- ), children: [
887
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("text-xs font-semibold uppercase", (0, import_date_fns.isToday)(day) ? "text-primary-600" : "text-gray-500"), children: (0, import_date_fns.format)(day, "EEE", { locale: import_locale.es }) }),
888
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
889
- "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
890
- (0, import_date_fns.isToday)(day) ? "bg-primary-600 text-white" : "text-gray-800"
891
- ), children: (0, import_date_fns.format)(day, "d") })
892
- ] }),
893
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
894
- TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
922
+ year
923
+ )) }) : mode === "month" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-4", children: [
924
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 mb-2", children: ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-xs font-semibold text-gray-400 uppercase py-1", children: day }, day)) }),
925
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
926
+ const isDisabled = isDateDisabled(day);
927
+ const isCurrentMonth = (0, import_date_fns.isSameMonth)(day, currentDate);
928
+ const isSelected = selectionMode === "single" && value && (0, import_date_fns.isSameDay)(day, value);
929
+ const isRangeStart = selectionMode === "range" && startDate && (0, import_date_fns.isSameDay)(day, startDate);
930
+ const isRangeEnd = selectionMode === "range" && endDate && (0, import_date_fns.isSameDay)(day, endDate);
931
+ const isInRange = selectionMode === "range" && startDate && endDate && (0, import_date_fns.isAfter)(day, startDate) && (0, import_date_fns.isBefore)(day, endDate);
932
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
933
+ "button",
934
+ {
935
+ type: "button",
936
+ disabled: isDisabled,
937
+ onClick: () => onChange && onChange(day),
938
+ className: cn(
939
+ "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
940
+ !isCurrentMonth && "opacity-40",
941
+ isDisabled && "opacity-20 cursor-not-allowed"
942
+ ),
943
+ style: {
944
+ backgroundColor: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-bg, #2563eb)" : isInRange ? "var(--calendar-range-bg, #eff6ff)" : (0, import_date_fns.isToday)(day) ? "var(--calendar-today-bg, #eff6ff)" : "transparent",
945
+ color: isSelected || isRangeStart || isRangeEnd ? "var(--calendar-selected-text, #ffffff)" : (0, import_date_fns.isToday)(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
946
+ fontWeight: isSelected || isRangeStart || isRangeEnd || (0, import_date_fns.isToday)(day) ? "700" : "400"
947
+ },
948
+ children: [
949
+ (0, import_date_fns.format)(day, "d"),
950
+ selectionMode === "range" && isRangeStart && endDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" }),
951
+ selectionMode === "range" && isRangeEnd && startDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" })
952
+ ]
953
+ },
954
+ day.toISOString()
955
+ );
956
+ }) })
957
+ ] }) : (
958
+ /* Week/Day View (Scheduler) */
959
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
960
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
961
+ "div",
962
+ {
963
+ className: "flex-none w-16 pt-10 select-none",
964
+ style: {
965
+ backgroundColor: "var(--calendar-header-hover, #f1f5f9)",
966
+ borderRight: "1px solid var(--calendar-border, #e2e8f0)"
967
+ },
968
+ children: TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-20 relative text-right pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-slate-400 dark:text-slate-500 -mt-2 inline-block transform -translate-y-1/2", children: (0, import_date_fns.format)((/* @__PURE__ */ new Date()).setHours(hour, 0), "HH:mm") }) }, hour))
969
+ }
970
+ ),
971
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-1", children: viewDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
895
972
  "div",
896
973
  {
897
- className: "h-20 border-b border-gray-100 border-dashed relative group",
974
+ className: "flex-1 min-w-[120px] relative",
975
+ style: { borderRight: "1px solid var(--calendar-border, #e2e8f0)" },
898
976
  children: [
899
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
977
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
900
978
  "div",
901
979
  {
902
- className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
903
- onMouseDown: (e) => {
904
- const d = new Date(day);
905
- d.setHours(hour, 0, 0, 0);
906
- handleMouseDown(d, e);
907
- },
908
- onMouseEnter: () => {
909
- const d = new Date(day);
910
- d.setHours(hour, 0, 0, 0);
911
- handleMouseEnter(d);
980
+ className: "h-10 flex flex-col items-center justify-center sticky top-0 z-10",
981
+ style: {
982
+ backgroundColor: (0, import_date_fns.isToday)(day) ? "var(--calendar-today-bg, #eff6ff)" : "var(--calendar-bg, #ffffff)",
983
+ borderBottom: "1px solid var(--calendar-border, #e2e8f0)"
912
984
  },
913
- onClick: () => {
914
- if (!isDraggingRef.current) {
915
- const d = new Date(day);
916
- d.setHours(hour, 0, 0, 0);
917
- onSlotClick && onSlotClick(d);
918
- }
919
- }
985
+ children: [
986
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
987
+ "span",
988
+ {
989
+ className: "text-xs font-semibold uppercase",
990
+ style: {
991
+ color: (0, import_date_fns.isToday)(day) ? "var(--calendar-today-text, #2563eb)" : "var(--calendar-days-text, #334155)",
992
+ opacity: (0, import_date_fns.isToday)(day) ? 1 : 0.6
993
+ },
994
+ children: (0, import_date_fns.format)(day, "EEE", { locale: import_locale.es })
995
+ }
996
+ ),
997
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
998
+ "span",
999
+ {
1000
+ className: "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
1001
+ style: {
1002
+ color: (0, import_date_fns.isToday)(day) ? "var(--calendar-selected-text, #ffffff)" : "var(--calendar-days-text, #334155)",
1003
+ backgroundColor: (0, import_date_fns.isToday)(day) ? "var(--calendar-selected-bg, #2563eb)" : "transparent"
1004
+ },
1005
+ children: (0, import_date_fns.format)(day, "d")
1006
+ }
1007
+ )
1008
+ ]
920
1009
  }
921
1010
  ),
922
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1011
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
1012
+ TIME_SLOTS.map((hour) => hour < END_HOUR && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1013
+ "div",
1014
+ {
1015
+ className: "h-20 relative group",
1016
+ style: { borderBottom: "1px dashed var(--calendar-border, #e2e8f0)" },
1017
+ children: [
1018
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1019
+ "div",
1020
+ {
1021
+ className: "absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
1022
+ onMouseDown: (e) => {
1023
+ const d = new Date(day);
1024
+ d.setHours(hour, 0, 0, 0);
1025
+ handleMouseDown(d, e);
1026
+ },
1027
+ onMouseEnter: () => {
1028
+ const d = new Date(day);
1029
+ d.setHours(hour, 0, 0, 0);
1030
+ handleMouseEnter(d);
1031
+ },
1032
+ onClick: () => {
1033
+ if (!isDraggingRef.current) {
1034
+ const d = new Date(day);
1035
+ d.setHours(hour, 0, 0, 0);
1036
+ onSlotClick && onSlotClick(d);
1037
+ }
1038
+ }
1039
+ }
1040
+ ),
1041
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1042
+ "div",
1043
+ {
1044
+ className: "absolute inset-x-0 bottom-0 h-10 hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0",
1045
+ onMouseDown: (e) => {
1046
+ const d = new Date(day);
1047
+ d.setHours(hour, 30, 0, 0);
1048
+ handleMouseDown(d, e);
1049
+ },
1050
+ onMouseEnter: () => {
1051
+ const d = new Date(day);
1052
+ d.setHours(hour, 30, 0, 0);
1053
+ handleMouseEnter(d);
1054
+ },
1055
+ onClick: () => {
1056
+ if (!isDraggingRef.current) {
1057
+ const d = new Date(day);
1058
+ d.setHours(hour, 30, 0, 0);
1059
+ onSlotClick && onSlotClick(d);
1060
+ }
1061
+ }
1062
+ }
1063
+ )
1064
+ ]
1065
+ },
1066
+ hour
1067
+ )),
1068
+ dragStart && dragCurrent && (0, import_date_fns.isSameDay)(dragStart, day) && (() => {
1069
+ let start = dragStart;
1070
+ let end = dragCurrent;
1071
+ if ((0, import_date_fns.isBefore)(end, start)) [start, end] = [end, start];
1072
+ const finalEnd = (0, import_date_fns.addMinutes)(end, 30);
1073
+ const startMinutes = start.getHours() * 60 + start.getMinutes();
1074
+ const dayStartMinutes = START_HOUR * 60;
1075
+ const duration = (0, import_date_fns.differenceInMinutes)(finalEnd, start);
1076
+ const top = (startMinutes - dayStartMinutes) / 60 * 80;
1077
+ const height = duration / 60 * 80;
1078
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1079
+ "div",
1080
+ {
1081
+ className: "absolute left-1 right-1 bg-[var(--calendar-selected-bg)]/30 border border-[var(--calendar-selected-bg)] rounded z-10 pointer-events-none",
1082
+ style: { top: `${top}px`, height: `${height}px` }
1083
+ }
1084
+ );
1085
+ })(),
1086
+ weekEvents.filter((event) => (0, import_date_fns.isSameDay)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, day)).map((event) => {
1087
+ const style = getEventStyle(event);
1088
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1089
+ "div",
1090
+ {
1091
+ className: cn(
1092
+ "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
1093
+ !event.color && "bg-[var(--calendar-today-bg)] text-[var(--calendar-today-text)] border-[var(--calendar-selected-bg)]"
1094
+ ),
1095
+ style: {
1096
+ top: style.top,
1097
+ height: style.height,
1098
+ backgroundColor: event.color ? `${event.color}20` : void 0,
1099
+ borderColor: event.color,
1100
+ color: event.color ? event.color : void 0
1101
+ },
1102
+ onClick: (e) => {
1103
+ e.stopPropagation();
1104
+ onEventClick && onEventClick(event);
1105
+ },
1106
+ children: [
1107
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-semibold truncate", children: event.title }),
1108
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "opacity-80 truncate", children: [
1109
+ (0, import_date_fns.format)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, "HH:mm"),
1110
+ " -",
1111
+ (0, import_date_fns.format)(typeof event.end === "string" ? (0, import_date_fns.parseISO)(event.end) : event.end, "HH:mm")
1112
+ ] })
1113
+ ]
1114
+ },
1115
+ event.id
1116
+ );
1117
+ })
1118
+ ] }),
1119
+ (0, import_date_fns.isToday)(day) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
923
1120
  "div",
924
1121
  {
925
- className: "absolute inset-x-0 bottom-0 h-10 hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
926
- onMouseDown: (e) => {
927
- const d = new Date(day);
928
- d.setHours(hour, 30, 0, 0);
929
- handleMouseDown(d, e);
930
- },
931
- onMouseEnter: () => {
932
- const d = new Date(day);
933
- d.setHours(hour, 30, 0, 0);
934
- handleMouseEnter(d);
1122
+ className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
1123
+ style: {
1124
+ top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
935
1125
  },
936
- onClick: () => {
937
- if (!isDraggingRef.current) {
938
- const d = new Date(day);
939
- d.setHours(hour, 30, 0, 0);
940
- onSlotClick && onSlotClick(d);
941
- }
942
- }
1126
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
943
1127
  }
944
1128
  )
945
1129
  ]
946
1130
  },
947
- hour
948
- )),
949
- dragStart && dragCurrent && (0, import_date_fns.isSameDay)(dragStart, day) && (() => {
950
- let start = dragStart;
951
- let end = dragCurrent;
952
- if ((0, import_date_fns.isBefore)(end, start)) [start, end] = [end, start];
953
- const finalEnd = (0, import_date_fns.addMinutes)(end, 30);
954
- const startMinutes = start.getHours() * 60 + start.getMinutes();
955
- const dayStartMinutes = START_HOUR * 60;
956
- const duration = (0, import_date_fns.differenceInMinutes)(finalEnd, start);
957
- const top = (startMinutes - dayStartMinutes) / 60 * 80;
958
- const height = duration / 60 * 80;
959
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
960
- "div",
961
- {
962
- className: "absolute left-1 right-1 bg-primary-500/30 border border-primary-500 rounded z-10 pointer-events-none",
963
- style: { top: `${top}px`, height: `${height}px` }
964
- }
965
- );
966
- })(),
967
- weekEvents.filter((event) => (0, import_date_fns.isSameDay)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, day)).map((event) => {
968
- const style = getEventStyle(event);
969
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
970
- "div",
971
- {
972
- className: cn(
973
- "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
974
- !event.color && "bg-primary-100 text-primary-700 border-primary-500"
975
- ),
976
- style: {
977
- top: style.top,
978
- height: style.height,
979
- backgroundColor: event.color ? `${event.color}20` : void 0,
980
- borderColor: event.color,
981
- color: event.color ? event.color : void 0
982
- },
983
- onClick: (e) => {
984
- e.stopPropagation();
985
- onEventClick && onEventClick(event);
986
- },
987
- children: [
988
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-semibold truncate", children: event.title }),
989
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "opacity-80 truncate", children: [
990
- (0, import_date_fns.format)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, "HH:mm"),
991
- " -",
992
- (0, import_date_fns.format)(typeof event.end === "string" ? (0, import_date_fns.parseISO)(event.end) : event.end, "HH:mm")
993
- ] })
994
- ]
995
- },
996
- event.id
997
- );
998
- })
999
- ] }),
1000
- (0, import_date_fns.isToday)(day) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1001
- "div",
1002
- {
1003
- className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
1004
- style: {
1005
- top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
1006
- },
1007
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -left-1.5 -top-1.5 w-3 h-3 bg-danger-500 rounded-full" })
1008
- }
1009
- )
1010
- ] }, day.toISOString())) })
1011
- ] })
1012
- ) })
1131
+ day.toISOString()
1132
+ )) })
1133
+ ] })
1134
+ )
1135
+ }
1136
+ )
1013
1137
  ]
1014
1138
  }
1015
1139
  );
@@ -1146,6 +1270,7 @@ function ITInput({
1146
1270
  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
1147
1271
  const [hasSelectedAll, setHasSelectedAll] = (0, import_react4.useState)(false);
1148
1272
  const [showPassword, setShowPassword] = (0, import_react4.useState)(false);
1273
+ const [localTouched, setLocalTouched] = (0, import_react4.useState)(false);
1149
1274
  const inputRef = (0, import_react4.useRef)(null);
1150
1275
  const inputTheme = theme.input || {};
1151
1276
  const getStyle = () => {
@@ -1158,8 +1283,8 @@ function ITInput({
1158
1283
  borderWidth: "1px",
1159
1284
  borderStyle: "solid",
1160
1285
  transition: "all 0.2s",
1161
- color: theme.colors.gray[900]
1162
- // Default text color
1286
+ color: "var(--input-text-color, var(--color-secondary-900))"
1287
+ // Theme-aware text color
1163
1288
  };
1164
1289
  if (disabled) {
1165
1290
  style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -1182,7 +1307,11 @@ function ITInput({
1182
1307
  }
1183
1308
  return style;
1184
1309
  };
1185
- const hasError = touched && error;
1310
+ const isTouched = touched !== void 0 ? touched : localTouched;
1311
+ const isEmpty = isCheckboxOrRadio ? !checked : value === void 0 || value === null || String(value).trim() === "";
1312
+ const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
1313
+ const hasError = isTouched && !!effectiveError;
1314
+ const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
1186
1315
  const handleClick = (e) => {
1187
1316
  if (onClick) {
1188
1317
  onClick();
@@ -1352,6 +1481,7 @@ function ITInput({
1352
1481
  e.currentTarget.select();
1353
1482
  };
1354
1483
  const handleBlur = (e) => {
1484
+ setLocalTouched(true);
1355
1485
  setHasSelectedAll(false);
1356
1486
  setIsFocused(false);
1357
1487
  if (readOnly) {
@@ -1435,7 +1565,14 @@ function ITInput({
1435
1565
  id: name,
1436
1566
  type,
1437
1567
  checked,
1438
- onChange: handleTextChange,
1568
+ onChange: (e) => {
1569
+ setLocalTouched(true);
1570
+ handleTextChange(e);
1571
+ },
1572
+ onBlur: (e) => {
1573
+ setLocalTouched(true);
1574
+ onBlur?.(e);
1575
+ },
1439
1576
  disabled,
1440
1577
  required,
1441
1578
  className: (0, import_clsx5.default)(
@@ -1444,11 +1581,11 @@ function ITInput({
1444
1581
  type === "checkbox" && "form-checkbox rounded",
1445
1582
  className,
1446
1583
  { "opacity-50 cursor-not-allowed": disabled },
1447
- { "border-red-500": touched && error }
1584
+ { "border-red-500": hasError }
1448
1585
  )
1449
1586
  }
1450
1587
  ),
1451
- label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: name, className: "text-sm text-gray-700 select-none", children: [
1588
+ label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: name, className: "text-sm text-gray-700 dark:text-slate-300 select-none", children: [
1452
1589
  label,
1453
1590
  " ",
1454
1591
  required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-red-500", children: "*" })
@@ -1462,8 +1599,8 @@ function ITInput({
1462
1599
  {
1463
1600
  htmlFor: name,
1464
1601
  className: (0, import_clsx5.default)(
1465
- "text-sm font-medium text-gray-700",
1466
- { "text-red-500": touched && error },
1602
+ "text-sm font-medium text-gray-700 dark:text-slate-300",
1603
+ { "text-red-500": hasError },
1467
1604
  labelClassName
1468
1605
  ),
1469
1606
  children: [
@@ -1482,7 +1619,11 @@ function ITInput({
1482
1619
  placeholder,
1483
1620
  value: value ?? "",
1484
1621
  onChange: readOnly ? void 0 : onChange,
1485
- onBlur: readOnly ? void 0 : onBlur,
1622
+ onBlur: (e) => {
1623
+ if (readOnly) return;
1624
+ setLocalTouched(true);
1625
+ onBlur?.(e);
1626
+ },
1486
1627
  readOnly,
1487
1628
  maxLength,
1488
1629
  minLength,
@@ -1514,6 +1655,7 @@ function ITInput({
1514
1655
  onFocus: isNumberType ? handleFocus : () => setIsFocused(true),
1515
1656
  onBlur: isNumberType ? handleBlur : (e) => {
1516
1657
  setIsFocused(false);
1658
+ setLocalTouched(true);
1517
1659
  onBlur?.(e);
1518
1660
  },
1519
1661
  onKeyDown: isNumberType ? handleKeyDown : void 0,
@@ -1560,12 +1702,12 @@ function ITInput({
1560
1702
  ] })
1561
1703
  ] })
1562
1704
  ),
1563
- touched && error && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-red-500 text-xs", children: error }) }),
1705
+ hasError && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-red-500 text-xs", children: errorMessage }) }),
1564
1706
  showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-gray-500", children: [
1565
1707
  currentLength,
1566
1708
  maxLength && `/${maxLength}`
1567
1709
  ] }) }),
1568
- isCheckboxOrRadio && touched && error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-red-500", children: error }) })
1710
+ isCheckboxOrRadio && hasError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-red-500", children: errorMessage }) })
1569
1711
  ] });
1570
1712
  }
1571
1713
 
@@ -1576,8 +1718,8 @@ var import_fa3 = require("react-icons/fa");
1576
1718
 
1577
1719
  // src/components/select/select.tsx
1578
1720
  var import_clsx6 = __toESM(require("clsx"), 1);
1579
- var import_fa2 = require("react-icons/fa");
1580
1721
  var import_react5 = require("react");
1722
+ var import_fa2 = require("react-icons/fa");
1581
1723
  var import_jsx_runtime6 = require("react/jsx-runtime");
1582
1724
  function ITSelect({
1583
1725
  name,
@@ -1597,7 +1739,13 @@ function ITSelect({
1597
1739
  readOnly = false
1598
1740
  }) {
1599
1741
  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
1742
+ const [localTouched, setLocalTouched] = (0, import_react5.useState)(false);
1600
1743
  const inputTheme = theme.input || {};
1744
+ const isTouched = touched !== void 0 ? touched : localTouched;
1745
+ const isEmpty = value === void 0 || value === null || String(value).trim() === "";
1746
+ const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
1747
+ const hasError = isTouched && !!effectiveError;
1748
+ const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
1601
1749
  const getStyle = () => {
1602
1750
  const style = {
1603
1751
  backgroundColor: inputTheme.backgroundColor,
@@ -1608,7 +1756,7 @@ function ITSelect({
1608
1756
  borderWidth: "1px",
1609
1757
  borderStyle: "solid",
1610
1758
  transition: "all 0.2s",
1611
- color: theme.colors.gray[900],
1759
+ color: "var(--input-text-color, var(--color-secondary-900))",
1612
1760
  appearance: "none"
1613
1761
  // Important for custom styling
1614
1762
  };
@@ -1617,7 +1765,7 @@ function ITSelect({
1617
1765
  style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
1618
1766
  style.opacity = 0.7;
1619
1767
  }
1620
- if (touched && error) {
1768
+ if (hasError) {
1621
1769
  style.borderColor = inputTheme.error?.borderColor || "red";
1622
1770
  if (isFocused) {
1623
1771
  style.boxShadow = inputTheme.error?.ring;
@@ -1635,8 +1783,8 @@ function ITSelect({
1635
1783
  {
1636
1784
  htmlFor: name,
1637
1785
  className: (0, import_clsx6.default)(
1638
- "text-sm font-medium text-gray-700 pt-0",
1639
- { "text-red-500": touched && error }
1786
+ "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
1787
+ { "text-red-500": hasError }
1640
1788
  ),
1641
1789
  children: [
1642
1790
  label,
@@ -1655,6 +1803,7 @@ function ITSelect({
1655
1803
  onChange: readOnly ? void 0 : onChange,
1656
1804
  onBlur: (e) => {
1657
1805
  setIsFocused(false);
1806
+ setLocalTouched(true);
1658
1807
  readOnly ? void 0 : onBlur?.(e);
1659
1808
  },
1660
1809
  onFocus: () => setIsFocused(true),
@@ -1682,7 +1831,7 @@ function ITSelect({
1682
1831
  ),
1683
1832
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa2.FaAngleDown, {}) })
1684
1833
  ] }),
1685
- touched && error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-500 text-xs", children: error }) })
1834
+ hasError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 min-w-[140px] flex items-center pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-500 text-xs", children: errorMessage }) })
1686
1835
  ] })
1687
1836
  ] }) });
1688
1837
  }
@@ -2685,6 +2834,7 @@ function ITDatePicker({
2685
2834
  onChange: handleDateChange,
2686
2835
  minDate,
2687
2836
  maxDate,
2837
+ variant,
2688
2838
  className: "h-auto border-none shadow-none w-full"
2689
2839
  }
2690
2840
  )
@@ -2946,11 +3096,11 @@ function ITTimePicker({
2946
3096
  const handleBlurInput = () => {
2947
3097
  if (!validateTime(inputValue)) {
2948
3098
  setIsValidTime(false);
2949
- onBlur({ target: { name, value } });
3099
+ onBlur?.({ target: { name, value } });
2950
3100
  return;
2951
3101
  }
2952
3102
  setIsValidTime(true);
2953
- onBlur({ target: { name, value: inputValue } });
3103
+ onBlur?.({ target: { name, value: inputValue } });
2954
3104
  };
2955
3105
  const handleHourSelect = (h) => {
2956
3106
  const min = currentMinute || "00";
@@ -3789,6 +3939,7 @@ function ITSearchSelect({
3789
3939
  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
3790
3940
  const [searchTerm, setSearchTerm] = (0, import_react19.useState)("");
3791
3941
  const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
3942
+ const [localTouched, setLocalTouched] = (0, import_react19.useState)(false);
3792
3943
  const containerRef = (0, import_react19.useRef)(null);
3793
3944
  const timeoutRef = (0, import_react19.useRef)(null);
3794
3945
  const selectedOption = (0, import_react19.useMemo)(() => {
@@ -3841,10 +3992,16 @@ function ITSearchSelect({
3841
3992
  const handleInputBlur = (e) => {
3842
3993
  setTimeout(() => {
3843
3994
  setIsFocused(false);
3995
+ setLocalTouched(true);
3844
3996
  onBlur?.(e);
3845
3997
  }, 200);
3846
3998
  };
3847
3999
  const inputTheme = theme.input || {};
4000
+ const isTouched = touched !== void 0 ? touched : localTouched;
4001
+ const isEmpty = value === void 0 || value === null || String(value).trim() === "";
4002
+ const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
4003
+ const hasError = isTouched && !!effectiveError;
4004
+ const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
3848
4005
  const getInputStyle = () => {
3849
4006
  const style = {
3850
4007
  backgroundColor: inputTheme.backgroundColor || "#ffffff",
@@ -3855,7 +4012,7 @@ function ITSearchSelect({
3855
4012
  borderWidth: "1px",
3856
4013
  borderStyle: "solid",
3857
4014
  transition: "all 0.2s",
3858
- color: theme.colors.gray[900],
4015
+ color: "var(--input-text-color, var(--color-secondary-900))",
3859
4016
  width: "100%"
3860
4017
  };
3861
4018
  if (disabled) {
@@ -3864,7 +4021,7 @@ function ITSearchSelect({
3864
4021
  style.opacity = 0.7;
3865
4022
  style.cursor = "not-allowed";
3866
4023
  }
3867
- if (touched && error) {
4024
+ if (hasError) {
3868
4025
  style.borderColor = inputTheme.error?.borderColor || "red";
3869
4026
  if (isFocused) {
3870
4027
  style.boxShadow = inputTheme.error?.ring;
@@ -3875,12 +4032,12 @@ function ITSearchSelect({
3875
4032
  }
3876
4033
  return style;
3877
4034
  };
3878
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx14.default)("w-full flex flex-col gap-1.5", className), ref: containerRef, children: [
4035
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx14.default)("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
3879
4036
  label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3880
4037
  "label",
3881
4038
  {
3882
- className: (0, import_clsx14.default)("text-sm font-medium text-gray-700", {
3883
- "text-red-500": touched && error
4039
+ className: (0, import_clsx14.default)("text-sm font-medium text-gray-700 dark:text-slate-300", {
4040
+ "text-red-500": hasError
3884
4041
  }),
3885
4042
  children: [
3886
4043
  label,
@@ -3912,20 +4069,20 @@ function ITSearchSelect({
3912
4069
  !isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa11.FaSearch, { size: 14, className: (0, import_clsx14.default)({ "text-primary-500": isFocused }) })
3913
4070
  ] })
3914
4071
  ] }),
3915
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
4072
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3916
4073
  "div",
3917
4074
  {
3918
4075
  onClick: () => handleSelect(option),
3919
4076
  className: (0, import_clsx14.default)(
3920
4077
  "px-4 py-2 text-sm cursor-pointer transition-colors",
3921
- value === option[valueField] ? "bg-primary-50 text-primary-700 font-medium" : "hover:bg-gray-50 text-gray-700"
4078
+ value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
3922
4079
  ),
3923
4080
  children: option[labelField]
3924
4081
  },
3925
4082
  option[valueField]
3926
4083
  )) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
3927
4084
  ] }),
3928
- touched && error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })
4085
+ hasError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-xs mt-1", children: errorMessage })
3929
4086
  ] });
3930
4087
  }
3931
4088
 
@@ -4025,6 +4182,90 @@ function ITText({ children, className = "" }) {
4025
4182
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: `${className} text-gray-900 `, children });
4026
4183
  }
4027
4184
 
4185
+ // src/components/tabs/tabs.tsx
4186
+ var import_react21 = require("react");
4187
+ var import_clsx16 = require("clsx");
4188
+ var import_jsx_runtime22 = require("react/jsx-runtime");
4189
+ var ITTabs = ({
4190
+ items,
4191
+ defaultActiveId,
4192
+ onChange,
4193
+ variant = "line",
4194
+ className = "",
4195
+ containerClassName = ""
4196
+ }) => {
4197
+ const [activeId, setActiveId] = (0, import_react21.useState)(defaultActiveId || items[0]?.id);
4198
+ const handleTabClick = (id, disabled) => {
4199
+ if (disabled) return;
4200
+ setActiveId(id);
4201
+ if (onChange) onChange(id);
4202
+ };
4203
+ const activeContent = items.find((item) => item.id === activeId)?.content;
4204
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx16.clsx)("w-full", containerClassName), children: [
4205
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx16.clsx)(
4206
+ "flex border-gray-200 mb-4",
4207
+ variant === "line" ? "border-b" : "gap-2 p-1 bg-gray-100 rounded-lg w-fit",
4208
+ className
4209
+ ), children: items.map((item) => {
4210
+ const isActive = item.id === activeId;
4211
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
4212
+ "button",
4213
+ {
4214
+ onClick: () => handleTabClick(item.id, item.disabled),
4215
+ disabled: item.disabled,
4216
+ className: (0, import_clsx16.clsx)(
4217
+ "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
4218
+ // LINE VARIANT
4219
+ variant === "line" && [
4220
+ "border-b-2 -mb-[2px]",
4221
+ isActive ? "border-primary-500 text-primary-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
4222
+ ],
4223
+ // PILL VARIANT
4224
+ variant === "pill" && [
4225
+ "rounded-md",
4226
+ isActive ? "bg-white text-primary-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
4227
+ ],
4228
+ item.disabled && "opacity-50 cursor-not-allowed"
4229
+ ),
4230
+ children: [
4231
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-4 h-4", children: item.icon }),
4232
+ item.label
4233
+ ]
4234
+ },
4235
+ item.id
4236
+ );
4237
+ }) }),
4238
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tab-content animate-fadeIn", children: activeContent })
4239
+ ] });
4240
+ };
4241
+ var tabs_default = ITTabs;
4242
+
4243
+ // src/components/triple-filter/tripleFilter.tsx
4244
+ var import_jsx_runtime23 = require("react/jsx-runtime");
4245
+ var ITTripleFilter = ({
4246
+ value,
4247
+ onChange,
4248
+ options,
4249
+ className = ""
4250
+ }) => {
4251
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4252
+ "div",
4253
+ {
4254
+ className: `flex bg-slate-100 p-1 rounded-xl gap-1 w-fit ${className}`,
4255
+ children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4256
+ "button",
4257
+ {
4258
+ onClick: () => onChange(option.value),
4259
+ className: `px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all duration-200 whitespace-nowrap ${value === option.value ? "bg-white text-emerald-600 shadow-sm" : "text-slate-400 hover:text-slate-600"}`,
4260
+ children: option.label
4261
+ },
4262
+ String(option.value)
4263
+ ))
4264
+ }
4265
+ );
4266
+ };
4267
+ var tripleFilter_default = ITTripleFilter;
4268
+
4028
4269
  // src/types/toast.types.ts
4029
4270
  var positionStyles = {
4030
4271
  "top-right": "top-4 right-4",
@@ -4036,10 +4277,10 @@ var positionStyles = {
4036
4277
  };
4037
4278
 
4038
4279
  // src/components/toast/toast.tsx
4039
- var import_clsx16 = __toESM(require("clsx"), 1);
4040
- var import_react21 = require("react");
4280
+ var import_clsx17 = __toESM(require("clsx"), 1);
4281
+ var import_react22 = require("react");
4041
4282
  var import_fa12 = require("react-icons/fa");
4042
- var import_jsx_runtime22 = require("react/jsx-runtime");
4283
+ var import_jsx_runtime24 = require("react/jsx-runtime");
4043
4284
  function ITToast({
4044
4285
  message,
4045
4286
  type = "info",
@@ -4047,8 +4288,8 @@ function ITToast({
4047
4288
  position = "top-right",
4048
4289
  onClose
4049
4290
  }) {
4050
- const [isVisible, setIsVisible] = (0, import_react21.useState)(true);
4051
- (0, import_react21.useEffect)(() => {
4291
+ const [isVisible, setIsVisible] = (0, import_react22.useState)(true);
4292
+ (0, import_react22.useEffect)(() => {
4052
4293
  const timer = setTimeout(() => {
4053
4294
  setIsVisible(false);
4054
4295
  setTimeout(() => {
@@ -4068,21 +4309,21 @@ function ITToast({
4068
4309
  const TypeIcon = () => {
4069
4310
  switch (type) {
4070
4311
  case "success":
4071
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
4312
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa12.FaCheckCircle, { className: "w-5 h-5 flex-shrink-0" });
4072
4313
  case "error":
4073
4314
  case "danger":
4074
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
4315
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa12.FaTimesCircle, { className: "w-5 h-5 flex-shrink-0" });
4075
4316
  case "warning":
4076
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
4317
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa12.FaExclamationTriangle, { className: "w-5 h-5 flex-shrink-0" });
4077
4318
  case "info":
4078
4319
  default:
4079
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
4320
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa12.FaInfoCircle, { className: "w-5 h-5 flex-shrink-0" });
4080
4321
  }
4081
4322
  };
4082
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
4323
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4083
4324
  "div",
4084
4325
  {
4085
- className: (0, import_clsx16.default)(
4326
+ className: (0, import_clsx17.default)(
4086
4327
  "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
4087
4328
  positionStyles[position],
4088
4329
  {
@@ -4095,17 +4336,17 @@ function ITToast({
4095
4336
  style: { backgroundColor },
4096
4337
  role: "alert",
4097
4338
  children: [
4098
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3", children: [
4099
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypeIcon, {}),
4100
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-medium text-sm sm:text-base leading-snug", children: message })
4339
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
4340
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypeIcon, {}),
4341
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-medium text-sm sm:text-base leading-snug", children: message })
4101
4342
  ] }),
4102
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4343
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4103
4344
  "button",
4104
4345
  {
4105
4346
  onClick: handleClose,
4106
4347
  className: "p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50",
4107
4348
  "aria-label": "Close notification",
4108
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fa12.FaTimes, { className: "w-4 h-4" })
4349
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa12.FaTimes, { className: "w-4 h-4" })
4109
4350
  }
4110
4351
  )
4111
4352
  ]
@@ -4114,10 +4355,27 @@ function ITToast({
4114
4355
  }
4115
4356
 
4116
4357
  // src/components/dropfile/dropfile.tsx
4117
- var import_react22 = require("react");
4358
+ var import_react23 = require("react");
4118
4359
  var import_react_dropzone = require("react-dropzone");
4119
- var import_clsx17 = __toESM(require("clsx"), 1);
4120
- var import_jsx_runtime23 = require("react/jsx-runtime");
4360
+ var import_clsx18 = __toESM(require("clsx"), 1);
4361
+ var import_jsx_runtime25 = require("react/jsx-runtime");
4362
+ var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
4363
+ FileTypeEnum2["PDF"] = "application/pdf";
4364
+ FileTypeEnum2["XLS"] = "application/vnd.ms-excel";
4365
+ FileTypeEnum2["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
4366
+ FileTypeEnum2["CSV"] = "text/csv";
4367
+ FileTypeEnum2["PNG"] = "image/png";
4368
+ FileTypeEnum2["JPG"] = "image/jpg";
4369
+ FileTypeEnum2["JPEG"] = "image/jpeg";
4370
+ return FileTypeEnum2;
4371
+ })(FileTypeEnum || {});
4372
+ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
4373
+ UploadStatus2["PENDING"] = "pendiente";
4374
+ UploadStatus2["UPLOADING"] = "subiendo";
4375
+ UploadStatus2["UPLOADED"] = "subido";
4376
+ UploadStatus2["ERROR"] = "error";
4377
+ return UploadStatus2;
4378
+ })(UploadStatus || {});
4121
4379
  var ITDropfile = ({
4122
4380
  onFileSelect,
4123
4381
  onCancel,
@@ -4130,15 +4388,15 @@ var ITDropfile = ({
4130
4388
  onStatusChange,
4131
4389
  initialPreviewUrl
4132
4390
  }) => {
4133
- const [selectedFile, setSelectedFile] = (0, import_react22.useState)(null);
4134
- const [fileType, setFileType] = (0, import_react22.useState)(null);
4135
- const [imagePreview, setImagePreview] = (0, import_react22.useState)(initialPreviewUrl || null);
4136
- const [isConfirmed, setIsConfirmed] = (0, import_react22.useState)(false);
4137
- const [internalUploadStatus, setInternalUploadStatus] = (0, import_react22.useState)(
4391
+ const [selectedFile, setSelectedFile] = (0, import_react23.useState)(null);
4392
+ const [fileType, setFileType] = (0, import_react23.useState)(null);
4393
+ const [imagePreview, setImagePreview] = (0, import_react23.useState)(initialPreviewUrl || null);
4394
+ const [isConfirmed, setIsConfirmed] = (0, import_react23.useState)(false);
4395
+ const [internalUploadStatus, setInternalUploadStatus] = (0, import_react23.useState)(
4138
4396
  initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
4139
4397
  );
4140
- const canvasRef = (0, import_react22.useRef)(null);
4141
- (0, import_react22.useEffect)(() => {
4398
+ const canvasRef = (0, import_react23.useRef)(null);
4399
+ (0, import_react23.useEffect)(() => {
4142
4400
  if (initialPreviewUrl && !selectedFile) {
4143
4401
  setImagePreview(initialPreviewUrl);
4144
4402
  if (externalStatus === void 0) setInternalUploadStatus("subido" /* UPLOADED */);
@@ -4227,9 +4485,9 @@ var ITDropfile = ({
4227
4485
  }
4228
4486
  };
4229
4487
  const { label, color, dotColor } = config[status];
4230
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
4231
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
4232
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xs font-medium flex items-center gap-1.5", children: label })
4488
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
4489
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
4490
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs font-medium flex items-center gap-1.5", children: label })
4233
4491
  ] });
4234
4492
  };
4235
4493
  const onDrop = (acceptedFiles) => {
@@ -4261,12 +4519,12 @@ var ITDropfile = ({
4261
4519
  accept: getAcceptedFileTypes(),
4262
4520
  maxFiles: 1
4263
4521
  });
4264
- (0, import_react22.useEffect)(() => {
4522
+ (0, import_react23.useEffect)(() => {
4265
4523
  const renderPDF = async () => {
4266
4524
  };
4267
4525
  renderPDF();
4268
4526
  }, [selectedFile, fileType]);
4269
- (0, import_react22.useEffect)(() => {
4527
+ (0, import_react23.useEffect)(() => {
4270
4528
  return () => {
4271
4529
  if (imagePreview) {
4272
4530
  URL.revokeObjectURL(imagePreview);
@@ -4304,19 +4562,19 @@ var ITDropfile = ({
4304
4562
  handleCancel();
4305
4563
  };
4306
4564
  const isImage = fileType && fileType.startsWith("image/");
4307
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx17.default)("w-full transition-all duration-300", containerClassName), children: [
4308
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
4309
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "block text-sm font-semibold text-gray-700", children: [
4565
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: (0, import_clsx18.default)("w-full transition-all duration-300", containerClassName), children: [
4566
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
4567
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "block text-sm font-semibold text-gray-700", children: [
4310
4568
  "Subir archivo ",
4311
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-gray-400 font-normal text-xs", children: [
4569
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "text-gray-400 font-normal text-xs", children: [
4312
4570
  "(",
4313
4571
  getFileExtensions(),
4314
4572
  ")"
4315
4573
  ] })
4316
4574
  ] }),
4317
- showStatusBadge && selectedFile && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StatusBadge, { status: uploadStatus })
4575
+ showStatusBadge && selectedFile && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StatusBadge, { status: uploadStatus })
4318
4576
  ] }),
4319
- !selectedFile && !imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
4577
+ !selectedFile && !imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
4320
4578
  "div",
4321
4579
  {
4322
4580
  ...getRootProps(),
@@ -4326,41 +4584,41 @@ var ITDropfile = ({
4326
4584
  ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"}
4327
4585
  `,
4328
4586
  children: [
4329
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ...getInputProps() }),
4330
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-gray-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4587
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...getInputProps() }),
4588
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-gray-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4331
4589
  "svg",
4332
4590
  {
4333
4591
  className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-gray-400 group-hover:text-primary-500"}`,
4334
4592
  fill: "none",
4335
4593
  viewBox: "0 0 24 24",
4336
4594
  stroke: "currentColor",
4337
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
4595
+ children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
4338
4596
  }
4339
4597
  ) }),
4340
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-gray-700"}`, children: isDragActive ? "\xA1Suelta aqu\xED!" : "Haz clic o arrastra" }) })
4598
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-gray-700"}`, children: isDragActive ? "\xA1Suelta aqu\xED!" : "Haz clic o arrastra" }) })
4341
4599
  ]
4342
4600
  }
4343
- ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
4344
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
4345
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
4346
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
4347
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
4348
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
4601
+ ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
4602
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
4603
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
4604
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0", children: [
4605
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-xs font-medium text-gray-900 truncate", title: selectedFile?.name || "Imagen cargada", children: selectedFile?.name || "Imagen cargada" }),
4606
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[10px] text-gray-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
4349
4607
  ] })
4350
4608
  ] }) }),
4351
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx17.default)("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4609
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: (0, import_clsx18.default)("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4352
4610
  "img",
4353
4611
  {
4354
4612
  src: imagePreview,
4355
4613
  alt: "Vista previa",
4356
4614
  className: "w-full h-full object-contain max-h-[200px]"
4357
4615
  }
4358
- ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
4359
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
4360
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xs", children: "Sin vista previa" })
4616
+ ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "py-8 flex flex-col items-center text-gray-400", children: [
4617
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
4618
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xs", children: "Sin vista previa" })
4361
4619
  ] }) }),
4362
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
4363
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4620
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
4621
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4364
4622
  "button",
4365
4623
  {
4366
4624
  type: "button",
@@ -4369,31 +4627,31 @@ var ITDropfile = ({
4369
4627
  children: "Cancelar"
4370
4628
  }
4371
4629
  ),
4372
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
4630
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
4373
4631
  "button",
4374
4632
  {
4375
4633
  type: "button",
4376
4634
  onClick: handleConfirm,
4377
4635
  className: "px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1",
4378
4636
  children: [
4379
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Confirmar" }),
4380
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
4637
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Confirmar" }),
4638
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
4381
4639
  ]
4382
4640
  }
4383
4641
  )
4384
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
4642
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
4385
4643
  "button",
4386
4644
  {
4387
4645
  type: "button",
4388
4646
  onClick: handleDelete,
4389
4647
  className: "px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1",
4390
4648
  children: [
4391
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
4392
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Eliminar" })
4649
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
4650
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Eliminar" })
4393
4651
  ]
4394
4652
  }
4395
4653
  ) }),
4396
- uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4654
+ uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4397
4655
  "div",
4398
4656
  {
4399
4657
  className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -4409,12 +4667,12 @@ var ITDropfile = ({
4409
4667
  var dropfile_default = ITDropfile;
4410
4668
 
4411
4669
  // src/components/layout/layout.tsx
4412
- var import_react25 = require("react");
4670
+ var import_react26 = require("react");
4413
4671
 
4414
4672
  // src/components/topbar/topbar.tsx
4415
4673
  var import_fa13 = require("react-icons/fa");
4416
- var import_react23 = require("react");
4417
- var import_jsx_runtime24 = require("react/jsx-runtime");
4674
+ var import_react24 = require("react");
4675
+ var import_jsx_runtime26 = require("react/jsx-runtime");
4418
4676
  function ITTopBar({
4419
4677
  logo,
4420
4678
  logoText,
@@ -4424,10 +4682,10 @@ function ITTopBar({
4424
4682
  navItems,
4425
4683
  onNavItemClick
4426
4684
  }) {
4427
- const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react23.useState)(false);
4428
- const userMenuRef = (0, import_react23.useRef)(null);
4685
+ const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react24.useState)(false);
4686
+ const userMenuRef = (0, import_react24.useRef)(null);
4429
4687
  useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
4430
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4688
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4431
4689
  "header",
4432
4690
  {
4433
4691
  className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
@@ -4436,9 +4694,9 @@ function ITTopBar({
4436
4694
  borderBottom: `1px solid ${theme.topbar?.borderColor || "#e2e8f0"}`,
4437
4695
  boxShadow: theme.topbar?.shadow || "none"
4438
4696
  },
4439
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
4440
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-5", children: [
4441
- showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4697
+ children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
4698
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-5", children: [
4699
+ showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4442
4700
  "button",
4443
4701
  {
4444
4702
  className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
@@ -4448,12 +4706,12 @@ function ITTopBar({
4448
4706
  onMouseEnter: (e) => e.currentTarget.style.backgroundColor = theme.topbar?.userMenu?.hoverBackground || "#f1f5f9",
4449
4707
  onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
4450
4708
  onClick: onToggleMobileMenu,
4451
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa13.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
4709
+ children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fa13.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
4452
4710
  }
4453
4711
  ),
4454
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
4455
- logo && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
4456
- logoText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4712
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3", children: [
4713
+ logo && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
4714
+ logoText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4457
4715
  "span",
4458
4716
  {
4459
4717
  className: "text-[1.15rem] font-bold tracking-tight",
@@ -4462,7 +4720,7 @@ function ITTopBar({
4462
4720
  }
4463
4721
  )
4464
4722
  ] }),
4465
- navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: theme.topbar?.borderColor || "#e2e8f0" }, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4723
+ navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: theme.topbar?.borderColor || "#e2e8f0" }, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4466
4724
  "button",
4467
4725
  {
4468
4726
  onClick: () => onNavItemClick?.(item.id),
@@ -4476,16 +4734,16 @@ function ITTopBar({
4476
4734
  e.currentTarget.style.color = theme.topbar?.textColor || "#475569";
4477
4735
  e.currentTarget.style.backgroundColor = "transparent";
4478
4736
  },
4479
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
4480
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "opacity-70", children: item.icon }),
4737
+ children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
4738
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "opacity-70", children: item.icon }),
4481
4739
  item.label
4482
4740
  ] })
4483
4741
  },
4484
4742
  item.id
4485
4743
  )) })
4486
4744
  ] }),
4487
- userMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
4488
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4745
+ userMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
4746
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4489
4747
  "button",
4490
4748
  {
4491
4749
  type: "button",
@@ -4501,19 +4759,19 @@ function ITTopBar({
4501
4759
  },
4502
4760
  onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
4503
4761
  children: [
4504
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
4505
- userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4762
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
4763
+ userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4506
4764
  "img",
4507
4765
  {
4508
4766
  className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
4509
4767
  src: userMenu.userImage,
4510
4768
  alt: "Current user"
4511
4769
  }
4512
- ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fa13.FaUserCircle, { className: "w-6 h-6", style: { color: theme.topbar?.iconColor || "#94a3b8" } }) }),
4513
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
4770
+ ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fa13.FaUserCircle, { className: "w-6 h-6", style: { color: theme.topbar?.iconColor || "#94a3b8" } }) }),
4771
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
4514
4772
  ] }),
4515
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
4516
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4773
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
4774
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4517
4775
  "span",
4518
4776
  {
4519
4777
  className: "font-semibold text-[0.85rem] leading-tight",
@@ -4521,7 +4779,7 @@ function ITTopBar({
4521
4779
  children: userMenu.userName
4522
4780
  }
4523
4781
  ),
4524
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4782
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4525
4783
  "span",
4526
4784
  {
4527
4785
  className: "text-[0.7rem] font-medium",
@@ -4533,7 +4791,7 @@ function ITTopBar({
4533
4791
  ]
4534
4792
  }
4535
4793
  ),
4536
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4794
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4537
4795
  "div",
4538
4796
  {
4539
4797
  ref: userMenuRef,
@@ -4546,15 +4804,15 @@ function ITTopBar({
4546
4804
  border: `1px solid ${theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9"}`
4547
4805
  },
4548
4806
  children: [
4549
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-5 py-4 border-b bg-slate-50/50", style: { borderColor: theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9" }, children: [
4550
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "block font-bold text-[0.9rem]", style: { color: theme.topbar?.userMenu?.textColor || "#0f172a" }, children: userMenu.userName }),
4551
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "block text-xs font-medium truncate mt-0.5", style: { color: theme.topbar?.userMenu?.subtitleColor || "#64748b" }, children: userMenu.userEmail })
4807
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "px-5 py-4 border-b bg-slate-50/50", style: { borderColor: theme.topbar?.userMenu?.dropdown?.borderColor || "#f1f5f9" }, children: [
4808
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "block font-bold text-[0.9rem]", style: { color: theme.topbar?.userMenu?.textColor || "#0f172a" }, children: userMenu.userName }),
4809
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "block text-xs font-medium truncate mt-0.5", style: { color: theme.topbar?.userMenu?.subtitleColor || "#64748b" }, children: userMenu.userEmail })
4552
4810
  ] }),
4553
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
4811
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
4554
4812
  const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
4555
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "px-2", children: [
4556
- i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
4557
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4813
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: "px-2", children: [
4814
+ i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
4815
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4558
4816
  "button",
4559
4817
  {
4560
4818
  onClick: (e) => {
@@ -4584,22 +4842,25 @@ function ITTopBar({
4584
4842
  }
4585
4843
 
4586
4844
  // src/components/sidebar/sidebar.tsx
4587
- var import_react24 = require("react");
4845
+ var import_react25 = require("react");
4588
4846
  var import_fa14 = require("react-icons/fa");
4589
- var import_jsx_runtime25 = require("react/jsx-runtime");
4847
+ var import_jsx_runtime27 = require("react/jsx-runtime");
4590
4848
  function ITSidebar({
4591
4849
  navigationItems = [],
4592
4850
  isCollapsed = false,
4593
4851
  onToggleCollapse,
4594
4852
  className = "",
4595
- visibleOnMobile = false
4853
+ visibleOnMobile = false,
4854
+ onItemClick,
4855
+ onSubItemClick,
4856
+ subitemConnector = "|"
4596
4857
  }) {
4597
- const [expandedItems, setExpandedItems] = (0, import_react24.useState)(/* @__PURE__ */ new Set());
4598
- const [isHovering, setIsHovering] = (0, import_react24.useState)(false);
4599
- const sidebarRef = (0, import_react24.useRef)(null);
4600
- const hoverTimeoutRef = (0, import_react24.useRef)(null);
4601
- const leaveTimeoutRef = (0, import_react24.useRef)(null);
4602
- (0, import_react24.useEffect)(() => {
4858
+ const [expandedItems, setExpandedItems] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
4859
+ const [isHovering, setIsHovering] = (0, import_react25.useState)(false);
4860
+ const sidebarRef = (0, import_react25.useRef)(null);
4861
+ const hoverTimeoutRef = (0, import_react25.useRef)(null);
4862
+ const leaveTimeoutRef = (0, import_react25.useRef)(null);
4863
+ (0, import_react25.useEffect)(() => {
4603
4864
  const handleMouseEnter = () => {
4604
4865
  if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
4605
4866
  if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
@@ -4624,6 +4885,27 @@ function ITSidebar({
4624
4885
  if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
4625
4886
  };
4626
4887
  }, [isCollapsed]);
4888
+ (0, import_react25.useEffect)(() => {
4889
+ const activeParents = /* @__PURE__ */ new Set();
4890
+ navigationItems.forEach((item) => {
4891
+ if (item.subitems && item.subitems.some((sub) => sub.isActive)) {
4892
+ activeParents.add(item.id);
4893
+ }
4894
+ });
4895
+ if (activeParents.size > 0) {
4896
+ setExpandedItems((prev) => {
4897
+ const next = new Set(prev);
4898
+ let changed = false;
4899
+ activeParents.forEach((id) => {
4900
+ if (!next.has(id)) {
4901
+ next.add(id);
4902
+ changed = true;
4903
+ }
4904
+ });
4905
+ return changed ? next : prev;
4906
+ });
4907
+ }
4908
+ }, [navigationItems]);
4627
4909
  const toggleExpanded = (itemId) => {
4628
4910
  const newExpanded = new Set(expandedItems);
4629
4911
  if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -4633,13 +4915,14 @@ function ITSidebar({
4633
4915
  const handleItemClick = (item) => {
4634
4916
  if (item.subitems && item.subitems.length > 0) {
4635
4917
  toggleExpanded(item.id);
4636
- } else if (item.action) {
4637
- item.action();
4918
+ } else {
4919
+ if (item.action) item.action();
4920
+ if (onItemClick) onItemClick(item);
4638
4921
  }
4639
4922
  };
4640
4923
  const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
4641
4924
  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
4642
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4925
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4643
4926
  "aside",
4644
4927
  {
4645
4928
  ref: sidebarRef,
@@ -4658,8 +4941,8 @@ function ITSidebar({
4658
4941
  WebkitBackdropFilter: "blur(12px)",
4659
4942
  backdropFilter: "blur(12px)"
4660
4943
  },
4661
- children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { className: "flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-2", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: "relative group/navitem", children: [
4662
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
4944
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("nav", { className: "flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "space-y-2", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "relative group/navitem", children: [
4945
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
4663
4946
  "div",
4664
4947
  {
4665
4948
  className: `flex items-center cursor-pointer
@@ -4680,15 +4963,15 @@ function ITSidebar({
4680
4963
  },
4681
4964
  onClick: () => handleItemClick(item),
4682
4965
  children: [
4683
- item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4966
+ item.isActive && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4684
4967
  "div",
4685
4968
  {
4686
4969
  className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
4687
4970
  style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981", boxShadow: `0 0 10px ${theme.sidebar?.active?.iconColor || "#10b981"}` }
4688
4971
  }
4689
4972
  ),
4690
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
4691
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4973
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`, children: [
4974
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4692
4975
  "div",
4693
4976
  {
4694
4977
  className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
@@ -4701,7 +4984,7 @@ function ITSidebar({
4701
4984
  children: item.icon
4702
4985
  }
4703
4986
  ),
4704
- !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4987
+ !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4705
4988
  "span",
4706
4989
  {
4707
4990
  className: `transition-all duration-300 truncate tracking-wide`,
@@ -4714,15 +4997,15 @@ function ITSidebar({
4714
4997
  }
4715
4998
  )
4716
4999
  ] }),
4717
- !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
5000
+ !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4718
5001
  "div",
4719
5002
  {
4720
5003
  className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
4721
5004
  style: { color: item.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.icon?.color || "#64748b", opacity: 0.7 },
4722
- children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fa14.FaChevronDown, { className: "w-3 h-3" })
5005
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fa14.FaChevronDown, { className: "w-3 h-3" })
4723
5006
  }
4724
5007
  ),
4725
- item.badge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
5008
+ item.badge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4726
5009
  "span",
4727
5010
  {
4728
5011
  className: `
@@ -4740,7 +5023,7 @@ function ITSidebar({
4740
5023
  ]
4741
5024
  }
4742
5025
  ),
4743
- isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
5026
+ isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
4744
5027
  "div",
4745
5028
  {
4746
5029
  className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-50 min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
@@ -4751,61 +5034,73 @@ function ITSidebar({
4751
5034
  backdropFilter: "blur(16px)"
4752
5035
  },
4753
5036
  children: [
4754
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: theme.sidebar?.borderColor || "#e2e8f0", color: theme.sidebar?.active?.color || "#0f172a" }, children: [
4755
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { color: theme.sidebar?.active?.iconColor || "#10b981" }, className: "text-xl drop-shadow-sm", children: item.icon }),
4756
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "tracking-wide text-[15px]", children: item.label })
5037
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "px-5 py-4 flex items-center gap-3 font-semibold border-b", style: { borderColor: theme.sidebar?.borderColor || "#e2e8f0", color: theme.sidebar?.active?.color || "#0f172a" }, children: [
5038
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: theme.sidebar?.active?.iconColor || "#10b981" }, className: "text-xl drop-shadow-sm", children: item.icon }),
5039
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tracking-wide text-[15px]", children: item.label })
4757
5040
  ] }),
4758
- item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
5041
+ item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
4759
5042
  "div",
4760
5043
  {
4761
5044
  className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors`,
4762
5045
  children: [
4763
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? theme.sidebar?.active?.iconColor || "#10b981" : theme.sidebar?.icon?.color || "#94a3b8" } }),
4764
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
5046
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: `w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`, style: { backgroundColor: subitem.isActive ? theme.sidebar?.active?.iconColor || "#10b981" : theme.sidebar?.icon?.color || "#94a3b8" } }),
5047
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569", fontWeight: subitem.isActive ? 600 : 500 }, children: subitem.label })
4765
5048
  ]
4766
5049
  },
4767
5050
  subitem.id
4768
- )) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-5 py-3 text-sm text-zinc-500 italic", children: "No hay submen\xFA" })
5051
+ )) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-5 py-3 text-sm text-zinc-500 italic", children: "No hay submen\xFA" })
4769
5052
  ]
4770
5053
  }
4771
5054
  ),
4772
- !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "ml-5 pl-4 space-y-1 py-1", style: { borderLeft: `2px solid ${theme.sidebar?.borderColor || "#e2e8f0"}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: "relative", children: [
4773
- subitem.isActive && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
4774
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4775
- "button",
4776
- {
4777
- onClick: subitem.action,
4778
- className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
4779
- style: {
4780
- color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
4781
- backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
4782
- fontSize: "0.85rem",
4783
- fontWeight: subitem.isActive ? 600 : 500,
4784
- letterSpacing: "0.01em"
4785
- },
4786
- onMouseEnter: (e) => {
4787
- if (!subitem.isActive) {
4788
- e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
4789
- e.currentTarget.style.transform = "translateX(4px)";
4790
- }
4791
- },
4792
- onMouseLeave: (e) => {
4793
- if (!subitem.isActive) {
4794
- e.currentTarget.style.backgroundColor = "transparent";
4795
- e.currentTarget.style.transform = "translateX(0)";
5055
+ !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5056
+ "ul",
5057
+ {
5058
+ className: "ml-5 pl-4 space-y-1 py-1",
5059
+ style: {
5060
+ borderLeft: subitemConnector === "none" ? "none" : `2px ${subitemConnector === "dots" ? "dotted" : "solid"} ${theme.sidebar?.borderColor || "#e2e8f0"}`
5061
+ },
5062
+ children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "relative", children: [
5063
+ subitem.isActive && (subitemConnector === "lines" || subitemConnector === "dots") && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute -left-[18px] top-1/2 -translate-y-1/2 w-4 h-[2px] rounded-r-full", style: { backgroundColor: theme.sidebar?.active?.iconColor || "#10b981" } }),
5064
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5065
+ "button",
5066
+ {
5067
+ onClick: () => {
5068
+ if (subitem.action) subitem.action();
5069
+ if (onSubItemClick) onSubItemClick(subitem);
5070
+ },
5071
+ className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
5072
+ style: {
5073
+ color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
5074
+ backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
5075
+ fontSize: "0.85rem",
5076
+ fontWeight: subitem.isActive ? 600 : 500,
5077
+ letterSpacing: "0.01em"
5078
+ },
5079
+ onMouseEnter: (e) => {
5080
+ if (!subitem.isActive) {
5081
+ e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
5082
+ e.currentTarget.style.transform = "translateX(4px)";
5083
+ }
5084
+ },
5085
+ onMouseLeave: (e) => {
5086
+ if (!subitem.isActive) {
5087
+ e.currentTarget.style.backgroundColor = "transparent";
5088
+ e.currentTarget.style.transform = "translateX(0)";
5089
+ }
5090
+ },
5091
+ children: subitem.label
4796
5092
  }
4797
- },
4798
- children: subitem.label
4799
- }
4800
- )
4801
- ] }, subitem.id)) }) })
5093
+ )
5094
+ ] }, subitem.id))
5095
+ }
5096
+ ) })
4802
5097
  ] }, item.id)) }) })
4803
5098
  }
4804
5099
  );
4805
5100
  }
4806
5101
 
4807
5102
  // src/components/layout/layout.tsx
4808
- var import_jsx_runtime26 = require("react/jsx-runtime");
5103
+ var import_jsx_runtime28 = require("react/jsx-runtime");
4809
5104
  function ITLayout({
4810
5105
  topBar,
4811
5106
  sidebar,
@@ -4813,10 +5108,10 @@ function ITLayout({
4813
5108
  className = "",
4814
5109
  contentClassName = ""
4815
5110
  }) {
4816
- const [desktopCollapsed, setDesktopCollapsed] = (0, import_react25.useState)(true);
4817
- const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react25.useState)(false);
4818
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
4819
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5111
+ const [desktopCollapsed, setDesktopCollapsed] = (0, import_react26.useState)(true);
5112
+ const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react26.useState)(false);
5113
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
5114
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4820
5115
  ITTopBar,
4821
5116
  {
4822
5117
  ...topBar,
@@ -4824,10 +5119,10 @@ function ITLayout({
4824
5119
  onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
4825
5120
  }
4826
5121
  ),
4827
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: theme.layout?.backgroundColor || "#f8fafc" }, children: [
4828
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
4829
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
4830
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5122
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: theme.layout?.backgroundColor || "#f8fafc" }, children: [
5123
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
5124
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
5125
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4831
5126
  ITSidebar,
4832
5127
  {
4833
5128
  ...sidebar,
@@ -4838,31 +5133,33 @@ function ITLayout({
4838
5133
  }
4839
5134
  ) })
4840
5135
  ] }),
4841
- mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5136
+ mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4842
5137
  "div",
4843
5138
  {
4844
5139
  className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
4845
5140
  onClick: () => setMobileSidebarOpen(false),
4846
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5141
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4847
5142
  "div",
4848
5143
  {
4849
- className: "h-full w-auto transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
5144
+ className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
4850
5145
  onClick: (e) => e.stopPropagation(),
4851
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5146
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4852
5147
  ITSidebar,
4853
5148
  {
4854
5149
  ...sidebar,
4855
5150
  isCollapsed: false,
4856
5151
  visibleOnMobile: true,
4857
- className: "h-full shadow-2xl",
4858
- onToggleCollapse: () => setMobileSidebarOpen(false)
5152
+ className: "h-full shadow-2xl relative z-[60]",
5153
+ onToggleCollapse: () => setMobileSidebarOpen(false),
5154
+ onItemClick: () => setMobileSidebarOpen(false),
5155
+ onSubItemClick: () => setMobileSidebarOpen(false)
4859
5156
  }
4860
5157
  )
4861
5158
  }
4862
5159
  )
4863
5160
  }
4864
5161
  ),
4865
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5162
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4866
5163
  "div",
4867
5164
  {
4868
5165
  className: `mx-auto w-full h-full ${contentClassName}`,
@@ -4883,7 +5180,7 @@ var sizeClasses = {
4883
5180
  };
4884
5181
 
4885
5182
  // src/components/loader/loader.tsx
4886
- var import_jsx_runtime27 = require("react/jsx-runtime");
5183
+ var import_jsx_runtime29 = require("react/jsx-runtime");
4887
5184
  function ITLoader({
4888
5185
  size = "md",
4889
5186
  variant = "spinner",
@@ -4898,22 +5195,22 @@ function ITLoader({
4898
5195
  const bgStyle = isCssValue ? { backgroundColor: resolvedColor } : {};
4899
5196
  const colorClass = !isCssValue ? color : "";
4900
5197
  if (variant === "spinner") {
4901
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5198
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4902
5199
  "div",
4903
5200
  {
4904
5201
  className: `inline-block ${sizeClasses[size]} animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${colorClass} ${className}`,
4905
5202
  role: "status",
4906
5203
  style,
4907
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
5204
+ children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
4908
5205
  }
4909
5206
  );
4910
5207
  }
4911
5208
  if (variant === "dots") {
4912
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5209
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4913
5210
  "div",
4914
5211
  {
4915
5212
  className: `flex items-center justify-center space-x-2 ${className}`,
4916
- children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5213
+ children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4917
5214
  "div",
4918
5215
  {
4919
5216
  className: `${sizeClasses[size.replace(/l|g/, "")]} animate-bounce rounded-full ${colorClass}`,
@@ -4928,11 +5225,11 @@ function ITLoader({
4928
5225
  );
4929
5226
  }
4930
5227
  if (variant === "bar") {
4931
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5228
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4932
5229
  "div",
4933
5230
  {
4934
5231
  className: `w-full ${size === "sm" ? "h-1" : size === "md" ? "h-1.5" : size === "lg" ? "h-2" : "h-2.5"} bg-gray-200 rounded-full overflow-hidden ${className}`,
4935
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5232
+ children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4936
5233
  "div",
4937
5234
  {
4938
5235
  className: `h-full animate-progress ${colorClass}`,
@@ -4948,7 +5245,7 @@ function ITLoader({
4948
5245
  );
4949
5246
  }
4950
5247
  if (variant === "pulse") {
4951
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5248
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
4952
5249
  "div",
4953
5250
  {
4954
5251
  className: `rounded-full ${sizeClasses[size]} animate-pulse ${colorClass} ${className}`,
@@ -4960,10 +5257,10 @@ function ITLoader({
4960
5257
  }
4961
5258
 
4962
5259
  // src/components/stepper/stepper.tsx
4963
- var import_clsx18 = __toESM(require("clsx"), 1);
4964
- var import_react26 = require("react");
5260
+ var import_clsx19 = __toESM(require("clsx"), 1);
5261
+ var import_react27 = require("react");
4965
5262
  var import_fa15 = require("react-icons/fa");
4966
- var import_jsx_runtime28 = require("react/jsx-runtime");
5263
+ var import_jsx_runtime30 = require("react/jsx-runtime");
4967
5264
  function ITStepper({
4968
5265
  steps,
4969
5266
  currentStep,
@@ -4978,15 +5275,15 @@ function ITStepper({
4978
5275
  maxContentHeight = "400px",
4979
5276
  color = "primary"
4980
5277
  }) {
4981
- const [direction, setDirection] = (0, import_react26.useState)("next");
4982
- const contentRef = (0, import_react26.useRef)(null);
4983
- const progressRef = (0, import_react26.useRef)(null);
5278
+ const [direction, setDirection] = (0, import_react27.useState)("next");
5279
+ const contentRef = (0, import_react27.useRef)(null);
5280
+ const progressRef = (0, import_react27.useRef)(null);
4984
5281
  const isThemeColor = color in theme.colors;
4985
5282
  const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
4986
- (0, import_react26.useEffect)(() => {
5283
+ (0, import_react27.useEffect)(() => {
4987
5284
  onStepChange?.(currentStep);
4988
5285
  }, [currentStep, onStepChange]);
4989
- (0, import_react26.useEffect)(() => {
5286
+ (0, import_react27.useEffect)(() => {
4990
5287
  const pct = currentStep / Math.max(1, steps.length - 1) * 100;
4991
5288
  if (progressRef.current) {
4992
5289
  progressRef.current.style.width = `${pct}%`;
@@ -5030,23 +5327,23 @@ function ITStepper({
5030
5327
  const renderStepContent = (index, isCompleted, isActive) => {
5031
5328
  const step = steps[index];
5032
5329
  if (isCompleted) {
5033
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaCheck, { className: "w-4 h-4" });
5330
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fa15.FaCheck, { className: "w-4 h-4" });
5034
5331
  }
5035
5332
  if (step.icon && useIcons) {
5036
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
5333
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
5037
5334
  }
5038
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold", children: index + 1 });
5335
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm font-semibold", children: index + 1 });
5039
5336
  };
5040
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx18.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
5041
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative mb-8", children: [
5042
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5337
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_clsx19.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
5338
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative mb-8", children: [
5339
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5043
5340
  "div",
5044
5341
  {
5045
5342
  className: "absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0",
5046
5343
  "aria-hidden": true
5047
5344
  }
5048
5345
  ),
5049
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5346
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5050
5347
  "div",
5051
5348
  {
5052
5349
  ref: progressRef,
@@ -5054,11 +5351,11 @@ function ITStepper({
5054
5351
  "aria-hidden": true
5055
5352
  }
5056
5353
  ),
5057
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
5354
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
5058
5355
  const isActive = idx === currentStep;
5059
5356
  const isCompleted = idx < currentStep;
5060
5357
  const hasIcon = step.icon && useIcons;
5061
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5358
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5062
5359
  "button",
5063
5360
  {
5064
5361
  type: "button",
@@ -5068,11 +5365,11 @@ function ITStepper({
5068
5365
  "aria-label": `Paso ${idx + 1} ${step.label}`,
5069
5366
  className: "flex-1 group",
5070
5367
  title: step.label,
5071
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center", children: [
5072
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5368
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center", children: [
5369
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5073
5370
  "div",
5074
5371
  {
5075
- className: (0, import_clsx18.default)(
5372
+ className: (0, import_clsx19.default)(
5076
5373
  "flex items-center justify-center w-11 h-11 rounded-full border-2 transition-all duration-300 transform",
5077
5374
  hasIcon && "p-2",
5078
5375
  isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
@@ -5083,10 +5380,10 @@ function ITStepper({
5083
5380
  children: renderStepContent(idx, isCompleted, isActive)
5084
5381
  }
5085
5382
  ),
5086
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5383
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5087
5384
  "span",
5088
5385
  {
5089
- className: (0, import_clsx18.default)(
5386
+ className: (0, import_clsx19.default)(
5090
5387
  "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
5091
5388
  isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
5092
5389
  ),
@@ -5100,14 +5397,14 @@ function ITStepper({
5100
5397
  );
5101
5398
  }) })
5102
5399
  ] }),
5103
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5400
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5104
5401
  "div",
5105
5402
  {
5106
5403
  ref: contentRef,
5107
5404
  tabIndex: -1,
5108
5405
  role: "region",
5109
5406
  "aria-labelledby": `step-${currentStep}`,
5110
- className: (0, import_clsx18.default)(
5407
+ className: (0, import_clsx19.default)(
5111
5408
  stepClassName,
5112
5409
  "bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
5113
5410
  scrollableContent && "overflow-y-auto hide-scrollbar"
@@ -5116,37 +5413,37 @@ function ITStepper({
5116
5413
  children: steps[currentStep].content
5117
5414
  }
5118
5415
  ),
5119
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between items-center mt-6", children: [
5120
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5416
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between items-center mt-6", children: [
5417
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5121
5418
  ITButton,
5122
5419
  {
5123
5420
  variant: "outlined",
5124
5421
  color: "secondary",
5125
5422
  disabled: currentStep === 0,
5126
5423
  onClick: prevStep,
5127
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
5128
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaChevronLeft, {}),
5424
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
5425
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fa15.FaChevronLeft, {}),
5129
5426
  "Atr\xE1s"
5130
5427
  ] })
5131
5428
  }
5132
5429
  ),
5133
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
5134
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
5430
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-3", children: [
5431
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "text-sm text-gray-500 mr-2 hidden sm:block", children: [
5135
5432
  "Paso ",
5136
5433
  currentStep + 1,
5137
5434
  " de ",
5138
5435
  steps.length
5139
5436
  ] }),
5140
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5437
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5141
5438
  ITButton,
5142
5439
  {
5143
5440
  variant: "solid",
5144
5441
  color,
5145
5442
  disabled: disableNext,
5146
5443
  onClick: nextStep,
5147
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
5444
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
5148
5445
  currentStep === steps.length - 1 ? "Finalizar" : "Siguiente",
5149
- currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fa15.FaChevronRight, {})
5446
+ currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fa15.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fa15.FaChevronRight, {})
5150
5447
  ] })
5151
5448
  }
5152
5449
  )
@@ -5156,153 +5453,1756 @@ function ITStepper({
5156
5453
  }
5157
5454
 
5158
5455
  // src/components/theme-provider/themeProvider.tsx
5159
- var import_react27 = require("react");
5160
- var import_jsx_runtime29 = require("react/jsx-runtime");
5161
- function ITThemeProvider({ theme: theme2, children }) {
5162
- const activeThemeContext = (0, import_react27.useMemo)(() => {
5163
- const baseColors = {
5164
- primary: palette.blue,
5165
- secondary: palette.gray,
5166
- success: palette.success,
5167
- danger: palette.danger,
5168
- warning: palette.warning,
5169
- info: palette.cyan,
5170
- purple: palette.purple
5171
- };
5172
- return {
5173
- colors: {
5174
- ...baseColors,
5175
- ...theme2?.colors
5456
+ var import_react28 = require("react");
5457
+ var import_md3 = require("react-icons/md");
5458
+ var import_jsx_runtime31 = require("react/jsx-runtime");
5459
+ var STORAGE_KEY = "it-theme-palette";
5460
+ var DEFAULT_PALETTE = {
5461
+ primary: "#06b6d4",
5462
+ // Cyan
5463
+ secondary: "#6b7280",
5464
+ // Gray
5465
+ ternary: "#8b5cf6",
5466
+ // Purple/Violet
5467
+ danger: "#ef4444",
5468
+ // Red
5469
+ success: "#22c55e",
5470
+ // Green
5471
+ info: "#3b82f6",
5472
+ // Blue
5473
+ alert: "#f97316",
5474
+ // Orange
5475
+ warning: "#eab308",
5476
+ // Yellow
5477
+ layout: {
5478
+ sidebarBg: "#0f172a",
5479
+ // Dark slate-900
5480
+ sidebarText: "#94a3b8",
5481
+ // Slate-400
5482
+ navbarBg: "#ffffff",
5483
+ // White
5484
+ navbarText: "#1e293b"
5485
+ // Slate-800
5486
+ },
5487
+ table: {
5488
+ headerBg: "#f8fafc",
5489
+ // Slate-50
5490
+ headerText: "#334155",
5491
+ // Slate-700
5492
+ rowBg: "#ffffff",
5493
+ // White
5494
+ rowText: "#1e293b"
5495
+ // Slate-800
5496
+ }
5497
+ };
5498
+ var PRESETS = [
5499
+ {
5500
+ name: "Midnight Nova \u{1F30C}",
5501
+ colors: {
5502
+ primary: "#6366f1",
5503
+ // Indigo
5504
+ secondary: "#475569",
5505
+ // Slate
5506
+ ternary: "#a855f7",
5507
+ // Purple
5508
+ danger: "#ef4444",
5509
+ success: "#22c55e",
5510
+ info: "#38bdf8",
5511
+ alert: "#f97316",
5512
+ warning: "#eab308",
5513
+ layout: {
5514
+ sidebarBg: "#020617",
5515
+ // Slate-950
5516
+ sidebarText: "#cbd5e1",
5517
+ navbarBg: "#0f172a",
5518
+ navbarText: "#f8fafc"
5176
5519
  },
5520
+ table: {
5521
+ headerBg: "#1e293b",
5522
+ headerText: "#e2e8f0",
5523
+ rowBg: "#0f172a",
5524
+ rowText: "#cbd5e1"
5525
+ }
5526
+ }
5527
+ },
5528
+ {
5529
+ name: "Tokyo Drift \u{1F3CE}\uFE0F",
5530
+ colors: {
5531
+ primary: "#f43f5e",
5532
+ // Rose
5533
+ secondary: "#64748b",
5534
+ ternary: "#fb923c",
5535
+ // Orange
5536
+ danger: "#dc2626",
5537
+ success: "#16a34a",
5538
+ info: "#0ea5e9",
5539
+ alert: "#f97316",
5540
+ warning: "#facc15",
5177
5541
  layout: {
5178
- ...theme.layout,
5179
- ...theme2?.layout
5542
+ sidebarBg: "#0f050b",
5543
+ // Deep rose-slate
5544
+ sidebarText: "#fda4af",
5545
+ navbarBg: "#1c0a15",
5546
+ navbarText: "#ffe4e6"
5547
+ },
5548
+ table: {
5549
+ headerBg: "#2e1022",
5550
+ headerText: "#fecdd3",
5551
+ rowBg: "#1c0a15",
5552
+ rowText: "#ffe4e6"
5180
5553
  }
5181
- };
5182
- }, [theme2]);
5183
- const cssVariables = (0, import_react27.useMemo)(() => {
5184
- let variablesString = "";
5185
- Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
5186
- Object.entries(scale).forEach(([shade, hexValue]) => {
5187
- variablesString += `--color-${colorName}-${shade}: ${hexValue};
5188
- `;
5189
- });
5190
- });
5191
- if (theme2?.layout) {
5192
- if (theme2.layout.backgroundColor) variablesString += `--layout-bg: ${theme2.layout.backgroundColor};
5193
- `;
5194
- if (theme2.layout.contentPadding) variablesString += `--layout-padding: ${theme2.layout.contentPadding};
5195
- `;
5196
- }
5197
- if (theme2?.topbar) {
5198
- if (theme2.topbar.backgroundColor) variablesString += `--topbar-bg: ${theme2.topbar.backgroundColor};
5199
- `;
5200
- if (theme2.topbar.borderColor) variablesString += `--topbar-border: ${theme2.topbar.borderColor};
5201
- `;
5202
- if (theme2.topbar.iconColor) variablesString += `--topbar-icon: ${theme2.topbar.iconColor};
5203
- `;
5204
- if (theme2.topbar.iconHoverColor) variablesString += `--topbar-icon-hover: ${theme2.topbar.iconHoverColor};
5205
- `;
5206
- if (theme2.topbar.shadow) variablesString += `--topbar-shadow: ${theme2.topbar.shadow};
5207
- `;
5208
- if (theme2.topbar.textColor) variablesString += `--topbar-text: ${theme2.topbar.textColor};
5209
- `;
5210
- if (theme2.topbar.textHoverColor) variablesString += `--topbar-text-hover: ${theme2.topbar.textHoverColor};
5211
- `;
5212
- if (theme2.topbar.userMenu) {
5213
- if (theme2.topbar.userMenu.backgroundColor) variablesString += `--topbar-user-bg: ${theme2.topbar.userMenu.backgroundColor};
5214
- `;
5215
- if (theme2.topbar.userMenu.hoverBackground) variablesString += `--topbar-user-hover: ${theme2.topbar.userMenu.hoverBackground};
5216
- `;
5217
- if (theme2.topbar.userMenu.textColor) variablesString += `--topbar-user-text: ${theme2.topbar.userMenu.textColor};
5218
- `;
5219
- if (theme2.topbar.userMenu.subtitleColor) variablesString += `--topbar-user-subtitle: ${theme2.topbar.userMenu.subtitleColor};
5220
- `;
5221
- if (theme2.topbar.userMenu.dropdown) {
5222
- if (theme2.topbar.userMenu.dropdown.backgroundColor) variablesString += `--topbar-user-dropdown-bg: ${theme2.topbar.userMenu.dropdown.backgroundColor};
5223
- `;
5224
- if (theme2.topbar.userMenu.dropdown.borderColor) variablesString += `--topbar-user-dropdown-border: ${theme2.topbar.userMenu.dropdown.borderColor};
5225
- `;
5226
- if (theme2.topbar.userMenu.dropdown.itemHoverBackground) variablesString += `--topbar-user-item-hover: ${theme2.topbar.userMenu.dropdown.itemHoverBackground};
5227
- `;
5228
- }
5554
+ }
5555
+ },
5556
+ {
5557
+ name: "Ocean Core \u{1F30A}",
5558
+ colors: {
5559
+ primary: "#0ea5e9",
5560
+ // Sky
5561
+ secondary: "#64748b",
5562
+ ternary: "#14b8a6",
5563
+ // Teal
5564
+ danger: "#ef4444",
5565
+ success: "#10b981",
5566
+ info: "#3b82f6",
5567
+ alert: "#f97316",
5568
+ warning: "#eab308",
5569
+ layout: {
5570
+ sidebarBg: "#031b2f",
5571
+ // Deep ocean blue
5572
+ sidebarText: "#7dd3fc",
5573
+ navbarBg: "#0b253c",
5574
+ navbarText: "#e0f2fe"
5575
+ },
5576
+ table: {
5577
+ headerBg: "#0c2e4b",
5578
+ headerText: "#bae6fd",
5579
+ rowBg: "#0b253c",
5580
+ rowText: "#e0f2fe"
5229
5581
  }
5230
5582
  }
5231
- if (theme2?.sidebar) {
5232
- if (theme2.sidebar.backgroundColor) variablesString += `--sidebar-bg: ${theme2.sidebar.backgroundColor};
5233
- `;
5234
- if (theme2.sidebar.borderColor) variablesString += `--sidebar-border: ${theme2.sidebar.borderColor};
5235
- `;
5236
- if (theme2.sidebar.label) {
5237
- if (theme2.sidebar.label.color) variablesString += `--sidebar-label-color: ${theme2.sidebar.label.color};
5238
- `;
5239
- if (theme2.sidebar.label.size) variablesString += `--sidebar-label-size: ${theme2.sidebar.label.size};
5240
- `;
5241
- if (theme2.sidebar.label.weight) variablesString += `--sidebar-label-weight: ${theme2.sidebar.label.weight};
5242
- `;
5243
- }
5244
- if (theme2.sidebar.icon) {
5245
- if (theme2.sidebar.icon.color) variablesString += `--sidebar-icon-color: ${theme2.sidebar.icon.color};
5246
- `;
5247
- if (theme2.sidebar.icon.size) variablesString += `--sidebar-icon-size: ${theme2.sidebar.icon.size};
5248
- `;
5249
- }
5250
- if (theme2.sidebar.hover?.backgroundColor) variablesString += `--sidebar-hover-bg: ${theme2.sidebar.hover.backgroundColor};
5251
- `;
5252
- if (theme2.sidebar.active) {
5253
- if (theme2.sidebar.active.backgroundColor) variablesString += `--sidebar-active-bg: ${theme2.sidebar.active.backgroundColor};
5254
- `;
5255
- if (theme2.sidebar.active.color) variablesString += `--sidebar-active-color: ${theme2.sidebar.active.color};
5256
- `;
5257
- if (theme2.sidebar.active.iconColor) variablesString += `--sidebar-active-icon: ${theme2.sidebar.active.iconColor};
5258
- `;
5259
- }
5260
- if (theme2.sidebar.badge) {
5261
- if (theme2.sidebar.badge.backgroundColor) variablesString += `--sidebar-badge-bg: ${theme2.sidebar.badge.backgroundColor};
5262
- `;
5263
- if (theme2.sidebar.badge.color) variablesString += `--sidebar-badge-color: ${theme2.sidebar.badge.color};
5264
- `;
5265
- }
5266
- }
5267
- if (theme2?.calendar) {
5268
- if (theme2.calendar.backgroundColor) variablesString += `--calendar-bg: ${theme2.calendar.backgroundColor};
5269
- `;
5270
- if (theme2.calendar.borderColor) variablesString += `--calendar-border: ${theme2.calendar.borderColor};
5271
- `;
5272
- if (theme2.calendar.header) {
5273
- if (theme2.calendar.header.textColor) variablesString += `--calendar-header-text: ${theme2.calendar.header.textColor};
5274
- `;
5275
- if (theme2.calendar.header.hoverBackground) variablesString += `--calendar-header-hover: ${theme2.calendar.header.hoverBackground};
5276
- `;
5277
- }
5278
- if (theme2.calendar.days) {
5279
- if (theme2.calendar.days.textColor) variablesString += `--calendar-days-text: ${theme2.calendar.days.textColor};
5280
- `;
5281
- if (theme2.calendar.days.weekendColor) variablesString += `--calendar-days-weekend: ${theme2.calendar.days.weekendColor};
5282
- `;
5283
- if (theme2.calendar.days.outsideMonthColor) variablesString += `--calendar-days-outside: ${theme2.calendar.days.outsideMonthColor};
5284
- `;
5285
- }
5286
- if (theme2.calendar.selection) {
5287
- if (theme2.calendar.selection.selectedColor) variablesString += `--calendar-selected-text: ${theme2.calendar.selection.selectedColor};
5288
- `;
5289
- if (theme2.calendar.selection.selectedBackground) variablesString += `--calendar-selected-bg: ${theme2.calendar.selection.selectedBackground};
5290
- `;
5291
- if (theme2.calendar.selection.rangeBackground) variablesString += `--calendar-range-bg: ${theme2.calendar.selection.rangeBackground};
5292
- `;
5293
- if (theme2.calendar.selection.todayBackground) variablesString += `--calendar-today-bg: ${theme2.calendar.selection.todayBackground};
5294
- `;
5295
- if (theme2.calendar.selection.todayColor) variablesString += `--calendar-today-text: ${theme2.calendar.selection.todayColor};
5296
- `;
5297
- }
5298
- }
5299
- return `:root {
5300
- ${variablesString}}`;
5301
- }, [activeThemeContext]);
5302
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
5303
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { suppressHydrationWarning: true, children: cssVariables }),
5304
- children
5305
- ] });
5583
+ },
5584
+ {
5585
+ name: "Matrix Pulse \u{1F49A}",
5586
+ colors: {
5587
+ primary: "#10b981",
5588
+ // Emerald
5589
+ secondary: "#64748b",
5590
+ ternary: "#84cc16",
5591
+ // Lime
5592
+ danger: "#ef4444",
5593
+ success: "#16a34a",
5594
+ info: "#06b6d4",
5595
+ alert: "#f59e0b",
5596
+ warning: "#eab308",
5597
+ layout: {
5598
+ sidebarBg: "#022c1b",
5599
+ // Deep forest green
5600
+ sidebarText: "#6ee7b7",
5601
+ navbarBg: "#043e26",
5602
+ navbarText: "#d1fae5"
5603
+ },
5604
+ table: {
5605
+ headerBg: "#064e3b",
5606
+ headerText: "#a7f3d0",
5607
+ rowBg: "#043e26",
5608
+ rowText: "#d1fae5"
5609
+ }
5610
+ }
5611
+ },
5612
+ {
5613
+ name: "Royal Velvet \u{1F451}",
5614
+ colors: {
5615
+ primary: "#8b5cf6",
5616
+ // Violet
5617
+ secondary: "#64748b",
5618
+ ternary: "#ec4899",
5619
+ // Pink
5620
+ danger: "#e11d48",
5621
+ success: "#22c55e",
5622
+ info: "#3b82f6",
5623
+ alert: "#f97316",
5624
+ warning: "#facc15",
5625
+ layout: {
5626
+ sidebarBg: "#1e0b36",
5627
+ // Deep royal purple
5628
+ sidebarText: "#c084fc",
5629
+ navbarBg: "#291048",
5630
+ navbarText: "#f3e8ff"
5631
+ },
5632
+ table: {
5633
+ headerBg: "#3b1764",
5634
+ headerText: "#e9d5ff",
5635
+ rowBg: "#291048",
5636
+ rowText: "#f3e8ff"
5637
+ }
5638
+ }
5639
+ }
5640
+ ];
5641
+ var ITThemeContext = (0, import_react28.createContext)(void 0);
5642
+ var useITTheme = () => {
5643
+ const context = (0, import_react28.useContext)(ITThemeContext);
5644
+ if (!context) {
5645
+ throw new Error("useITTheme must be used within an ITThemeProvider");
5646
+ }
5647
+ return context;
5648
+ };
5649
+ var getNestedValue3 = (obj, path) => {
5650
+ return path.split(".").reduce((acc, part) => acc && acc[part], obj);
5651
+ };
5652
+ var isLightColor = (hex) => {
5653
+ if (!hex || typeof hex !== "string") return false;
5654
+ const color = hex.replace("#", "");
5655
+ let r = 0, g = 0, b = 0;
5656
+ if (color.length === 3) {
5657
+ r = parseInt(color[0] + color[0], 16);
5658
+ g = parseInt(color[1] + color[1], 16);
5659
+ b = parseInt(color[2] + color[2], 16);
5660
+ } else if (color.length === 6) {
5661
+ r = parseInt(color.substring(0, 2), 16);
5662
+ g = parseInt(color.substring(2, 4), 16);
5663
+ b = parseInt(color.substring(4, 6), 16);
5664
+ } else {
5665
+ return false;
5666
+ }
5667
+ const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
5668
+ return brightness > 140;
5669
+ };
5670
+ function ITThemeProvider({ children, theme: theme2 }) {
5671
+ const [palette2, setPaletteState] = (0, import_react28.useState)(() => {
5672
+ const basePalette = {
5673
+ ...DEFAULT_PALETTE,
5674
+ ...theme2,
5675
+ layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
5676
+ table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
5677
+ };
5678
+ try {
5679
+ const saved = localStorage.getItem(STORAGE_KEY);
5680
+ if (saved) {
5681
+ const parsed = JSON.parse(saved);
5682
+ return {
5683
+ ...basePalette,
5684
+ ...parsed,
5685
+ layout: { ...basePalette.layout, ...parsed.layout },
5686
+ table: { ...basePalette.table, ...parsed.table }
5687
+ };
5688
+ }
5689
+ } catch (e) {
5690
+ console.error("Failed to load theme from localStorage", e);
5691
+ }
5692
+ return basePalette;
5693
+ });
5694
+ const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
5695
+ const [showSavedToast, setShowSavedToast] = (0, import_react28.useState)(false);
5696
+ const [resolvedTheme, setResolvedTheme] = (0, import_react28.useState)("light");
5697
+ const [darkModeMode, setDarkModeMode] = (0, import_react28.useState)(() => {
5698
+ const saved = localStorage.getItem("it-theme-dark-mode");
5699
+ if (saved === "light" || saved === "dark" || saved === "system") {
5700
+ return saved;
5701
+ }
5702
+ return "system";
5703
+ });
5704
+ (0, import_react28.useEffect)(() => {
5705
+ localStorage.setItem("it-theme-dark-mode", darkModeMode);
5706
+ const applyDarkMode = (isDark) => {
5707
+ if (isDark) {
5708
+ document.documentElement.classList.add("dark");
5709
+ document.documentElement.setAttribute("data-theme", "dark");
5710
+ setResolvedTheme("dark");
5711
+ } else {
5712
+ document.documentElement.classList.remove("dark");
5713
+ document.documentElement.setAttribute("data-theme", "light");
5714
+ setResolvedTheme("light");
5715
+ }
5716
+ };
5717
+ if (darkModeMode === "system") {
5718
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
5719
+ applyDarkMode(mediaQuery.matches);
5720
+ const listener = (e) => {
5721
+ applyDarkMode(e.matches);
5722
+ };
5723
+ mediaQuery.addEventListener("change", listener);
5724
+ return () => mediaQuery.removeEventListener("change", listener);
5725
+ } else {
5726
+ applyDarkMode(darkModeMode === "dark");
5727
+ }
5728
+ }, [darkModeMode]);
5729
+ (0, import_react28.useEffect)(() => {
5730
+ const injectStyles = (obj, prefix = "") => {
5731
+ Object.entries(obj).forEach(([key, val]) => {
5732
+ if (typeof val === "object" && val !== null) {
5733
+ injectStyles(val, prefix + key + "-");
5734
+ } else {
5735
+ document.documentElement.style.setProperty(`--color-${prefix}${key}`, val);
5736
+ if (prefix === "layout-") {
5737
+ document.documentElement.style.setProperty(`--color-${key}`, val);
5738
+ }
5739
+ }
5740
+ });
5741
+ };
5742
+ injectStyles(palette2);
5743
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(palette2));
5744
+ let styleTag = document.getElementById("it-theme-dynamic-overrides");
5745
+ if (!styleTag) {
5746
+ styleTag = document.createElement("style");
5747
+ styleTag.id = "it-theme-dynamic-overrides";
5748
+ document.head.appendChild(styleTag);
5749
+ }
5750
+ const isDark = resolvedTheme === "dark";
5751
+ let tableRowBg = palette2.table.rowBg;
5752
+ let tableRowText = palette2.table.rowText;
5753
+ let tableHeaderBg = palette2.table.headerBg;
5754
+ let tableHeaderText = palette2.table.headerText;
5755
+ let navbarBg = palette2.layout.navbarBg;
5756
+ let navbarText = palette2.layout.navbarText;
5757
+ let sidebarBg = palette2.layout.sidebarBg;
5758
+ let sidebarText = palette2.layout.sidebarText;
5759
+ if (isDark) {
5760
+ if (isLightColor(tableRowBg)) {
5761
+ tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #111827)`;
5762
+ }
5763
+ if (!isLightColor(tableRowText)) {
5764
+ tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 20%, #f3f4f6)`;
5765
+ }
5766
+ if (isLightColor(tableHeaderBg)) {
5767
+ tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #1f2937)`;
5768
+ }
5769
+ if (!isLightColor(tableHeaderText)) {
5770
+ tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 20%, #f9fafb)`;
5771
+ }
5772
+ if (isLightColor(navbarBg)) {
5773
+ navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #111827)`;
5774
+ }
5775
+ if (!isLightColor(navbarText)) {
5776
+ navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 20%, #f3f4f6)`;
5777
+ }
5778
+ if (isLightColor(sidebarBg)) {
5779
+ sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #0f172a)`;
5780
+ }
5781
+ if (!isLightColor(sidebarText)) {
5782
+ sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 20%, #cbd5e1)`;
5783
+ }
5784
+ } else {
5785
+ if (!isLightColor(tableRowBg)) {
5786
+ tableRowBg = `color-mix(in srgb, ${palette2.table.rowBg} 8%, #ffffff)`;
5787
+ }
5788
+ if (isLightColor(tableRowText)) {
5789
+ tableRowText = `color-mix(in srgb, ${palette2.table.rowText} 30%, #1e293b)`;
5790
+ }
5791
+ if (!isLightColor(tableHeaderBg)) {
5792
+ tableHeaderBg = `color-mix(in srgb, ${palette2.table.headerBg} 12%, #f8fafc)`;
5793
+ }
5794
+ if (isLightColor(tableHeaderText)) {
5795
+ tableHeaderText = `color-mix(in srgb, ${palette2.table.headerText} 30%, #334155)`;
5796
+ }
5797
+ if (!isLightColor(navbarBg)) {
5798
+ navbarBg = `color-mix(in srgb, ${palette2.layout.navbarBg} 8%, #ffffff)`;
5799
+ }
5800
+ if (isLightColor(navbarText)) {
5801
+ navbarText = `color-mix(in srgb, ${palette2.layout.navbarText} 30%, #1e293b)`;
5802
+ }
5803
+ if (!isLightColor(sidebarBg)) {
5804
+ sidebarBg = `color-mix(in srgb, ${palette2.layout.sidebarBg} 8%, #ffffff)`;
5805
+ }
5806
+ if (isLightColor(sidebarText)) {
5807
+ sidebarText = `color-mix(in srgb, ${palette2.layout.sidebarText} 30%, #1e293b)`;
5808
+ }
5809
+ }
5810
+ styleTag.innerHTML = `
5811
+ :root {
5812
+ --color-primary: ${palette2.primary};
5813
+ --color-secondary: ${palette2.secondary};
5814
+ --color-ternary: ${palette2.ternary};
5815
+ --color-danger: ${palette2.danger};
5816
+ --color-success: ${palette2.success};
5817
+ --color-info: ${palette2.info};
5818
+ --color-alert: ${palette2.alert};
5819
+ --color-warning: ${palette2.warning};
5820
+
5821
+ /* Generated scales for primary */
5822
+ --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
5823
+ --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
5824
+ --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
5825
+ --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
5826
+ --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
5827
+ --color-primary-500: var(--color-primary);
5828
+ --color-primary-600: color-mix(in srgb, var(--color-primary) 85%, #000000);
5829
+ --color-primary-700: color-mix(in srgb, var(--color-primary) 70%, #000000);
5830
+ --color-primary-800: color-mix(in srgb, var(--color-primary) 55%, #000000);
5831
+ --color-primary-900: color-mix(in srgb, var(--color-primary) 40%, #000000);
5832
+ --color-primary-950: color-mix(in srgb, var(--color-primary) 25%, #000000);
5833
+
5834
+ /* Generated scales for secondary */
5835
+ --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
5836
+ --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
5837
+ --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
5838
+ --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
5839
+ --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
5840
+ --color-secondary-500: var(--color-secondary);
5841
+ --color-secondary-600: color-mix(in srgb, var(--color-secondary) 85%, #000000);
5842
+ --color-secondary-700: color-mix(in srgb, var(--color-secondary) 70%, #000000);
5843
+ --color-secondary-800: color-mix(in srgb, var(--color-secondary) 55%, #000000);
5844
+ --color-secondary-900: color-mix(in srgb, var(--color-secondary) 40%, #000000);
5845
+ --color-secondary-950: color-mix(in srgb, var(--color-secondary) 25%, #000000);
5846
+
5847
+ /* Generated scales for ternary */
5848
+ --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
5849
+ --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
5850
+ --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
5851
+ --color-ternary-300: color-mix(in srgb, var(--color-ternary) 50%, #ffffff);
5852
+ --color-ternary-400: color-mix(in srgb, var(--color-ternary) 70%, #ffffff);
5853
+ --color-ternary-500: var(--color-ternary);
5854
+ --color-ternary-600: color-mix(in srgb, var(--color-ternary) 85%, #000000);
5855
+ --color-ternary-700: color-mix(in srgb, var(--color-ternary) 70%, #000000);
5856
+ --color-ternary-800: color-mix(in srgb, var(--color-ternary) 55%, #000000);
5857
+ --color-ternary-900: color-mix(in srgb, var(--color-ternary) 40%, #000000);
5858
+ --color-ternary-950: color-mix(in srgb, var(--color-ternary) 25%, #000000);
5859
+
5860
+ /* Purple scales mapped as aliases to ternary */
5861
+ --color-purple-50: var(--color-ternary-50);
5862
+ --color-purple-100: var(--color-ternary-100);
5863
+ --color-purple-200: var(--color-ternary-200);
5864
+ --color-purple-300: var(--color-ternary-300);
5865
+ --color-purple-400: var(--color-ternary-400);
5866
+ --color-purple-500: var(--color-ternary-500);
5867
+ --color-purple-600: var(--color-ternary-600);
5868
+ --color-purple-700: var(--color-ternary-700);
5869
+ --color-purple-800: var(--color-ternary-800);
5870
+ --color-purple-900: var(--color-ternary-900);
5871
+ --color-purple-950: var(--color-ternary-950);
5872
+
5873
+ /* Generated scales for danger */
5874
+ --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
5875
+ --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
5876
+ --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
5877
+ --color-danger-300: color-mix(in srgb, var(--color-danger) 50%, #ffffff);
5878
+ --color-danger-400: color-mix(in srgb, var(--color-danger) 70%, #ffffff);
5879
+ --color-danger-500: var(--color-danger);
5880
+ --color-danger-600: color-mix(in srgb, var(--color-danger) 85%, #000000);
5881
+ --color-danger-700: color-mix(in srgb, var(--color-danger) 70%, #000000);
5882
+ --color-danger-800: color-mix(in srgb, var(--color-danger) 55%, #000000);
5883
+ --color-danger-900: color-mix(in srgb, var(--color-danger) 40%, #000000);
5884
+ --color-danger-950: color-mix(in srgb, var(--color-danger) 25%, #000000);
5885
+
5886
+ /* Generated scales for success */
5887
+ --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
5888
+ --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
5889
+ --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
5890
+ --color-success-300: color-mix(in srgb, var(--color-success) 50%, #ffffff);
5891
+ --color-success-400: color-mix(in srgb, var(--color-success) 70%, #ffffff);
5892
+ --color-success-500: var(--color-success);
5893
+ --color-success-600: color-mix(in srgb, var(--color-success) 85%, #000000);
5894
+ --color-success-700: color-mix(in srgb, var(--color-success) 70%, #000000);
5895
+ --color-success-800: color-mix(in srgb, var(--color-success) 55%, #000000);
5896
+ --color-success-900: color-mix(in srgb, var(--color-success) 40%, #000000);
5897
+ --color-success-950: color-mix(in srgb, var(--color-success) 25%, #000000);
5898
+
5899
+ /* Generated scales for info */
5900
+ --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
5901
+ --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
5902
+ --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
5903
+ --color-info-300: color-mix(in srgb, var(--color-info) 50%, #ffffff);
5904
+ --color-info-400: color-mix(in srgb, var(--color-info) 70%, #ffffff);
5905
+ --color-info-500: var(--color-info);
5906
+ --color-info-600: color-mix(in srgb, var(--color-info) 85%, #000000);
5907
+ --color-info-700: color-mix(in srgb, var(--color-info) 70%, #000000);
5908
+ --color-info-800: color-mix(in srgb, var(--color-info) 55%, #000000);
5909
+ --color-info-900: color-mix(in srgb, var(--color-info) 40%, #000000);
5910
+ --color-info-950: color-mix(in srgb, var(--color-info) 25%, #000000);
5911
+
5912
+ /* Generated scales for alert */
5913
+ --color-alert-50: color-mix(in srgb, var(--color-alert) 5%, #ffffff);
5914
+ --color-alert-100: color-mix(in srgb, var(--color-alert) 10%, #ffffff);
5915
+ --color-alert-200: color-mix(in srgb, var(--color-alert) 30%, #ffffff);
5916
+ --color-alert-300: color-mix(in srgb, var(--color-alert) 50%, #ffffff);
5917
+ --color-alert-400: color-mix(in srgb, var(--color-alert) 70%, #ffffff);
5918
+ --color-alert-500: var(--color-alert);
5919
+ --color-alert-600: color-mix(in srgb, var(--color-alert) 85%, #000000);
5920
+ --color-alert-700: color-mix(in srgb, var(--color-alert) 70%, #000000);
5921
+ --color-alert-800: color-mix(in srgb, var(--color-alert) 55%, #000000);
5922
+ --color-alert-900: color-mix(in srgb, var(--color-alert) 40%, #000000);
5923
+ --color-alert-950: color-mix(in srgb, var(--color-alert) 25%, #000000);
5924
+
5925
+ /* Generated scales for warning */
5926
+ --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
5927
+ --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
5928
+ --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
5929
+ --color-warning-300: color-mix(in srgb, var(--color-warning) 50%, #ffffff);
5930
+ --color-warning-400: color-mix(in srgb, var(--color-warning) 70%, #ffffff);
5931
+ --color-warning-500: var(--color-warning);
5932
+ --color-warning-600: color-mix(in srgb, var(--color-warning) 85%, #000000);
5933
+ --color-warning-700: color-mix(in srgb, var(--color-warning) 70%, #000000);
5934
+ --color-warning-800: color-mix(in srgb, var(--color-warning) 55%, #000000);
5935
+ --color-warning-900: color-mix(in srgb, var(--color-warning) 40%, #000000);
5936
+ --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, #000000);
5937
+
5938
+ /* Support legacy client app variables */
5939
+ --color-primary-focus: color-mix(in srgb, var(--color-primary) 30%, transparent);
5940
+ --color-primary-light: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
5941
+ --color-secondary-border: color-mix(in srgb, var(--color-secondary) 30%, #000000);
5942
+ --color-ternary-light: color-mix(in srgb, var(--color-ternary) 15%, #ffffff);
5943
+ --color-danger-focus: color-mix(in srgb, var(--color-danger) 30%, transparent);
5944
+ --color-success-focus: color-mix(in srgb, var(--color-success) 30%, transparent);
5945
+ --color-info-focus: color-mix(in srgb, var(--color-info) 30%, transparent);
5946
+ --color-alert-focus: color-mix(in srgb, var(--color-alert) 30%, transparent);
5947
+ --color-warning-focus: color-mix(in srgb, var(--color-warning) 30%, transparent);
5948
+
5949
+ /* Map library properties for complete safety */
5950
+ --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000);
5951
+ --color-primary-ring: color-mix(in srgb, var(--color-primary) 40%, transparent);
5952
+ --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
5953
+ --color-primary-soft-border: color-mix(in srgb, var(--color-primary) 24%, transparent);
5954
+
5955
+ --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, #000000);
5956
+ --color-secondary-ring: color-mix(in srgb, var(--color-secondary) 40%, transparent);
5957
+ --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, transparent);
5958
+ --color-secondary-soft-border: color-mix(in srgb, var(--color-secondary) 24%, transparent);
5959
+
5960
+ --color-ternary-hover: color-mix(in srgb, var(--color-ternary) 85%, #000000);
5961
+ --color-ternary-ring: color-mix(in srgb, var(--color-ternary) 40%, transparent);
5962
+ --color-ternary-soft: color-mix(in srgb, var(--color-ternary) 12%, transparent);
5963
+ --color-ternary-soft-border: color-mix(in srgb, var(--color-ternary) 24%, transparent);
5964
+
5965
+ --color-danger-hover: color-mix(in srgb, var(--color-danger) 85%, #000000);
5966
+ --color-danger-ring: color-mix(in srgb, var(--color-danger) 40%, transparent);
5967
+ --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, transparent);
5968
+ --color-danger-soft-border: color-mix(in srgb, var(--color-danger) 24%, transparent);
5969
+
5970
+ --color-success-hover: color-mix(in srgb, var(--color-success) 85%, #000000);
5971
+ --color-success-ring: color-mix(in srgb, var(--color-success) 40%, transparent);
5972
+ --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
5973
+ --color-success-soft-border: color-mix(in srgb, var(--color-success) 24%, transparent);
5974
+
5975
+ --color-info-hover: color-mix(in srgb, var(--color-info) 85%, #000000);
5976
+ --color-info-ring: color-mix(in srgb, var(--color-info) 40%, transparent);
5977
+ --color-info-soft: color-mix(in srgb, var(--color-info) 12%, transparent);
5978
+ --color-info-soft-border: color-mix(in srgb, var(--color-info) 24%, transparent);
5979
+
5980
+ --color-alert-hover: color-mix(in srgb, var(--color-alert) 85%, #000000);
5981
+ --color-alert-ring: color-mix(in srgb, var(--color-alert) 40%, transparent);
5982
+ --color-alert-soft: color-mix(in srgb, var(--color-alert) 12%, transparent);
5983
+ --color-alert-soft-border: color-mix(in srgb, var(--color-alert) 24%, transparent);
5984
+
5985
+ --color-warning-hover: color-mix(in srgb, var(--color-warning) 85%, #000000);
5986
+ --color-warning-ring: color-mix(in srgb, var(--color-warning) 40%, transparent);
5987
+ --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
5988
+ --color-warning-soft-border: color-mix(in srgb, var(--color-warning) 24%, transparent);
5989
+
5990
+ --color-sidebarBg: ${sidebarBg} !important;
5991
+ --color-sidebarText: ${sidebarText} !important;
5992
+ --color-navbarBg: ${navbarBg} !important;
5993
+ --color-navbarText: ${navbarText} !important;
5994
+
5995
+ --color-table-headerBg: ${tableHeaderBg} !important;
5996
+ --color-table-headerText: ${tableHeaderText} !important;
5997
+ --color-table-rowBg: ${tableRowBg} !important;
5998
+ --color-table-rowText: ${tableRowText} !important;
5999
+
6000
+ /* Native library variables integration */
6001
+ --sidebar-bg: var(--color-sidebarBg);
6002
+ --sidebar-border: color-mix(in srgb, var(--color-sidebarBg) 85%, #000000);
6003
+ --sidebar-label-color: var(--color-sidebarText);
6004
+ --sidebar-icon-color: color-mix(in srgb, var(--color-sidebarText) 80%, transparent);
6005
+ --sidebar-hover-bg: color-mix(in srgb, var(--color-sidebarText) 10%, transparent);
6006
+ --sidebar-active-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
6007
+ --sidebar-active-color: var(--color-primary);
6008
+ --sidebar-active-icon: var(--color-primary);
6009
+ --sidebar-badge-bg: var(--color-primary);
6010
+ --sidebar-badge-color: #ffffff;
6011
+
6012
+ --topbar-bg: var(--color-navbarBg);
6013
+ --topbar-text: var(--color-navbarText);
6014
+ --topbar-border: color-mix(in srgb, var(--color-navbarBg) 85%, #000000);
6015
+ --topbar-icon: color-mix(in srgb, var(--color-navbarText) 80%, transparent);
6016
+ --topbar-icon-hover: var(--color-navbarText);
6017
+
6018
+ --layout-bg: var(--color-secondary-50);
6019
+ --input-text-color: var(--color-secondary-900);
6020
+
6021
+ --calendar-selected-bg: var(--color-primary);
6022
+ --calendar-selected-text: #ffffff;
6023
+ --calendar-range-bg: var(--color-primary-50);
6024
+ --calendar-today-bg: var(--color-primary-100);
6025
+ --calendar-today-text: var(--color-primary);
6026
+ }
6027
+
6028
+ /* Dark mode overrides */
6029
+ .dark, [data-theme="dark"] {
6030
+ --layout-bg: #090f1d;
6031
+ --card-bg: #111827;
6032
+ --card-border: #1f2937;
6033
+ --card-header-bg: #1f2937;
6034
+ --card-header-border: #374151;
6035
+ --input-bg: #1f2937;
6036
+ --input-border: #374151;
6037
+ --input-placeholder: #6b7280;
6038
+ --input-text-color: #cbd5e1;
6039
+ --modal-bg: #111827;
6040
+ --modal-footer-bg: #1f2937;
6041
+ --modal-header-border: #374151;
6042
+ --modal-footer-border: #374151;
6043
+ --calendar-bg: #111827;
6044
+ --calendar-border: #1f2937;
6045
+ --calendar-header-text: #f3f4f6;
6046
+ --calendar-header-hover: #1f2937;
6047
+ --calendar-days-text: #e5e7eb;
6048
+ --calendar-selected-bg: var(--color-primary);
6049
+ --calendar-selected-text: #ffffff;
6050
+ --calendar-range-bg: var(--color-primary-50);
6051
+ --calendar-today-bg: var(--color-primary-100);
6052
+ --calendar-today-text: var(--color-primary);
6053
+
6054
+ /* Override dynamic color-mix scales to blend with dark instead of white */
6055
+ --color-primary-50: color-mix(in srgb, var(--color-primary) 10%, #0b1329);
6056
+ --color-primary-100: color-mix(in srgb, var(--color-primary) 20%, #0b1329);
6057
+ --color-primary-200: color-mix(in srgb, var(--color-primary) 35%, #0b1329);
6058
+ --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #0b1329);
6059
+ --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #0b1329);
6060
+
6061
+ --color-secondary-50: color-mix(in srgb, var(--color-secondary) 10%, #090f1d);
6062
+ --color-secondary-100: color-mix(in srgb, var(--color-secondary) 18%, #090f1d);
6063
+ --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #090f1d);
6064
+ --color-secondary-300: color-mix(in srgb, var(--color-secondary) 45%, #090f1d);
6065
+ --color-secondary-400: color-mix(in srgb, var(--color-secondary) 60%, #090f1d);
6066
+
6067
+ --color-success-50: color-mix(in srgb, var(--color-success) 10%, #061f14);
6068
+ --color-success-100: color-mix(in srgb, var(--color-success) 20%, #061f14);
6069
+ --color-success-200: color-mix(in srgb, var(--color-success) 35%, #061f14);
6070
+
6071
+ --color-danger-50: color-mix(in srgb, var(--color-danger) 10%, #1f0808);
6072
+ --color-danger-100: color-mix(in srgb, var(--color-danger) 20%, #1f0808);
6073
+ --color-danger-200: color-mix(in srgb, var(--color-danger) 35%, #1f0808);
6074
+
6075
+ --color-warning-50: color-mix(in srgb, var(--color-warning) 10%, #1f1b05);
6076
+ --color-warning-100: color-mix(in srgb, var(--color-warning) 20%, #1f1b05);
6077
+ --color-warning-200: color-mix(in srgb, var(--color-warning) 35%, #1f1b05);
6078
+
6079
+ --color-ternary-50: color-mix(in srgb, var(--color-ternary) 10%, #14081f);
6080
+ --color-ternary-100: color-mix(in srgb, var(--color-ternary) 20%, #14081f);
6081
+ --color-ternary-200: color-mix(in srgb, var(--color-ternary) 35%, #14081f);
6082
+
6083
+ --color-info-50: color-mix(in srgb, var(--color-info) 10%, #08141f);
6084
+ --color-info-100: color-mix(in srgb, var(--color-info) 20%, #08141f);
6085
+ --color-info-200: color-mix(in srgb, var(--color-info) 35%, #08141f);
6086
+ }
6087
+
6088
+ /* Force dark mode class overrides for common backgrounds, borders, and texts */
6089
+ .dark, [data-theme="dark"] {
6090
+ color: #cbd5e1;
6091
+ }
6092
+ .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
6093
+ .dark .text-gray-800, [data-theme="dark"] .text-gray-800,
6094
+ .dark h1, [data-theme="dark"] h1,
6095
+ .dark h2, [data-theme="dark"] h2,
6096
+ .dark h3, [data-theme="dark"] h3 {
6097
+ color: #f8fafc !important;
6098
+ }
6099
+ .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
6100
+ .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
6101
+ color: #cbd5e1 !important;
6102
+ }
6103
+ .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
6104
+ .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
6105
+ color: #cbd5e1 !important;
6106
+ }
6107
+ .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
6108
+ .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
6109
+ color: #94a3b8 !important;
6110
+ }
6111
+ .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
6112
+ .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
6113
+ color: #64748b !important;
6114
+ }
6115
+
6116
+ .dark .bg-white, [data-theme="dark"] .bg-white {
6117
+ background-color: var(--card-bg, #111827) !important;
6118
+ }
6119
+ .dark .bg-slate-50, [data-theme="dark"] .bg-slate-50,
6120
+ .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 {
6121
+ background-color: #1f2937 !important;
6122
+ }
6123
+ .dark .border-slate-100, [data-theme="dark"] .border-slate-100,
6124
+ .dark .border-gray-100, [data-theme="dark"] .border-gray-100,
6125
+ .dark .border-slate-200, [data-theme="dark"] .border-slate-200,
6126
+ .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
6127
+ border-color: #374151 !important;
6128
+ }
6129
+
6130
+ .dark .bg-gray-100, [data-theme="dark"] .bg-gray-100,
6131
+ .dark .bg-slate-100, [data-theme="dark"] .bg-slate-100 {
6132
+ background-color: #1f2937 !important;
6133
+ }
6134
+ .dark .border-gray-300, [data-theme="dark"] .border-gray-300,
6135
+ .dark .border-slate-300, [data-theme="dark"] .border-slate-300 {
6136
+ border-color: #4b5563 !important;
6137
+ }
6138
+ .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
6139
+ .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
6140
+ background-color: #374151 !important;
6141
+ }
6142
+
6143
+ /* Light mode overrides inside forced light subtree */
6144
+ [data-theme="light"] {
6145
+ color: #334155;
6146
+ --layout-bg: var(--color-secondary-50);
6147
+ --card-bg: #ffffff;
6148
+ --card-border: #f1f5f9;
6149
+ --card-header-bg: #f8fafc;
6150
+ --card-header-border: #e2e8f0;
6151
+ --input-bg: #ffffff;
6152
+ --input-border: #cbd5e1;
6153
+ --input-placeholder: #94a3b8;
6154
+ --input-text-color: #1e293b;
6155
+ --modal-bg: #ffffff;
6156
+ --modal-footer-bg: #f8fafc;
6157
+ --modal-header-border: #e2e8f0;
6158
+ --modal-footer-border: #e2e8f0;
6159
+ --calendar-bg: #ffffff;
6160
+ --calendar-border: #e2e8f0;
6161
+ --calendar-header-text: #1e293b;
6162
+ --calendar-header-hover: #f1f5f9;
6163
+ --calendar-days-text: #334155;
6164
+ --calendar-selected-bg: var(--color-primary);
6165
+ --calendar-selected-text: #ffffff;
6166
+ --calendar-range-bg: var(--color-primary-50);
6167
+ --calendar-today-bg: var(--color-primary-100);
6168
+ --calendar-today-text: var(--color-primary);
6169
+
6170
+ --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, #ffffff);
6171
+ --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
6172
+ --color-primary-200: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
6173
+ --color-primary-300: color-mix(in srgb, var(--color-primary) 50%, #ffffff);
6174
+ --color-primary-400: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
6175
+
6176
+ --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, #ffffff);
6177
+ --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, #ffffff);
6178
+ --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, #ffffff);
6179
+ --color-secondary-300: color-mix(in srgb, var(--color-secondary) 50%, #ffffff);
6180
+ --color-secondary-400: color-mix(in srgb, var(--color-secondary) 70%, #ffffff);
6181
+
6182
+ --color-success-50: color-mix(in srgb, var(--color-success) 5%, #ffffff);
6183
+ --color-success-100: color-mix(in srgb, var(--color-success) 10%, #ffffff);
6184
+ --color-success-200: color-mix(in srgb, var(--color-success) 30%, #ffffff);
6185
+
6186
+ --color-danger-50: color-mix(in srgb, var(--color-danger) 5%, #ffffff);
6187
+ --color-danger-100: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
6188
+ --color-danger-200: color-mix(in srgb, var(--color-danger) 30%, #ffffff);
6189
+
6190
+ --color-warning-50: color-mix(in srgb, var(--color-warning) 5%, #ffffff);
6191
+ --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
6192
+ --color-warning-200: color-mix(in srgb, var(--color-warning) 30%, #ffffff);
6193
+
6194
+ --color-ternary-50: color-mix(in srgb, var(--color-ternary) 5%, #ffffff);
6195
+ --color-ternary-100: color-mix(in srgb, var(--color-ternary) 10%, #ffffff);
6196
+ --color-ternary-200: color-mix(in srgb, var(--color-ternary) 30%, #ffffff);
6197
+
6198
+ --color-info-50: color-mix(in srgb, var(--color-info) 5%, #ffffff);
6199
+ --color-info-100: color-mix(in srgb, var(--color-info) 10%, #ffffff);
6200
+ --color-info-200: color-mix(in srgb, var(--color-info) 30%, #ffffff);
6201
+ }
6202
+
6203
+ [data-theme="light"] .text-slate-800,
6204
+ [data-theme="light"] .text-gray-800,
6205
+ [data-theme="light"] h1,
6206
+ [data-theme="light"] h2,
6207
+ [data-theme="light"] h3 {
6208
+ color: #1e293b !important;
6209
+ }
6210
+ [data-theme="light"] .text-slate-700,
6211
+ [data-theme="light"] .text-gray-700 {
6212
+ color: #334155 !important;
6213
+ }
6214
+ [data-theme="light"] .text-slate-600,
6215
+ [data-theme="light"] .text-gray-600 {
6216
+ color: #475569 !important;
6217
+ }
6218
+ [data-theme="light"] .text-slate-500,
6219
+ [data-theme="light"] .text-gray-500 {
6220
+ color: #64748b !important;
6221
+ }
6222
+ [data-theme="light"] .text-slate-400,
6223
+ [data-theme="light"] .text-gray-400 {
6224
+ color: #94a3b8 !important;
6225
+ }
6226
+
6227
+ [data-theme="light"] .bg-white {
6228
+ background-color: #ffffff !important;
6229
+ }
6230
+ [data-theme="light"] .bg-slate-50,
6231
+ [data-theme="light"] .bg-gray-50 {
6232
+ background-color: #f8fafc !important;
6233
+ }
6234
+ [data-theme="light"] .border-slate-100,
6235
+ [data-theme="light"] .border-gray-100,
6236
+ [data-theme="light"] .border-slate-200,
6237
+ [data-theme="light"] .border-gray-200 {
6238
+ border-color: #e2e8f0 !important;
6239
+ }
6240
+ [data-theme="light"] .bg-gray-100,
6241
+ [data-theme="light"] .bg-slate-100 {
6242
+ background-color: #f1f5f9 !important;
6243
+ }
6244
+ [data-theme="light"] .border-gray-300,
6245
+ [data-theme="light"] .border-slate-300 {
6246
+ border-color: #cbd5e1 !important;
6247
+ }
6248
+ [data-theme="light"] .bg-gray-200,
6249
+ [data-theme="light"] .bg-slate-200 {
6250
+ background-color: #e2e8f0 !important;
6251
+ }
6252
+
6253
+
6254
+ /* Primary overrides (cyan mappings in UI library) */
6255
+ .bg-cyan-400 { background-color: var(--color-primary) !important; }
6256
+ .hover\\:bg-cyan-500:hover { background-color: var(--color-primary-hover) !important; }
6257
+ .focus\\:ring-cyan-300:focus { --tw-ring-color: var(--color-primary-ring) !important; }
6258
+ .text-cyan-600 { color: var(--color-primary) !important; }
6259
+ .text-cyan-500 { color: var(--color-primary) !important; }
6260
+ .border-cyan-400 { border-color: var(--color-primary) !important; }
6261
+ .focus\\:border-cyan-500:focus { border-color: var(--color-primary-hover) !important; }
6262
+ .focus\\:ring-cyan-500:focus { --tw-ring-color: var(--color-primary-hover) !important; }
6263
+ .text-cyan-100 { color: var(--color-primary-soft) !important; }
6264
+ .hover\\:bg-cyan-50:hover { background-color: var(--color-primary-soft) !important; }
6265
+
6266
+ /* Success overrides (green mappings in UI library) */
6267
+ .bg-green-700 { background-color: var(--color-success) !important; }
6268
+ .hover\\:bg-green-800:hover { background-color: var(--color-success-hover) !important; }
6269
+ .focus\\:ring-green-300:focus { --tw-ring-color: var(--color-success-ring) !important; }
6270
+ .text-green-700 { color: var(--color-success) !important; }
6271
+ .border-green-700 { border-color: var(--color-success) !important; }
6272
+ .bg-green-500 { background-color: var(--color-success) !important; }
6273
+ .hover\\:bg-green-600:hover { background-color: var(--color-success-hover) !important; }
6274
+
6275
+ /* Danger overrides (red mappings in UI library) */
6276
+ .bg-red-700 { background-color: var(--color-danger) !important; }
6277
+ .hover\\:bg-red-800:hover { background-color: var(--color-danger-hover) !important; }
6278
+ .focus\\:ring-red-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
6279
+ .text-red-700 { color: var(--color-danger) !important; }
6280
+ .border-red-700 { border-color: var(--color-danger) !important; }
6281
+ .bg-red-500 { background-color: var(--color-danger) !important; }
6282
+ .hover\\:bg-red-600:hover { background-color: var(--color-danger-hover) !important; }
6283
+
6284
+ /* Warning overrides (yellow mappings in UI library) */
6285
+ .bg-yellow-400 { background-color: var(--color-warning) !important; }
6286
+ .hover\\:bg-yellow-500:hover { background-color: var(--color-warning-hover) !important; }
6287
+ .focus\\:ring-yellow-300:focus { --tw-ring-color: var(--color-warning-ring) !important; }
6288
+ .text-yellow-600 { color: var(--color-warning-hover) !important; }
6289
+ .border-yellow-400 { border-color: var(--color-warning) !important; }
6290
+ .bg-yellow-500 { background-color: var(--color-warning) !important; }
6291
+ .hover\\:bg-yellow-600:hover { background-color: var(--color-warning-hover) !important; }
6292
+
6293
+ /* Ternary / Orange overrides */
6294
+ .bg-orange-500 { background-color: var(--color-ternary) !important; }
6295
+ .hover\\:bg-orange-500:hover { background-color: var(--color-ternary-hover) !important; }
6296
+ .hover\\:bg-orange-600:hover { background-color: var(--color-ternary-hover) !important; }
6297
+ .text-orange-500 { color: var(--color-ternary) !important; }
6298
+ .text-orange-800 { color: var(--color-ternary-hover) !important; }
6299
+ .bg-orange-200 { background-color: var(--color-ternary-soft) !important; }
6300
+ .border-orange-400 { border-color: var(--color-ternary) !important; }
6301
+ .border-orange-500 { border-color: var(--color-ternary) !important; }
6302
+ .hover\\:bg-orange-50\\/30:hover { background-color: var(--color-ternary-soft) !important; }
6303
+
6304
+ /* Info / Blue overrides */
6305
+ .bg-blue-500 { background-color: var(--color-info) !important; }
6306
+ .hover\\:bg-blue-600:hover { background-color: var(--color-info-hover) !important; }
6307
+ .text-blue-500 { color: var(--color-info) !important; }
6308
+ .text-blue-600 { color: var(--color-info-hover) !important; }
6309
+ .border-blue-500 { border-color: var(--color-info) !important; }
6310
+
6311
+ /* Secondary elements overrides */
6312
+ button[class*="bg-white"][class*="hover:bg-gray-100"] {
6313
+ background-color: var(--color-secondary) !important;
6314
+ border-color: var(--color-secondary-soft-border) !important;
6315
+ color: #111827 !important;
6316
+ }
6317
+ button[class*="bg-white"][class*="hover:bg-gray-100"]:hover {
6318
+ background-color: var(--color-secondary-hover) !important;
6319
+ }
6320
+
6321
+ /* Custom Table styling overrides */
6322
+ thead tr, tr.bg-secondary-50, tr[class*="bg-secondary-50"] {
6323
+ background-color: var(--color-table-headerBg) !important;
6324
+ border-bottom-color: color-mix(in srgb, var(--color-table-headerBg) 85%, #000000) !important;
6325
+ }
6326
+ th span, th div span {
6327
+ color: var(--color-table-headerText) !important;
6328
+ }
6329
+ tbody tr {
6330
+ background-color: var(--color-table-rowBg) !important;
6331
+ }
6332
+ tbody tr td, tbody tr td div {
6333
+ color: var(--color-table-rowText) !important;
6334
+ }
6335
+ tbody tr:hover {
6336
+ background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-table-rowBg)) !important;
6337
+ }
6338
+
6339
+ /* Animation for Saved Indicator */
6340
+ @keyframes fadeInOut {
6341
+ 0%, 100% { opacity: 0; transform: translateY(-4px); }
6342
+ 15%, 85% { opacity: 1; transform: translateY(0); }
6343
+ }
6344
+ .animate-fade-in-out {
6345
+ animation: fadeInOut 1.5s ease-in-out forwards;
6346
+ }
6347
+
6348
+ /* Fallback utility classes for blurs */
6349
+ .backdrop-blur-xs {
6350
+ backdrop-filter: blur(2px);
6351
+ -webkit-backdrop-filter: blur(2px);
6352
+ }
6353
+ .backdrop-blur-xl {
6354
+ backdrop-filter: blur(24px);
6355
+ -webkit-backdrop-filter: blur(24px);
6356
+ }
6357
+
6358
+ /* =======================================================================
6359
+ AUTONOMOUS THEME DESIGNER STYLES (No Tailwind dependencies)
6360
+ ======================================================================= */
6361
+
6362
+ @keyframes itBounce {
6363
+ 0%, 100% { transform: translateY(0); }
6364
+ 50% { transform: translateY(-8px); }
6365
+ }
6366
+ .it-theme-bounce {
6367
+ animation: itBounce 3s infinite ease-in-out !important;
6368
+ }
6369
+
6370
+ /* FAB styles */
6371
+ .it-theme-fab {
6372
+ position: fixed !important;
6373
+ bottom: 24px !important;
6374
+ right: 24px !important;
6375
+ width: 56px !important;
6376
+ height: 56px !important;
6377
+ border-radius: 50% !important;
6378
+ border: none !important;
6379
+ color: #ffffff !important;
6380
+ box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15) !important;
6381
+ display: flex !important;
6382
+ align-items: center !important;
6383
+ justify-content: center !important;
6384
+ cursor: pointer !important;
6385
+ z-index: 99999 !important;
6386
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
6387
+ outline: none !important;
6388
+ }
6389
+ .it-theme-fab:hover {
6390
+ transform: scale(1.1) !important;
6391
+ box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2) !important;
6392
+ }
6393
+ .it-theme-fab:active {
6394
+ transform: scale(0.95) !important;
6395
+ }
6396
+
6397
+ /* Backdrop styles */
6398
+ .it-theme-backdrop {
6399
+ position: fixed !important;
6400
+ top: 0 !important;
6401
+ left: 0 !important;
6402
+ right: 0 !important;
6403
+ bottom: 0 !important;
6404
+ background-color: rgba(15, 23, 42, 0.3) !important;
6405
+ backdrop-filter: blur(4px) !important;
6406
+ -webkit-backdrop-filter: blur(4px) !important;
6407
+ z-index: 99997 !important;
6408
+ transition: opacity 0.3s ease !important;
6409
+ }
6410
+
6411
+ /* Drawer container */
6412
+ .it-theme-drawer {
6413
+ position: fixed !important;
6414
+ top: 0 !important;
6415
+ right: 0 !important;
6416
+ bottom: 0 !important;
6417
+ width: 100% !important;
6418
+ max-width: 420px !important;
6419
+ background-color: #ffffff !important;
6420
+ box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.08), -8px 0 10px -6px rgba(0, 0, 0, 0.08) !important;
6421
+ z-index: 99998 !important;
6422
+ display: flex !important;
6423
+ flex-direction: column !important;
6424
+ justify-content: space-between !important;
6425
+ padding: 24px !important;
6426
+ box-sizing: border-box !important;
6427
+ border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
6428
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6429
+ font-family: Inter, system-ui, -apple-system, sans-serif !important;
6430
+ color: #1e293b !important;
6431
+ }
6432
+
6433
+ .dark .it-theme-drawer, [data-theme="dark"] .it-theme-drawer {
6434
+ background-color: #0f172a !important;
6435
+ border-left-color: rgba(30, 41, 59, 0.8) !important;
6436
+ color: #f1f5f9 !important;
6437
+ }
6438
+
6439
+ /* Drawer Header */
6440
+ .it-theme-drawer-header {
6441
+ display: flex !important;
6442
+ align-items: center !important;
6443
+ justify-content: space-between !important;
6444
+ padding-bottom: 16px !important;
6445
+ border-bottom: 1px solid #e2e8f0 !important;
6446
+ }
6447
+ .dark .it-theme-drawer-header, [data-theme="dark"] .it-theme-drawer-header {
6448
+ border-bottom-color: #1e293b !important;
6449
+ }
6450
+
6451
+ .it-theme-drawer-title-group {
6452
+ display: flex !important;
6453
+ align-items: center !important;
6454
+ gap: 12px !important;
6455
+ }
6456
+
6457
+ .it-theme-icon-container {
6458
+ width: 36px !important;
6459
+ height: 36px !important;
6460
+ border-radius: 8px !important;
6461
+ display: flex !important;
6462
+ align-items: center !important;
6463
+ justify-content: center !important;
6464
+ color: #ffffff !important;
6465
+ }
6466
+
6467
+ .it-theme-drawer-title {
6468
+ font-size: 16px !important;
6469
+ font-weight: 700 !important;
6470
+ margin: 0 !important;
6471
+ color: #1e293b !important;
6472
+ line-height: 1.2 !important;
6473
+ }
6474
+ .dark .it-theme-drawer-title, [data-theme="dark"] .it-theme-drawer-title {
6475
+ color: #f8fafc !important;
6476
+ }
6477
+
6478
+ .it-theme-drawer-subtitle {
6479
+ font-size: 11px !important;
6480
+ color: #64748b !important;
6481
+ margin: 2px 0 0 0 !important;
6482
+ font-weight: 400 !important;
6483
+ }
6484
+ .dark .it-theme-drawer-subtitle, [data-theme="dark"] .it-theme-drawer-subtitle {
6485
+ color: #94a3b8 !important;
6486
+ }
6487
+
6488
+ .it-theme-close-btn {
6489
+ background: none !important;
6490
+ border: none !important;
6491
+ color: #94a3b8 !important;
6492
+ cursor: pointer !important;
6493
+ padding: 6px !important;
6494
+ border-radius: 6px !important;
6495
+ display: flex !important;
6496
+ align-items: center !important;
6497
+ justify-content: center !important;
6498
+ transition: background-color 0.2s, color 0.2s !important;
6499
+ }
6500
+ .it-theme-close-btn:hover {
6501
+ background-color: #f1f5f9 !important;
6502
+ color: #334155 !important;
6503
+ }
6504
+ .dark .it-theme-close-btn:hover, [data-theme="dark"] .it-theme-close-btn:hover {
6505
+ background-color: #1e293b !important;
6506
+ color: #f1f5f9 !important;
6507
+ }
6508
+
6509
+ /* Sections inside Drawer */
6510
+ .it-theme-section {
6511
+ margin-top: 18px !important;
6512
+ }
6513
+
6514
+ .it-theme-section-title {
6515
+ font-size: 10px !important;
6516
+ font-weight: 700 !important;
6517
+ text-transform: uppercase !important;
6518
+ letter-spacing: 0.05em !important;
6519
+ color: #94a3b8 !important;
6520
+ margin-bottom: 8px !important;
6521
+ margin-top: 0 !important;
6522
+ }
6523
+
6524
+ /* Preset Grid */
6525
+ .it-theme-presets-grid {
6526
+ display: grid !important;
6527
+ grid-template-columns: repeat(2, 1fr) !important;
6528
+ gap: 8px !important;
6529
+ }
6530
+
6531
+ .it-theme-preset-card {
6532
+ display: flex !important;
6533
+ flex-direction: column !important;
6534
+ align-items: flex-start !important;
6535
+ padding: 10px !important;
6536
+ border-radius: 10px !important;
6537
+ border: 1px solid #e2e8f0 !important;
6538
+ background-color: rgba(255, 255, 255, 0.6) !important;
6539
+ cursor: pointer !important;
6540
+ text-align: left !important;
6541
+ transition: all 0.2s ease !important;
6542
+ width: 100% !important;
6543
+ box-sizing: border-box !important;
6544
+ }
6545
+ .dark .it-theme-preset-card, [data-theme="dark"] .it-theme-preset-card {
6546
+ border-color: #1e293b !important;
6547
+ background-color: rgba(15, 23, 42, 0.4) !important;
6548
+ }
6549
+
6550
+ .it-theme-preset-card:hover {
6551
+ border-color: #cbd5e1 !important;
6552
+ transform: translateY(-1px) !important;
6553
+ }
6554
+ .dark .it-theme-preset-card:hover, [data-theme="dark"] .it-theme-preset-card:hover {
6555
+ border-color: #334155 !important;
6556
+ }
6557
+
6558
+ .it-theme-preset-name {
6559
+ font-size: 11px !important;
6560
+ font-weight: 600 !important;
6561
+ color: #334155 !important;
6562
+ margin-bottom: 6px !important;
6563
+ margin-top: 0 !important;
6564
+ white-space: nowrap !important;
6565
+ overflow: hidden !important;
6566
+ text-overflow: ellipsis !important;
6567
+ width: 100% !important;
6568
+ }
6569
+ .dark .it-theme-preset-name, [data-theme="dark"] .it-theme-preset-name {
6570
+ color: #cbd5e1 !important;
6571
+ }
6572
+
6573
+ .it-theme-preset-colors {
6574
+ display: flex !important;
6575
+ gap: 4px !important;
6576
+ }
6577
+
6578
+ .it-theme-preset-dot {
6579
+ width: 12px !important;
6580
+ height: 12px !important;
6581
+ border-radius: 50% !important;
6582
+ border: 1px solid rgba(0,0,0,0.08) !important;
6583
+ }
6584
+
6585
+ /* Color controls list */
6586
+ .it-theme-color-list {
6587
+ display: flex !important;
6588
+ flex-direction: column !important;
6589
+ gap: 6px !important;
6590
+ max-height: 250px !important;
6591
+ overflow-y: auto !important;
6592
+ padding-right: 4px !important;
6593
+ }
6594
+
6595
+ .it-theme-color-row {
6596
+ display: flex !important;
6597
+ align-items: center !important;
6598
+ justify-content: space-between !important;
6599
+ padding: 6px 10px !important;
6600
+ border-radius: 10px !important;
6601
+ border: 1px solid #f1f5f9 !important;
6602
+ background-color: rgba(248, 250, 252, 0.5) !important;
6603
+ }
6604
+ .dark .it-theme-color-row, [data-theme="dark"] .it-theme-color-row {
6605
+ border-color: #1e293b !important;
6606
+ background-color: rgba(9, 15, 29, 0.5) !important;
6607
+ }
6608
+
6609
+ .it-theme-color-left {
6610
+ display: flex !important;
6611
+ align-items: center !important;
6612
+ gap: 12px !important;
6613
+ }
6614
+
6615
+ .it-theme-color-picker-btn {
6616
+ position: relative !important;
6617
+ width: 28px !important;
6618
+ height: 28px !important;
6619
+ border-radius: 50% !important;
6620
+ overflow: hidden !important;
6621
+ border: 1px solid #cbd5e1 !important;
6622
+ box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06) !important;
6623
+ cursor: pointer !important;
6624
+ display: flex !important;
6625
+ align-items: center !important;
6626
+ justify-content: center !important;
6627
+ }
6628
+ .dark .it-theme-color-picker-btn, [data-theme="dark"] .it-theme-color-picker-btn {
6629
+ border-color: #475569 !important;
6630
+ }
6631
+
6632
+ .it-theme-color-picker-input {
6633
+ position: absolute !important;
6634
+ top: 0 !important;
6635
+ left: 0 !important;
6636
+ width: 100% !important;
6637
+ height: 100% !important;
6638
+ opacity: 0 !important;
6639
+ cursor: pointer !important;
6640
+ margin: 0 !important;
6641
+ padding: 0 !important;
6642
+ }
6643
+
6644
+ .it-theme-color-picker-preview {
6645
+ width: 100% !important;
6646
+ height: 100% !important;
6647
+ border-radius: 50% !important;
6648
+ }
6649
+
6650
+ .it-theme-color-meta {
6651
+ display: flex !important;
6652
+ flex-direction: column !important;
6653
+ }
6654
+
6655
+ .it-theme-color-label {
6656
+ font-size: 10px !important;
6657
+ font-weight: 700 !important;
6658
+ text-transform: uppercase !important;
6659
+ color: #475569 !important;
6660
+ }
6661
+ .dark .it-theme-color-label, [data-theme="dark"] .it-theme-color-label {
6662
+ color: #cbd5e1 !important;
6663
+ }
6664
+
6665
+ .it-theme-color-hex-text {
6666
+ font-family: monospace !important;
6667
+ font-size: 9px !important;
6668
+ color: #94a3b8 !important;
6669
+ margin-top: 1px !important;
6670
+ }
6671
+
6672
+ .it-theme-color-text-input {
6673
+ width: 80px !important;
6674
+ padding: 4px 6px !important;
6675
+ font-size: 11px !important;
6676
+ font-family: monospace !important;
6677
+ text-align: center !important;
6678
+ border-radius: 6px !important;
6679
+ border: 1px solid #cbd5e1 !important;
6680
+ background-color: #ffffff !important;
6681
+ color: #334155 !important;
6682
+ outline: none !important;
6683
+ transition: border-color 0.2s !important;
6684
+ box-sizing: border-box !important;
6685
+ }
6686
+ .dark .it-theme-color-text-input, [data-theme="dark"] .it-theme-color-text-input {
6687
+ border-color: #475569 !important;
6688
+ background-color: #1e293b !important;
6689
+ color: #cbd5e1 !important;
6690
+ }
6691
+
6692
+ /* Mode Selector Segmented Control */
6693
+ .it-theme-mode-selector {
6694
+ display: grid !important;
6695
+ grid-template-columns: repeat(3, 1fr) !important;
6696
+ gap: 2px !important;
6697
+ background-color: #f1f5f9 !important;
6698
+ padding: 2px !important;
6699
+ border-radius: 8px !important;
6700
+ width: 180px !important;
6701
+ }
6702
+ .dark .it-theme-mode-selector, [data-theme="dark"] .it-theme-mode-selector {
6703
+ background-color: #1e293b !important;
6704
+ }
6705
+
6706
+ .it-theme-mode-btn {
6707
+ background: none !important;
6708
+ border: none !important;
6709
+ padding: 6px 8px !important;
6710
+ font-size: 11px !important;
6711
+ font-weight: 600 !important;
6712
+ color: #475569 !important;
6713
+ border-radius: 6px !important;
6714
+ cursor: pointer !important;
6715
+ text-align: center !important;
6716
+ transition: all 0.2s ease !important;
6717
+ }
6718
+ .dark .it-theme-mode-btn, [data-theme="dark"] .it-theme-mode-btn {
6719
+ color: #94a3b8 !important;
6720
+ }
6721
+
6722
+ .it-theme-mode-btn-active {
6723
+ background-color: #ffffff !important;
6724
+ color: var(--color-primary) !important;
6725
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
6726
+ }
6727
+ .dark .it-theme-mode-btn-active, [data-theme="dark"] .it-theme-mode-btn-active {
6728
+ background-color: #0f172a !important;
6729
+ color: var(--color-primary) !important;
6730
+ }
6731
+
6732
+ /* Saved notification toast */
6733
+ .it-theme-toast-container {
6734
+ height: 20px !important;
6735
+ margin: 6px 0 !important;
6736
+ position: relative !important;
6737
+ }
6738
+
6739
+ .it-theme-toast {
6740
+ position: absolute !important;
6741
+ top: 0 !important;
6742
+ left: 0 !important;
6743
+ right: 0 !important;
6744
+ display: flex !important;
6745
+ justify-content: center !important;
6746
+ }
6747
+
6748
+ .it-theme-toast-badge {
6749
+ display: inline-flex !important;
6750
+ align-items: center !important;
6751
+ gap: 4px !important;
6752
+ font-size: 10px !important;
6753
+ font-weight: 600 !important;
6754
+ background-color: rgba(34, 197, 94, 0.1) !important;
6755
+ color: #16a34a !important;
6756
+ padding: 3px 10px !important;
6757
+ border-radius: 9999px !important;
6758
+ border: 1px solid rgba(34, 197, 94, 0.2) !important;
6759
+ }
6760
+
6761
+ /* Drawer Footer */
6762
+ .it-theme-drawer-footer {
6763
+ padding-top: 12px !important;
6764
+ margin-top: 12px !important;
6765
+ border-top: 1px solid #e2e8f0 !important;
6766
+ display: flex !important;
6767
+ align-items: center !important;
6768
+ justify-content: space-between !important;
6769
+ }
6770
+ .dark .it-theme-drawer-footer, [data-theme="dark"] .it-theme-drawer-footer {
6771
+ border-top-color: #1e293b !important;
6772
+ }
6773
+
6774
+ .it-theme-reset-btn {
6775
+ display: flex !important;
6776
+ align-items: center !important;
6777
+ gap: 6px !important;
6778
+ padding: 6px 12px !important;
6779
+ font-size: 11px !important;
6780
+ font-weight: 600 !important;
6781
+ background: none !important;
6782
+ border: none !important;
6783
+ border-radius: 6px !important;
6784
+ color: #64748b !important;
6785
+ cursor: pointer !important;
6786
+ transition: background-color 0.2s, color 0.2s !important;
6787
+ }
6788
+ .it-theme-reset-btn:hover {
6789
+ background-color: #f1f5f9 !important;
6790
+ color: #1e293b !important;
6791
+ }
6792
+ .dark .it-theme-reset-btn:hover, [data-theme="dark"] .it-theme-reset-btn:hover {
6793
+ background-color: #1e293b !important;
6794
+ color: #f8fafc !important;
6795
+ }
6796
+
6797
+ .it-theme-done-btn {
6798
+ padding: 6px 16px !important;
6799
+ font-size: 11px !important;
6800
+ font-weight: 700 !important;
6801
+ border: none !important;
6802
+ border-radius: 6px !important;
6803
+ color: #ffffff !important;
6804
+ cursor: pointer !important;
6805
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
6806
+ transition: transform 0.2s, background-color 0.2s !important;
6807
+ }
6808
+ .it-theme-done-btn:hover {
6809
+ transform: translateY(-1px) !important;
6810
+ }
6811
+ `;
6812
+ setShowSavedToast(true);
6813
+ const timer = setTimeout(() => setShowSavedToast(false), 1500);
6814
+ return () => clearTimeout(timer);
6815
+ }, [palette2, resolvedTheme]);
6816
+ const updateColor = (key, value) => {
6817
+ setPaletteState((prev) => {
6818
+ if (key.includes(".")) {
6819
+ const [section, subKey] = key.split(".");
6820
+ return {
6821
+ ...prev,
6822
+ [section]: {
6823
+ ...prev[section],
6824
+ [subKey]: value
6825
+ }
6826
+ };
6827
+ }
6828
+ return {
6829
+ ...prev,
6830
+ [key]: value
6831
+ };
6832
+ });
6833
+ };
6834
+ const applyPreset = (colors2) => {
6835
+ setPaletteState(colors2);
6836
+ };
6837
+ const resetTheme = () => {
6838
+ const basePalette = {
6839
+ ...DEFAULT_PALETTE,
6840
+ ...theme2,
6841
+ layout: { ...DEFAULT_PALETTE.layout, ...theme2?.layout },
6842
+ table: { ...DEFAULT_PALETTE.table, ...theme2?.table }
6843
+ };
6844
+ setPaletteState(basePalette);
6845
+ };
6846
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
6847
+ ITThemeContext.Provider,
6848
+ {
6849
+ value: {
6850
+ palette: palette2,
6851
+ colors: palette2,
6852
+ setPalette: setPaletteState,
6853
+ updateColor,
6854
+ resetTheme,
6855
+ applyPreset,
6856
+ resolvedTheme,
6857
+ darkModeMode,
6858
+ setDarkModeMode
6859
+ },
6860
+ children: [
6861
+ children,
6862
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6863
+ "button",
6864
+ {
6865
+ onClick: () => setIsOpen((prev) => !prev),
6866
+ className: "it-theme-fab it-theme-bounce",
6867
+ style: {
6868
+ backgroundColor: "var(--color-primary)"
6869
+ },
6870
+ onMouseEnter: (e) => {
6871
+ e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
6872
+ },
6873
+ onMouseLeave: (e) => {
6874
+ e.currentTarget.style.backgroundColor = "var(--color-primary)";
6875
+ },
6876
+ "aria-label": "Configurar Paleta de Colores",
6877
+ title: "Configurar Paleta de Colores",
6878
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_md3.MdPalette, { style: { width: "28px", height: "28px" } })
6879
+ }
6880
+ ),
6881
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
6882
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6883
+ "div",
6884
+ {
6885
+ onClick: () => setIsOpen(false),
6886
+ className: "it-theme-backdrop"
6887
+ }
6888
+ ),
6889
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-drawer", children: [
6890
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
6891
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-drawer-header", children: [
6892
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-drawer-title-group", children: [
6893
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6894
+ "div",
6895
+ {
6896
+ className: "it-theme-icon-container",
6897
+ style: { backgroundColor: "var(--color-primary)" },
6898
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_md3.MdPalette, { style: { width: "20px", height: "20px" } })
6899
+ }
6900
+ ),
6901
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
6902
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "it-theme-drawer-title", children: "ITTheme Designer" }),
6903
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "it-theme-drawer-subtitle", children: "Configure color tokens in real-time" })
6904
+ ] })
6905
+ ] }),
6906
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6907
+ "button",
6908
+ {
6909
+ onClick: () => setIsOpen(false),
6910
+ className: "it-theme-close-btn",
6911
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_md3.MdClose, { style: { width: "20px", height: "20px" } })
6912
+ }
6913
+ )
6914
+ ] }),
6915
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-toast-container", children: showSavedToast && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-toast", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "it-theme-toast-badge", children: [
6916
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_md3.MdCheck, { style: { width: "14px", height: "14px" } }),
6917
+ "Auto-saved to LocalStorage"
6918
+ ] }) }) }),
6919
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-section", style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" }, children: [
6920
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h4", { className: "it-theme-section-title", style: { margin: 0 }, children: "Apariencia" }),
6921
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-mode-selector", children: [
6922
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6923
+ "button",
6924
+ {
6925
+ type: "button",
6926
+ onClick: () => setDarkModeMode("light"),
6927
+ className: `it-theme-mode-btn ${darkModeMode === "light" ? "it-theme-mode-btn-active" : ""}`,
6928
+ children: "Claro"
6929
+ }
6930
+ ),
6931
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6932
+ "button",
6933
+ {
6934
+ type: "button",
6935
+ onClick: () => setDarkModeMode("dark"),
6936
+ className: `it-theme-mode-btn ${darkModeMode === "dark" ? "it-theme-mode-btn-active" : ""}`,
6937
+ children: "Oscuro"
6938
+ }
6939
+ ),
6940
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6941
+ "button",
6942
+ {
6943
+ type: "button",
6944
+ onClick: () => setDarkModeMode("system"),
6945
+ className: `it-theme-mode-btn ${darkModeMode === "system" ? "it-theme-mode-btn-active" : ""}`,
6946
+ children: "Local"
6947
+ }
6948
+ )
6949
+ ] })
6950
+ ] }),
6951
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-section", children: [
6952
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h4", { className: "it-theme-section-title", children: "Presets" }),
6953
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-presets-grid", children: PRESETS.map((preset) => {
6954
+ const isSelected = JSON.stringify(preset.colors) === JSON.stringify(palette2);
6955
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
6956
+ "button",
6957
+ {
6958
+ onClick: () => applyPreset(preset.colors),
6959
+ className: "it-theme-preset-card",
6960
+ style: isSelected ? {
6961
+ borderColor: "var(--color-primary)",
6962
+ backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, transparent)",
6963
+ boxShadow: "0 0 0 1px var(--color-primary)"
6964
+ } : {},
6965
+ children: [
6966
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "it-theme-preset-name", children: preset.name }),
6967
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-preset-colors", children: [
6968
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6969
+ "span",
6970
+ {
6971
+ className: "it-theme-preset-dot",
6972
+ style: { backgroundColor: preset.colors.primary }
6973
+ }
6974
+ ),
6975
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6976
+ "span",
6977
+ {
6978
+ className: "it-theme-preset-dot",
6979
+ style: { backgroundColor: preset.colors.secondary }
6980
+ }
6981
+ ),
6982
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6983
+ "span",
6984
+ {
6985
+ className: "it-theme-preset-dot",
6986
+ style: { backgroundColor: preset.colors.ternary }
6987
+ }
6988
+ ),
6989
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6990
+ "span",
6991
+ {
6992
+ className: "it-theme-preset-dot",
6993
+ style: { backgroundColor: preset.colors.success }
6994
+ }
6995
+ )
6996
+ ] })
6997
+ ]
6998
+ },
6999
+ preset.name
7000
+ );
7001
+ }) })
7002
+ ] }),
7003
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
7004
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-section", children: [
7005
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h4", { className: "it-theme-section-title", children: "Base Brand Colors" }),
7006
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-list", children: [
7007
+ "primary",
7008
+ "secondary",
7009
+ "ternary",
7010
+ "danger",
7011
+ "success",
7012
+ "info",
7013
+ "alert",
7014
+ "warning"
7015
+ ].map((key) => {
7016
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
7017
+ "div",
7018
+ {
7019
+ className: "it-theme-color-row",
7020
+ children: [
7021
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-left", children: [
7022
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-picker-btn", children: [
7023
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7024
+ "input",
7025
+ {
7026
+ type: "color",
7027
+ value: getNestedValue3(palette2, key),
7028
+ onChange: (e) => updateColor(key, e.target.value),
7029
+ className: "it-theme-color-picker-input"
7030
+ }
7031
+ ),
7032
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7033
+ "div",
7034
+ {
7035
+ className: "it-theme-color-picker-preview",
7036
+ style: { backgroundColor: getNestedValue3(palette2, key) }
7037
+ }
7038
+ )
7039
+ ] }),
7040
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-meta", children: [
7041
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "it-theme-color-label", children: key }),
7042
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
7043
+ ] })
7044
+ ] }),
7045
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7046
+ "input",
7047
+ {
7048
+ type: "text",
7049
+ value: getNestedValue3(palette2, key),
7050
+ onChange: (e) => updateColor(key, e.target.value),
7051
+ placeholder: "#000000",
7052
+ className: "it-theme-color-text-input"
7053
+ }
7054
+ )
7055
+ ]
7056
+ },
7057
+ key
7058
+ );
7059
+ }) })
7060
+ ] }),
7061
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-section", children: [
7062
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h4", { className: "it-theme-section-title", children: "Sidebar & Navbar Styles" }),
7063
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-list", children: [
7064
+ "layout.sidebarBg",
7065
+ "layout.sidebarText",
7066
+ "layout.navbarBg",
7067
+ "layout.navbarText"
7068
+ ].map((key) => {
7069
+ const displayLabel = key.split(".")[1];
7070
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
7071
+ "div",
7072
+ {
7073
+ className: "it-theme-color-row",
7074
+ children: [
7075
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-left", children: [
7076
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-picker-btn", children: [
7077
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7078
+ "input",
7079
+ {
7080
+ type: "color",
7081
+ value: getNestedValue3(palette2, key),
7082
+ onChange: (e) => updateColor(key, e.target.value),
7083
+ className: "it-theme-color-picker-input"
7084
+ }
7085
+ ),
7086
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7087
+ "div",
7088
+ {
7089
+ className: "it-theme-color-picker-preview",
7090
+ style: { backgroundColor: getNestedValue3(palette2, key) }
7091
+ }
7092
+ )
7093
+ ] }),
7094
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-meta", children: [
7095
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "it-theme-color-label", children: displayLabel }),
7096
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
7097
+ ] })
7098
+ ] }),
7099
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7100
+ "input",
7101
+ {
7102
+ type: "text",
7103
+ value: getNestedValue3(palette2, key),
7104
+ onChange: (e) => updateColor(key, e.target.value),
7105
+ placeholder: "#000000",
7106
+ className: "it-theme-color-text-input"
7107
+ }
7108
+ )
7109
+ ]
7110
+ },
7111
+ key
7112
+ );
7113
+ }) })
7114
+ ] }),
7115
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-section", style: { paddingBottom: "24px" }, children: [
7116
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h4", { className: "it-theme-section-title", children: "Table Styles" }),
7117
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-list", children: [
7118
+ "table.headerBg",
7119
+ "table.headerText",
7120
+ "table.rowBg",
7121
+ "table.rowText"
7122
+ ].map((key) => {
7123
+ const displayLabel = key.split(".")[1];
7124
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
7125
+ "div",
7126
+ {
7127
+ className: "it-theme-color-row",
7128
+ children: [
7129
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-left", children: [
7130
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-picker-btn", children: [
7131
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7132
+ "input",
7133
+ {
7134
+ type: "color",
7135
+ value: getNestedValue3(palette2, key),
7136
+ onChange: (e) => updateColor(key, e.target.value),
7137
+ className: "it-theme-color-picker-input"
7138
+ }
7139
+ ),
7140
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7141
+ "div",
7142
+ {
7143
+ className: "it-theme-color-picker-preview",
7144
+ style: { backgroundColor: getNestedValue3(palette2, key) }
7145
+ }
7146
+ )
7147
+ ] }),
7148
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-color-meta", children: [
7149
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "it-theme-color-label", children: displayLabel }),
7150
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "it-theme-color-hex-text", children: getNestedValue3(palette2, key) })
7151
+ ] })
7152
+ ] }),
7153
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7154
+ "input",
7155
+ {
7156
+ type: "text",
7157
+ value: getNestedValue3(palette2, key),
7158
+ onChange: (e) => updateColor(key, e.target.value),
7159
+ placeholder: "#000000",
7160
+ className: "it-theme-color-text-input"
7161
+ }
7162
+ )
7163
+ ]
7164
+ },
7165
+ key
7166
+ );
7167
+ }) })
7168
+ ] })
7169
+ ] })
7170
+ ] }),
7171
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "it-theme-drawer-footer", children: [
7172
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
7173
+ "button",
7174
+ {
7175
+ onClick: resetTheme,
7176
+ className: "it-theme-reset-btn",
7177
+ children: [
7178
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_md3.MdRefresh, { style: { width: "16px", height: "16px" } }),
7179
+ "Reset Defaults"
7180
+ ]
7181
+ }
7182
+ ),
7183
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
7184
+ "button",
7185
+ {
7186
+ onClick: () => setIsOpen(false),
7187
+ className: "it-theme-done-btn",
7188
+ style: {
7189
+ backgroundColor: "var(--color-primary)"
7190
+ },
7191
+ onMouseEnter: (e) => {
7192
+ e.currentTarget.style.backgroundColor = "var(--color-primary-hover)";
7193
+ },
7194
+ onMouseLeave: (e) => {
7195
+ e.currentTarget.style.backgroundColor = "var(--color-primary)";
7196
+ },
7197
+ children: "Done"
7198
+ }
7199
+ )
7200
+ ] })
7201
+ ] })
7202
+ ] })
7203
+ ]
7204
+ }
7205
+ );
5306
7206
  }
5307
7207
 
5308
7208
  // src/types/yup.types.ts
@@ -5317,6 +7217,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
5317
7217
  );
5318
7218
  // Annotate the CommonJS export names for ESM import in node:
5319
7219
  0 && (module.exports = {
7220
+ FileTypeEnum,
5320
7221
  ITBadget,
5321
7222
  ITButton,
5322
7223
  ITCalendar,
@@ -5337,10 +7238,14 @@ var createValidationSchema = (fields) => Yup.object().shape(
5337
7238
  ITSlideToggle,
5338
7239
  ITStepper,
5339
7240
  ITTable,
7241
+ ITTabs,
5340
7242
  ITText,
5341
7243
  ITThemeProvider,
5342
7244
  ITTimePicker,
5343
7245
  ITToast,
5344
- createValidationSchema
7246
+ ITTripleFilter,
7247
+ UploadStatus,
7248
+ createValidationSchema,
7249
+ useITTheme
5345
7250
  });
5346
7251
  //# sourceMappingURL=index.cjs.map