@axzydev/axzy_ui_system 1.0.167 → 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 +2219 -410
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +626 -21
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +69 -33
  6. package/dist/index.d.ts +69 -33
  7. package/dist/index.js +2216 -410
  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,
@@ -55,7 +56,9 @@ __export(index_exports, {
55
56
  ITTimePicker: () => ITTimePicker,
56
57
  ITToast: () => ITToast,
57
58
  ITTripleFilter: () => tripleFilter_default,
58
- createValidationSchema: () => createValidationSchema
59
+ UploadStatus: () => UploadStatus,
60
+ createValidationSchema: () => createValidationSchema,
61
+ useITTheme: () => useITTheme
59
62
  });
60
63
  module.exports = __toCommonJS(index_exports);
61
64
 
@@ -320,17 +323,17 @@ var components = {
320
323
  }
321
324
  },
322
325
  card: {
323
- backgroundColor: "#ffffff",
326
+ backgroundColor: "var(--card-bg, #ffffff)",
324
327
  borderRadius: "1rem",
325
- borderColor: semanticColors.gray[200],
328
+ borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
326
329
  borderWidth: "1px",
327
- 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))",
328
331
  hover: {
329
- 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))"
330
333
  },
331
334
  header: {
332
- backgroundColor: semanticColors.gray[50],
333
- 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))`,
334
337
  padding: "1rem 1.5rem",
335
338
  borderTopLeftRadius: "1rem",
336
339
  borderTopRightRadius: "1rem"
@@ -340,23 +343,23 @@ var components = {
340
343
  }
341
344
  },
342
345
  input: {
343
- backgroundColor: "#ffffff",
344
- borderColor: semanticColors.gray[300],
346
+ backgroundColor: "var(--input-bg, #ffffff)",
347
+ borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
345
348
  borderRadius: "0.5rem",
346
349
  padding: "0.5rem 0.75rem",
347
350
  fontSize: "0.875rem",
348
351
  focus: {
349
- borderColor: semanticColors.primary[500],
350
- 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]})`
351
354
  },
352
- placeholder: semanticColors.gray[400],
355
+ placeholder: `var(--input-placeholder, ${semanticColors.gray[400]})`,
353
356
  disabled: {
354
- backgroundColor: semanticColors.gray[100],
355
- borderColor: semanticColors.gray[200]
357
+ backgroundColor: `var(--input-disabled-bg, ${semanticColors.gray[100]})`,
358
+ borderColor: `var(--input-disabled-border, ${semanticColors.gray[200]})`
356
359
  },
357
360
  error: {
358
- borderColor: semanticColors.danger[500],
359
- 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]})`
360
363
  }
361
364
  },
362
365
  table: {
@@ -404,24 +407,24 @@ var components = {
404
407
  },
405
408
  modal: {
406
409
  overlay: {
407
- backgroundColor: "rgba(15, 23, 42, 0.75)"
410
+ backgroundColor: "var(--modal-overlay, rgba(15, 23, 42, 0.75))"
408
411
  },
409
412
  content: {
410
- backgroundColor: "#ffffff",
413
+ backgroundColor: "var(--modal-bg, #ffffff)",
411
414
  borderRadius: "1rem",
412
- 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))"
413
416
  },
414
417
  header: {
415
418
  padding: "1.5rem 1.5rem 0.5rem 1.5rem",
416
- borderBottom: `1px solid var(--color-secondary-200)`
419
+ borderBottom: `1px solid var(--modal-header-border, var(--color-secondary-200))`
417
420
  },
418
421
  body: {
419
422
  padding: "1.5rem"
420
423
  },
421
424
  footer: {
422
425
  padding: "1rem 1.5rem",
423
- borderTop: `1px solid var(--color-secondary-200)`,
424
- 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]})`
425
428
  }
426
429
  },
427
430
  calendar: {
@@ -670,11 +673,21 @@ var ITCalendar = ({
670
673
  endDate,
671
674
  minDate,
672
675
  maxDate,
673
- className
676
+ className,
677
+ variant = "primary"
674
678
  }) => {
675
679
  const mode = modeProp || (onChange ? "month" : "week");
676
680
  const [currentDate, setCurrentDate] = (0, import_react2.useState)(value || /* @__PURE__ */ new Date());
677
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
+ };
678
691
  (0, import_react2.useEffect)(() => {
679
692
  if (value) setCurrentDate(value);
680
693
  }, [value]);
@@ -792,7 +805,8 @@ var ITCalendar = ({
792
805
  className: cn("flex flex-col h-full rounded-lg shadow-sm overflow-hidden select-none", className),
793
806
  style: {
794
807
  backgroundColor: "var(--calendar-bg, #ffffff)",
795
- border: "1px solid var(--calendar-border, #e2e8f0)"
808
+ border: "1px solid var(--calendar-border, #e2e8f0)",
809
+ ...getVariantStyles()
796
810
  },
797
811
  onMouseUp: handleMouseUp,
798
812
  onMouseLeave: () => {
@@ -800,218 +814,326 @@ var ITCalendar = ({
800
814
  setDragCurrent(null);
801
815
  },
802
816
  children: [
803
- /* @__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: [
804
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
805
- "h2",
806
- {
807
- className: "text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded",
808
- style: {
809
- color: "var(--calendar-header-text, #1e293b)"
810
- },
811
- onClick: () => setView(view === "calendar" ? "years" : "calendar"),
812
- onMouseEnter: (e) => {
813
- e.currentTarget.style.backgroundColor = "var(--calendar-header-hover, #f1f5f9)";
814
- },
815
- onMouseLeave: (e) => {
816
- e.currentTarget.style.backgroundColor = "transparent";
817
- },
818
- children: view === "years" ? `${years[0]} - ${years[years.length - 1]}` : (0, import_date_fns.format)(currentDate, "MMMM yyyy", { locale: import_locale.es })
819
- }
820
- ),
821
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
822
- /* @__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 }) }),
823
- /* @__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" }),
824
- /* @__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 }) })
825
- ] })
826
- ] }),
827
- /* @__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)(
828
- "button",
817
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
818
+ "div",
829
819
  {
830
- type: "button",
831
- className: cn(
832
- "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
833
- year === currentDate.getFullYear() ? "bg-primary-600 text-white" : "hover:bg-primary-50 text-gray-700 hover:text-primary-700"
834
- ),
835
- onClick: () => {
836
- setCurrentDate((d) => {
837
- const newDate = new Date(d);
838
- newDate.setFullYear(year);
839
- return newDate;
840
- });
841
- 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)"
842
824
  },
843
- children: year
844
- },
845
- year
846
- )) }) : mode === "month" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-4", children: [
847
- /* @__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)) }),
848
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
849
- const isDisabled = isDateDisabled(day);
850
- const isCurrentMonth = (0, import_date_fns.isSameMonth)(day, currentDate);
851
- const isSelected = selectionMode === "single" && value && (0, import_date_fns.isSameDay)(day, value);
852
- const isRangeStart = selectionMode === "range" && startDate && (0, import_date_fns.isSameDay)(day, startDate);
853
- const isRangeEnd = selectionMode === "range" && endDate && (0, import_date_fns.isSameDay)(day, endDate);
854
- const isInRange = selectionMode === "range" && startDate && endDate && (0, import_date_fns.isAfter)(day, startDate) && (0, import_date_fns.isBefore)(day, endDate);
855
- 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)(
856
902
  "button",
857
903
  {
858
904
  type: "button",
859
- disabled: isDisabled,
860
- onClick: () => onChange && onChange(day),
861
905
  className: cn(
862
- "h-10 w-full flex items-center justify-center rounded-md text-sm transition-colors relative",
863
- !isCurrentMonth && "opacity-40",
864
- 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)]"
865
908
  ),
866
909
  style: {
867
- 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",
868
- 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)",
869
- 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)"
870
911
  },
871
- children: [
872
- (0, import_date_fns.format)(day, "d"),
873
- 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" }),
874
- 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" })
875
- ]
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
876
921
  },
877
- day.toISOString()
878
- );
879
- }) })
880
- ] }) : (
881
- /* Week/Day View (Scheduler) */
882
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex h-full", mode === "week" ? "min-w-[800px]" : "w-full"), children: [
883
- /* @__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)) }),
884
- /* @__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: [
885
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn(
886
- "h-10 border-b border-gray-200 flex flex-col items-center justify-center sticky top-0 bg-white z-10",
887
- (0, import_date_fns.isToday)(day) && "bg-primary-50"
888
- ), children: [
889
- /* @__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 }) }),
890
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
891
- "text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5",
892
- (0, import_date_fns.isToday)(day) ? "bg-primary-600 text-white" : "text-gray-800"
893
- ), children: (0, import_date_fns.format)(day, "d") })
894
- ] }),
895
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
896
- 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)(
897
972
  "div",
898
973
  {
899
- 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)" },
900
976
  children: [
901
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
977
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
902
978
  "div",
903
979
  {
904
- 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",
905
- onMouseDown: (e) => {
906
- const d = new Date(day);
907
- d.setHours(hour, 0, 0, 0);
908
- handleMouseDown(d, e);
909
- },
910
- onMouseEnter: () => {
911
- const d = new Date(day);
912
- d.setHours(hour, 0, 0, 0);
913
- 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)"
914
984
  },
915
- onClick: () => {
916
- if (!isDraggingRef.current) {
917
- const d = new Date(day);
918
- d.setHours(hour, 0, 0, 0);
919
- onSlotClick && onSlotClick(d);
920
- }
921
- }
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
+ ]
922
1009
  }
923
1010
  ),
924
- /* @__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)(
925
1120
  "div",
926
1121
  {
927
- className: "absolute inset-x-0 bottom-0 h-10 hover:border-primary-100 hover:bg-primary-50/30 transition-colors cursor-pointer z-0",
928
- onMouseDown: (e) => {
929
- const d = new Date(day);
930
- d.setHours(hour, 30, 0, 0);
931
- handleMouseDown(d, e);
932
- },
933
- onMouseEnter: () => {
934
- const d = new Date(day);
935
- d.setHours(hour, 30, 0, 0);
936
- 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`
937
1125
  },
938
- onClick: () => {
939
- if (!isDraggingRef.current) {
940
- const d = new Date(day);
941
- d.setHours(hour, 30, 0, 0);
942
- onSlotClick && onSlotClick(d);
943
- }
944
- }
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" })
945
1127
  }
946
1128
  )
947
1129
  ]
948
1130
  },
949
- hour
950
- )),
951
- dragStart && dragCurrent && (0, import_date_fns.isSameDay)(dragStart, day) && (() => {
952
- let start = dragStart;
953
- let end = dragCurrent;
954
- if ((0, import_date_fns.isBefore)(end, start)) [start, end] = [end, start];
955
- const finalEnd = (0, import_date_fns.addMinutes)(end, 30);
956
- const startMinutes = start.getHours() * 60 + start.getMinutes();
957
- const dayStartMinutes = START_HOUR * 60;
958
- const duration = (0, import_date_fns.differenceInMinutes)(finalEnd, start);
959
- const top = (startMinutes - dayStartMinutes) / 60 * 80;
960
- const height = duration / 60 * 80;
961
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
962
- "div",
963
- {
964
- className: "absolute left-1 right-1 bg-primary-500/30 border border-primary-500 rounded z-10 pointer-events-none",
965
- style: { top: `${top}px`, height: `${height}px` }
966
- }
967
- );
968
- })(),
969
- weekEvents.filter((event) => (0, import_date_fns.isSameDay)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, day)).map((event) => {
970
- const style = getEventStyle(event);
971
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
972
- "div",
973
- {
974
- className: cn(
975
- "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",
976
- !event.color && "bg-primary-100 text-primary-700 border-primary-500"
977
- ),
978
- style: {
979
- top: style.top,
980
- height: style.height,
981
- backgroundColor: event.color ? `${event.color}20` : void 0,
982
- borderColor: event.color,
983
- color: event.color ? event.color : void 0
984
- },
985
- onClick: (e) => {
986
- e.stopPropagation();
987
- onEventClick && onEventClick(event);
988
- },
989
- children: [
990
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-semibold truncate", children: event.title }),
991
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "opacity-80 truncate", children: [
992
- (0, import_date_fns.format)(typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start, "HH:mm"),
993
- " -",
994
- (0, import_date_fns.format)(typeof event.end === "string" ? (0, import_date_fns.parseISO)(event.end) : event.end, "HH:mm")
995
- ] })
996
- ]
997
- },
998
- event.id
999
- );
1000
- })
1001
- ] }),
1002
- (0, import_date_fns.isToday)(day) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1003
- "div",
1004
- {
1005
- className: "absolute left-0 right-0 border-t-2 border-danger-500 z-30 pointer-events-none",
1006
- style: {
1007
- top: `${((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes() - START_HOUR * 60) / 60 * 80}px`
1008
- },
1009
- 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" })
1010
- }
1011
- )
1012
- ] }, day.toISOString())) })
1013
- ] })
1014
- ) })
1131
+ day.toISOString()
1132
+ )) })
1133
+ ] })
1134
+ )
1135
+ }
1136
+ )
1015
1137
  ]
1016
1138
  }
1017
1139
  );
@@ -1148,6 +1270,7 @@ function ITInput({
1148
1270
  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
1149
1271
  const [hasSelectedAll, setHasSelectedAll] = (0, import_react4.useState)(false);
1150
1272
  const [showPassword, setShowPassword] = (0, import_react4.useState)(false);
1273
+ const [localTouched, setLocalTouched] = (0, import_react4.useState)(false);
1151
1274
  const inputRef = (0, import_react4.useRef)(null);
1152
1275
  const inputTheme = theme.input || {};
1153
1276
  const getStyle = () => {
@@ -1160,8 +1283,8 @@ function ITInput({
1160
1283
  borderWidth: "1px",
1161
1284
  borderStyle: "solid",
1162
1285
  transition: "all 0.2s",
1163
- color: theme.colors.gray[900]
1164
- // Default text color
1286
+ color: "var(--input-text-color, var(--color-secondary-900))"
1287
+ // Theme-aware text color
1165
1288
  };
1166
1289
  if (disabled) {
1167
1290
  style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -1184,7 +1307,11 @@ function ITInput({
1184
1307
  }
1185
1308
  return style;
1186
1309
  };
1187
- 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";
1188
1315
  const handleClick = (e) => {
1189
1316
  if (onClick) {
1190
1317
  onClick();
@@ -1354,6 +1481,7 @@ function ITInput({
1354
1481
  e.currentTarget.select();
1355
1482
  };
1356
1483
  const handleBlur = (e) => {
1484
+ setLocalTouched(true);
1357
1485
  setHasSelectedAll(false);
1358
1486
  setIsFocused(false);
1359
1487
  if (readOnly) {
@@ -1437,7 +1565,14 @@ function ITInput({
1437
1565
  id: name,
1438
1566
  type,
1439
1567
  checked,
1440
- onChange: handleTextChange,
1568
+ onChange: (e) => {
1569
+ setLocalTouched(true);
1570
+ handleTextChange(e);
1571
+ },
1572
+ onBlur: (e) => {
1573
+ setLocalTouched(true);
1574
+ onBlur?.(e);
1575
+ },
1441
1576
  disabled,
1442
1577
  required,
1443
1578
  className: (0, import_clsx5.default)(
@@ -1446,11 +1581,11 @@ function ITInput({
1446
1581
  type === "checkbox" && "form-checkbox rounded",
1447
1582
  className,
1448
1583
  { "opacity-50 cursor-not-allowed": disabled },
1449
- { "border-red-500": touched && error }
1584
+ { "border-red-500": hasError }
1450
1585
  )
1451
1586
  }
1452
1587
  ),
1453
- 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: [
1454
1589
  label,
1455
1590
  " ",
1456
1591
  required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-red-500", children: "*" })
@@ -1464,8 +1599,8 @@ function ITInput({
1464
1599
  {
1465
1600
  htmlFor: name,
1466
1601
  className: (0, import_clsx5.default)(
1467
- "text-sm font-medium text-gray-700",
1468
- { "text-red-500": touched && error },
1602
+ "text-sm font-medium text-gray-700 dark:text-slate-300",
1603
+ { "text-red-500": hasError },
1469
1604
  labelClassName
1470
1605
  ),
1471
1606
  children: [
@@ -1484,7 +1619,11 @@ function ITInput({
1484
1619
  placeholder,
1485
1620
  value: value ?? "",
1486
1621
  onChange: readOnly ? void 0 : onChange,
1487
- onBlur: readOnly ? void 0 : onBlur,
1622
+ onBlur: (e) => {
1623
+ if (readOnly) return;
1624
+ setLocalTouched(true);
1625
+ onBlur?.(e);
1626
+ },
1488
1627
  readOnly,
1489
1628
  maxLength,
1490
1629
  minLength,
@@ -1516,6 +1655,7 @@ function ITInput({
1516
1655
  onFocus: isNumberType ? handleFocus : () => setIsFocused(true),
1517
1656
  onBlur: isNumberType ? handleBlur : (e) => {
1518
1657
  setIsFocused(false);
1658
+ setLocalTouched(true);
1519
1659
  onBlur?.(e);
1520
1660
  },
1521
1661
  onKeyDown: isNumberType ? handleKeyDown : void 0,
@@ -1562,12 +1702,12 @@ function ITInput({
1562
1702
  ] })
1563
1703
  ] })
1564
1704
  ),
1565
- 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 }) }),
1566
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: [
1567
1707
  currentLength,
1568
1708
  maxLength && `/${maxLength}`
1569
1709
  ] }) }),
1570
- 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 }) })
1571
1711
  ] });
1572
1712
  }
1573
1713
 
@@ -1578,8 +1718,8 @@ var import_fa3 = require("react-icons/fa");
1578
1718
 
1579
1719
  // src/components/select/select.tsx
1580
1720
  var import_clsx6 = __toESM(require("clsx"), 1);
1581
- var import_fa2 = require("react-icons/fa");
1582
1721
  var import_react5 = require("react");
1722
+ var import_fa2 = require("react-icons/fa");
1583
1723
  var import_jsx_runtime6 = require("react/jsx-runtime");
1584
1724
  function ITSelect({
1585
1725
  name,
@@ -1599,7 +1739,13 @@ function ITSelect({
1599
1739
  readOnly = false
1600
1740
  }) {
1601
1741
  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
1742
+ const [localTouched, setLocalTouched] = (0, import_react5.useState)(false);
1602
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";
1603
1749
  const getStyle = () => {
1604
1750
  const style = {
1605
1751
  backgroundColor: inputTheme.backgroundColor,
@@ -1610,7 +1756,7 @@ function ITSelect({
1610
1756
  borderWidth: "1px",
1611
1757
  borderStyle: "solid",
1612
1758
  transition: "all 0.2s",
1613
- color: theme.colors.gray[900],
1759
+ color: "var(--input-text-color, var(--color-secondary-900))",
1614
1760
  appearance: "none"
1615
1761
  // Important for custom styling
1616
1762
  };
@@ -1619,7 +1765,7 @@ function ITSelect({
1619
1765
  style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
1620
1766
  style.opacity = 0.7;
1621
1767
  }
1622
- if (touched && error) {
1768
+ if (hasError) {
1623
1769
  style.borderColor = inputTheme.error?.borderColor || "red";
1624
1770
  if (isFocused) {
1625
1771
  style.boxShadow = inputTheme.error?.ring;
@@ -1637,8 +1783,8 @@ function ITSelect({
1637
1783
  {
1638
1784
  htmlFor: name,
1639
1785
  className: (0, import_clsx6.default)(
1640
- "text-sm font-medium text-gray-700 pt-0",
1641
- { "text-red-500": touched && error }
1786
+ "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
1787
+ { "text-red-500": hasError }
1642
1788
  ),
1643
1789
  children: [
1644
1790
  label,
@@ -1657,6 +1803,7 @@ function ITSelect({
1657
1803
  onChange: readOnly ? void 0 : onChange,
1658
1804
  onBlur: (e) => {
1659
1805
  setIsFocused(false);
1806
+ setLocalTouched(true);
1660
1807
  readOnly ? void 0 : onBlur?.(e);
1661
1808
  },
1662
1809
  onFocus: () => setIsFocused(true),
@@ -1684,7 +1831,7 @@ function ITSelect({
1684
1831
  ),
1685
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, {}) })
1686
1833
  ] }),
1687
- 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 }) })
1688
1835
  ] })
1689
1836
  ] }) });
1690
1837
  }
@@ -2687,6 +2834,7 @@ function ITDatePicker({
2687
2834
  onChange: handleDateChange,
2688
2835
  minDate,
2689
2836
  maxDate,
2837
+ variant,
2690
2838
  className: "h-auto border-none shadow-none w-full"
2691
2839
  }
2692
2840
  )
@@ -2948,11 +3096,11 @@ function ITTimePicker({
2948
3096
  const handleBlurInput = () => {
2949
3097
  if (!validateTime(inputValue)) {
2950
3098
  setIsValidTime(false);
2951
- onBlur({ target: { name, value } });
3099
+ onBlur?.({ target: { name, value } });
2952
3100
  return;
2953
3101
  }
2954
3102
  setIsValidTime(true);
2955
- onBlur({ target: { name, value: inputValue } });
3103
+ onBlur?.({ target: { name, value: inputValue } });
2956
3104
  };
2957
3105
  const handleHourSelect = (h) => {
2958
3106
  const min = currentMinute || "00";
@@ -3791,6 +3939,7 @@ function ITSearchSelect({
3791
3939
  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
3792
3940
  const [searchTerm, setSearchTerm] = (0, import_react19.useState)("");
3793
3941
  const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
3942
+ const [localTouched, setLocalTouched] = (0, import_react19.useState)(false);
3794
3943
  const containerRef = (0, import_react19.useRef)(null);
3795
3944
  const timeoutRef = (0, import_react19.useRef)(null);
3796
3945
  const selectedOption = (0, import_react19.useMemo)(() => {
@@ -3843,10 +3992,16 @@ function ITSearchSelect({
3843
3992
  const handleInputBlur = (e) => {
3844
3993
  setTimeout(() => {
3845
3994
  setIsFocused(false);
3995
+ setLocalTouched(true);
3846
3996
  onBlur?.(e);
3847
3997
  }, 200);
3848
3998
  };
3849
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";
3850
4005
  const getInputStyle = () => {
3851
4006
  const style = {
3852
4007
  backgroundColor: inputTheme.backgroundColor || "#ffffff",
@@ -3857,7 +4012,7 @@ function ITSearchSelect({
3857
4012
  borderWidth: "1px",
3858
4013
  borderStyle: "solid",
3859
4014
  transition: "all 0.2s",
3860
- color: theme.colors.gray[900],
4015
+ color: "var(--input-text-color, var(--color-secondary-900))",
3861
4016
  width: "100%"
3862
4017
  };
3863
4018
  if (disabled) {
@@ -3866,7 +4021,7 @@ function ITSearchSelect({
3866
4021
  style.opacity = 0.7;
3867
4022
  style.cursor = "not-allowed";
3868
4023
  }
3869
- if (touched && error) {
4024
+ if (hasError) {
3870
4025
  style.borderColor = inputTheme.error?.borderColor || "red";
3871
4026
  if (isFocused) {
3872
4027
  style.boxShadow = inputTheme.error?.ring;
@@ -3877,12 +4032,12 @@ function ITSearchSelect({
3877
4032
  }
3878
4033
  return style;
3879
4034
  };
3880
- 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: [
3881
4036
  label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3882
4037
  "label",
3883
4038
  {
3884
- className: (0, import_clsx14.default)("text-sm font-medium text-gray-700", {
3885
- "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
3886
4041
  }),
3887
4042
  children: [
3888
4043
  label,
@@ -3914,20 +4069,20 @@ function ITSearchSelect({
3914
4069
  !isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa11.FaSearch, { size: 14, className: (0, import_clsx14.default)({ "text-primary-500": isFocused }) })
3915
4070
  ] })
3916
4071
  ] }),
3917
- 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)(
3918
4073
  "div",
3919
4074
  {
3920
4075
  onClick: () => handleSelect(option),
3921
4076
  className: (0, import_clsx14.default)(
3922
4077
  "px-4 py-2 text-sm cursor-pointer transition-colors",
3923
- 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"
3924
4079
  ),
3925
4080
  children: option[labelField]
3926
4081
  },
3927
4082
  option[valueField]
3928
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 }) }) })
3929
4084
  ] }),
3930
- 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 })
3931
4086
  ] });
3932
4087
  }
3933
4088
 
@@ -4204,6 +4359,23 @@ var import_react23 = require("react");
4204
4359
  var import_react_dropzone = require("react-dropzone");
4205
4360
  var import_clsx18 = __toESM(require("clsx"), 1);
4206
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 || {});
4207
4379
  var ITDropfile = ({
4208
4380
  onFileSelect,
4209
4381
  onCancel,
@@ -4680,7 +4852,8 @@ function ITSidebar({
4680
4852
  className = "",
4681
4853
  visibleOnMobile = false,
4682
4854
  onItemClick,
4683
- onSubItemClick
4855
+ onSubItemClick,
4856
+ subitemConnector = "|"
4684
4857
  }) {
4685
4858
  const [expandedItems, setExpandedItems] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
4686
4859
  const [isHovering, setIsHovering] = (0, import_react25.useState)(false);
@@ -4712,6 +4885,27 @@ function ITSidebar({
4712
4885
  if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
4713
4886
  };
4714
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]);
4715
4909
  const toggleExpanded = (itemId) => {
4716
4910
  const newExpanded = new Set(expandedItems);
4717
4911
  if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -4858,39 +5052,48 @@ function ITSidebar({
4858
5052
  ]
4859
5053
  }
4860
5054
  ),
4861
- !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)("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_runtime27.jsxs)("li", { className: "relative", children: [
4862
- subitem.isActive && /* @__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" } }),
4863
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
4864
- "button",
4865
- {
4866
- onClick: () => {
4867
- if (subitem.action) subitem.action();
4868
- if (onSubItemClick) onSubItemClick(subitem);
4869
- },
4870
- className: `block w-full text-left px-4 py-2 rounded-xl transition-all duration-300`,
4871
- style: {
4872
- color: subitem.isActive ? theme.sidebar?.active?.color || "#0f172a" : theme.sidebar?.label?.color || "#475569",
4873
- backgroundColor: subitem.isActive ? theme.sidebar?.active?.backgroundColor || "#f8fafc" : "transparent",
4874
- fontSize: "0.85rem",
4875
- fontWeight: subitem.isActive ? 600 : 500,
4876
- letterSpacing: "0.01em"
4877
- },
4878
- onMouseEnter: (e) => {
4879
- if (!subitem.isActive) {
4880
- e.currentTarget.style.backgroundColor = theme.sidebar?.hover?.backgroundColor || "#f1f5f9";
4881
- e.currentTarget.style.transform = "translateX(4px)";
4882
- }
4883
- },
4884
- onMouseLeave: (e) => {
4885
- if (!subitem.isActive) {
4886
- e.currentTarget.style.backgroundColor = "transparent";
4887
- 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
4888
5092
  }
4889
- },
4890
- children: subitem.label
4891
- }
4892
- )
4893
- ] }, subitem.id)) }) })
5093
+ )
5094
+ ] }, subitem.id))
5095
+ }
5096
+ ) })
4894
5097
  ] }, item.id)) }) })
4895
5098
  }
4896
5099
  );
@@ -5251,152 +5454,1755 @@ function ITStepper({
5251
5454
 
5252
5455
  // src/components/theme-provider/themeProvider.tsx
5253
5456
  var import_react28 = require("react");
5457
+ var import_md3 = require("react-icons/md");
5254
5458
  var import_jsx_runtime31 = require("react/jsx-runtime");
5255
- function ITThemeProvider({ theme: theme2, children }) {
5256
- const activeThemeContext = (0, import_react28.useMemo)(() => {
5257
- const baseColors = {
5258
- primary: palette.blue,
5259
- secondary: palette.gray,
5260
- success: palette.success,
5261
- danger: palette.danger,
5262
- warning: palette.warning,
5263
- info: palette.cyan,
5264
- purple: palette.purple
5265
- };
5266
- return {
5267
- colors: {
5268
- ...baseColors,
5269
- ...theme2?.colors
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"
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",
5541
+ 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"
5553
+ }
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"
5581
+ }
5582
+ }
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"
5270
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",
5271
5625
  layout: {
5272
- ...theme.layout,
5273
- ...theme2?.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"
5274
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 }
5275
5677
  };
5276
- }, [theme2]);
5277
- const cssVariables = (0, import_react28.useMemo)(() => {
5278
- let variablesString = "";
5279
- Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
5280
- Object.entries(scale).forEach(([shade, hexValue]) => {
5281
- variablesString += `--color-${colorName}-${shade}: ${hexValue};
5282
- `;
5283
- });
5284
- });
5285
- if (theme2?.layout) {
5286
- if (theme2.layout.backgroundColor) variablesString += `--layout-bg: ${theme2.layout.backgroundColor};
5287
- `;
5288
- if (theme2.layout.contentPadding) variablesString += `--layout-padding: ${theme2.layout.contentPadding};
5289
- `;
5290
- }
5291
- if (theme2?.topbar) {
5292
- if (theme2.topbar.backgroundColor) variablesString += `--topbar-bg: ${theme2.topbar.backgroundColor};
5293
- `;
5294
- if (theme2.topbar.borderColor) variablesString += `--topbar-border: ${theme2.topbar.borderColor};
5295
- `;
5296
- if (theme2.topbar.iconColor) variablesString += `--topbar-icon: ${theme2.topbar.iconColor};
5297
- `;
5298
- if (theme2.topbar.iconHoverColor) variablesString += `--topbar-icon-hover: ${theme2.topbar.iconHoverColor};
5299
- `;
5300
- if (theme2.topbar.shadow) variablesString += `--topbar-shadow: ${theme2.topbar.shadow};
5301
- `;
5302
- if (theme2.topbar.textColor) variablesString += `--topbar-text: ${theme2.topbar.textColor};
5303
- `;
5304
- if (theme2.topbar.textHoverColor) variablesString += `--topbar-text-hover: ${theme2.topbar.textHoverColor};
5305
- `;
5306
- if (theme2.topbar.userMenu) {
5307
- if (theme2.topbar.userMenu.backgroundColor) variablesString += `--topbar-user-bg: ${theme2.topbar.userMenu.backgroundColor};
5308
- `;
5309
- if (theme2.topbar.userMenu.hoverBackground) variablesString += `--topbar-user-hover: ${theme2.topbar.userMenu.hoverBackground};
5310
- `;
5311
- if (theme2.topbar.userMenu.textColor) variablesString += `--topbar-user-text: ${theme2.topbar.userMenu.textColor};
5312
- `;
5313
- if (theme2.topbar.userMenu.subtitleColor) variablesString += `--topbar-user-subtitle: ${theme2.topbar.userMenu.subtitleColor};
5314
- `;
5315
- if (theme2.topbar.userMenu.dropdown) {
5316
- if (theme2.topbar.userMenu.dropdown.backgroundColor) variablesString += `--topbar-user-dropdown-bg: ${theme2.topbar.userMenu.dropdown.backgroundColor};
5317
- `;
5318
- if (theme2.topbar.userMenu.dropdown.borderColor) variablesString += `--topbar-user-dropdown-border: ${theme2.topbar.userMenu.dropdown.borderColor};
5319
- `;
5320
- if (theme2.topbar.userMenu.dropdown.itemHoverBackground) variablesString += `--topbar-user-item-hover: ${theme2.topbar.userMenu.dropdown.itemHoverBackground};
5321
- `;
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
+ }
5322
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)`;
5323
5808
  }
5324
5809
  }
5325
- if (theme2?.sidebar) {
5326
- if (theme2.sidebar.backgroundColor) variablesString += `--sidebar-bg: ${theme2.sidebar.backgroundColor};
5327
- `;
5328
- if (theme2.sidebar.borderColor) variablesString += `--sidebar-border: ${theme2.sidebar.borderColor};
5329
- `;
5330
- if (theme2.sidebar.label) {
5331
- if (theme2.sidebar.label.color) variablesString += `--sidebar-label-color: ${theme2.sidebar.label.color};
5332
- `;
5333
- if (theme2.sidebar.label.size) variablesString += `--sidebar-label-size: ${theme2.sidebar.label.size};
5334
- `;
5335
- if (theme2.sidebar.label.weight) variablesString += `--sidebar-label-weight: ${theme2.sidebar.label.weight};
5336
- `;
5337
- }
5338
- if (theme2.sidebar.icon) {
5339
- if (theme2.sidebar.icon.color) variablesString += `--sidebar-icon-color: ${theme2.sidebar.icon.color};
5340
- `;
5341
- if (theme2.sidebar.icon.size) variablesString += `--sidebar-icon-size: ${theme2.sidebar.icon.size};
5342
- `;
5343
- }
5344
- if (theme2.sidebar.hover?.backgroundColor) variablesString += `--sidebar-hover-bg: ${theme2.sidebar.hover.backgroundColor};
5345
- `;
5346
- if (theme2.sidebar.active) {
5347
- if (theme2.sidebar.active.backgroundColor) variablesString += `--sidebar-active-bg: ${theme2.sidebar.active.backgroundColor};
5348
- `;
5349
- if (theme2.sidebar.active.color) variablesString += `--sidebar-active-color: ${theme2.sidebar.active.color};
5350
- `;
5351
- if (theme2.sidebar.active.iconColor) variablesString += `--sidebar-active-icon: ${theme2.sidebar.active.iconColor};
5352
- `;
5353
- }
5354
- if (theme2.sidebar.badge) {
5355
- if (theme2.sidebar.badge.backgroundColor) variablesString += `--sidebar-badge-bg: ${theme2.sidebar.badge.backgroundColor};
5356
- `;
5357
- if (theme2.sidebar.badge.color) variablesString += `--sidebar-badge-color: ${theme2.sidebar.badge.color};
5358
- `;
5359
- }
5360
- }
5361
- if (theme2?.calendar) {
5362
- if (theme2.calendar.backgroundColor) variablesString += `--calendar-bg: ${theme2.calendar.backgroundColor};
5363
- `;
5364
- if (theme2.calendar.borderColor) variablesString += `--calendar-border: ${theme2.calendar.borderColor};
5365
- `;
5366
- if (theme2.calendar.header) {
5367
- if (theme2.calendar.header.textColor) variablesString += `--calendar-header-text: ${theme2.calendar.header.textColor};
5368
- `;
5369
- if (theme2.calendar.header.hoverBackground) variablesString += `--calendar-header-hover: ${theme2.calendar.header.hoverBackground};
5370
- `;
5371
- }
5372
- if (theme2.calendar.days) {
5373
- if (theme2.calendar.days.textColor) variablesString += `--calendar-days-text: ${theme2.calendar.days.textColor};
5374
- `;
5375
- if (theme2.calendar.days.weekendColor) variablesString += `--calendar-days-weekend: ${theme2.calendar.days.weekendColor};
5376
- `;
5377
- if (theme2.calendar.days.outsideMonthColor) variablesString += `--calendar-days-outside: ${theme2.calendar.days.outsideMonthColor};
5378
- `;
5379
- }
5380
- if (theme2.calendar.selection) {
5381
- if (theme2.calendar.selection.selectedColor) variablesString += `--calendar-selected-text: ${theme2.calendar.selection.selectedColor};
5382
- `;
5383
- if (theme2.calendar.selection.selectedBackground) variablesString += `--calendar-selected-bg: ${theme2.calendar.selection.selectedBackground};
5384
- `;
5385
- if (theme2.calendar.selection.rangeBackground) variablesString += `--calendar-range-bg: ${theme2.calendar.selection.rangeBackground};
5386
- `;
5387
- if (theme2.calendar.selection.todayBackground) variablesString += `--calendar-today-bg: ${theme2.calendar.selection.todayBackground};
5388
- `;
5389
- if (theme2.calendar.selection.todayColor) variablesString += `--calendar-today-text: ${theme2.calendar.selection.todayColor};
5390
- `;
5391
- }
5392
- }
5393
- return `:root {
5394
- ${variablesString}}`;
5395
- }, [activeThemeContext]);
5396
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
5397
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("style", { suppressHydrationWarning: true, children: cssVariables }),
5398
- children
5399
- ] });
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
+ );
5400
7206
  }
5401
7207
 
5402
7208
  // src/types/yup.types.ts
@@ -5411,6 +7217,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
5411
7217
  );
5412
7218
  // Annotate the CommonJS export names for ESM import in node:
5413
7219
  0 && (module.exports = {
7220
+ FileTypeEnum,
5414
7221
  ITBadget,
5415
7222
  ITButton,
5416
7223
  ITCalendar,
@@ -5437,6 +7244,8 @@ var createValidationSchema = (fields) => Yup.object().shape(
5437
7244
  ITTimePicker,
5438
7245
  ITToast,
5439
7246
  ITTripleFilter,
5440
- createValidationSchema
7247
+ UploadStatus,
7248
+ createValidationSchema,
7249
+ useITTheme
5441
7250
  });
5442
7251
  //# sourceMappingURL=index.cjs.map