@axzydev/axzy_ui_system 1.0.157 → 1.0.160

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 (12) hide show
  1. package/README.md +61 -37
  2. package/dist/index.cjs +93 -63
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +206 -427
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +93 -59
  7. package/dist/index.d.ts +93 -59
  8. package/dist/index.js +92 -63
  9. package/dist/index.js.map +1 -1
  10. package/package.json +13 -2
  11. package/src/theme/theme.ts +64 -52
  12. package/src/theme/theme.types.ts +32 -0
package/dist/index.d.cts CHANGED
@@ -4,9 +4,6 @@ import * as Yup from 'yup';
4
4
 
5
5
  declare const buttonVariants: Record<string, string>;
6
6
 
7
- /**
8
- * 2. Colores semánticos (qué representa cada color)
9
- */
10
7
  declare const semanticColors: {
11
8
  primary: {
12
9
  50: string;
@@ -35,43 +32,43 @@ declare const semanticColors: {
35
32
  950: string;
36
33
  };
37
34
  success: {
38
- '50': "#ecfdf5";
39
- '100': "#d1fae5";
40
- '200': "#a7f3d0";
41
- '300': "#6ee7b7";
42
- '400': "#34d399";
43
- '500': "#10b981";
44
- '600': "#059669";
45
- '700': "#047857";
46
- '800': "#065f46";
47
- '900': "#064e3b";
48
- '950': "#022c22";
35
+ 50: string;
36
+ 100: string;
37
+ 200: string;
38
+ 300: string;
39
+ 400: string;
40
+ 500: string;
41
+ 600: string;
42
+ 700: string;
43
+ 800: string;
44
+ 900: string;
45
+ 950: string;
49
46
  };
50
47
  danger: {
51
- '50': "#fff1f2";
52
- '100': "#ffe4e6";
53
- '200': "#fecdd3";
54
- '300': "#fda4af";
55
- '400': "#fb7185";
56
- '500': "#f43f5e";
57
- '600': "#e11d48";
58
- '700': "#be123c";
59
- '800': "#9f1239";
60
- '900': "#881337";
61
- '950': "#4c0519";
48
+ 50: string;
49
+ 100: string;
50
+ 200: string;
51
+ 300: string;
52
+ 400: string;
53
+ 500: string;
54
+ 600: string;
55
+ 700: string;
56
+ 800: string;
57
+ 900: string;
58
+ 950: string;
62
59
  };
63
60
  warning: {
64
- '50': "#fffbeb";
65
- '100': "#fef3c7";
66
- '200': "#fde68a";
67
- '300': "#fcd34d";
68
- '400': "#fbbf24";
69
- '500': "#f59e0b";
70
- '600': "#d97706";
71
- '700': "#b45309";
72
- '800': "#92400e";
73
- '900': "#78350f";
74
- '950': "#451a03";
61
+ 50: string;
62
+ 100: string;
63
+ 200: string;
64
+ 300: string;
65
+ 400: string;
66
+ 500: string;
67
+ 600: string;
68
+ 700: string;
69
+ 800: string;
70
+ 900: string;
71
+ 950: string;
75
72
  };
76
73
  info: {
77
74
  50: string;
@@ -87,30 +84,30 @@ declare const semanticColors: {
87
84
  950: string;
88
85
  };
89
86
  purple: {
90
- '50': "#f5f3ff";
91
- '100': "#ede9fe";
92
- '200': "#ddd6fe";
93
- '300': "#c4b5fd";
94
- '400': "#a78bfa";
95
- '500': "#8b5cf6";
96
- '600': "#7c3aed";
97
- '700': "#6d28d9";
98
- '800': "#5b21b6";
99
- '900': "#4c1d95";
100
- '950': "#2e1065";
87
+ 50: string;
88
+ 100: string;
89
+ 200: string;
90
+ 300: string;
91
+ 400: string;
92
+ 500: string;
93
+ 600: string;
94
+ 700: string;
95
+ 800: string;
96
+ 900: string;
97
+ 950: string;
101
98
  };
102
99
  error: {
103
- '50': "#fff1f2";
104
- '100': "#ffe4e6";
105
- '200': "#fecdd3";
106
- '300': "#fda4af";
107
- '400': "#fb7185";
108
- '500': "#f43f5e";
109
- '600': "#e11d48";
110
- '700': "#be123c";
111
- '800': "#9f1239";
112
- '900': "#881337";
113
- '950': "#4c0519";
100
+ 50: string;
101
+ 100: string;
102
+ 200: string;
103
+ 300: string;
104
+ 400: string;
105
+ 500: string;
106
+ 600: string;
107
+ 700: string;
108
+ 800: string;
109
+ 900: string;
110
+ 950: string;
114
111
  };
115
112
  gray: {
116
113
  50: string;
@@ -766,4 +763,41 @@ interface ITStepperProps {
766
763
 
767
764
  declare function ITStepper({ steps, currentStep, onFinish, onStepChange, allowClickToJump, useIcons, disableNext, containerClassName, stepClassName, scrollableContent, maxContentHeight, color, }: ITStepperProps): react_jsx_runtime.JSX.Element;
768
765
 
769
- export { type Column, type FieldConfig, type FieldConfigV2, ITBadget, type ITBadgetProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDropfile, ITFormBuilder, type ITFormBuilderProps, ITImage, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, ITNavbar, type ITNavbarProps, ITPagination, ITSelect, type ITSelectProps, ITSlideToggle, type ITSlideToggleProps, ITStepper, ITTable, type ITTableProps, ITText, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, createValidationSchema };
766
+ type ColorScale = {
767
+ 50: string;
768
+ 100: string;
769
+ 200: string;
770
+ 300: string;
771
+ 400: string;
772
+ 500: string;
773
+ 600: string;
774
+ 700: string;
775
+ 800: string;
776
+ 900: string;
777
+ 950?: string;
778
+ };
779
+ type SemanticThemeColors = {
780
+ primary?: ColorScale;
781
+ secondary?: ColorScale;
782
+ success?: ColorScale;
783
+ danger?: ColorScale;
784
+ warning?: ColorScale;
785
+ info?: ColorScale;
786
+ purple?: ColorScale;
787
+ };
788
+ interface ITThemeConfig {
789
+ colors: SemanticThemeColors;
790
+ layout?: {
791
+ backgroundColor?: string;
792
+ contentPadding?: string;
793
+ };
794
+ }
795
+
796
+ interface ITThemeProviderProps {
797
+ theme?: Partial<ITThemeConfig>;
798
+ children: React.ReactNode;
799
+ }
800
+
801
+ declare function ITThemeProvider({ theme, children }: ITThemeProviderProps): react_jsx_runtime.JSX.Element;
802
+
803
+ export { type Column, type FieldConfig, type FieldConfigV2, ITBadget, type ITBadgetProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDropfile, ITFormBuilder, type ITFormBuilderProps, ITImage, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, ITNavbar, type ITNavbarProps, ITPagination, ITSelect, type ITSelectProps, ITSlideToggle, type ITSlideToggleProps, ITStepper, ITTable, type ITTableProps, ITText, type ITThemeConfig, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, createValidationSchema };
package/dist/index.d.ts CHANGED
@@ -4,9 +4,6 @@ import * as Yup from 'yup';
4
4
 
5
5
  declare const buttonVariants: Record<string, string>;
6
6
 
7
- /**
8
- * 2. Colores semánticos (qué representa cada color)
9
- */
10
7
  declare const semanticColors: {
11
8
  primary: {
12
9
  50: string;
@@ -35,43 +32,43 @@ declare const semanticColors: {
35
32
  950: string;
36
33
  };
37
34
  success: {
38
- '50': "#ecfdf5";
39
- '100': "#d1fae5";
40
- '200': "#a7f3d0";
41
- '300': "#6ee7b7";
42
- '400': "#34d399";
43
- '500': "#10b981";
44
- '600': "#059669";
45
- '700': "#047857";
46
- '800': "#065f46";
47
- '900': "#064e3b";
48
- '950': "#022c22";
35
+ 50: string;
36
+ 100: string;
37
+ 200: string;
38
+ 300: string;
39
+ 400: string;
40
+ 500: string;
41
+ 600: string;
42
+ 700: string;
43
+ 800: string;
44
+ 900: string;
45
+ 950: string;
49
46
  };
50
47
  danger: {
51
- '50': "#fff1f2";
52
- '100': "#ffe4e6";
53
- '200': "#fecdd3";
54
- '300': "#fda4af";
55
- '400': "#fb7185";
56
- '500': "#f43f5e";
57
- '600': "#e11d48";
58
- '700': "#be123c";
59
- '800': "#9f1239";
60
- '900': "#881337";
61
- '950': "#4c0519";
48
+ 50: string;
49
+ 100: string;
50
+ 200: string;
51
+ 300: string;
52
+ 400: string;
53
+ 500: string;
54
+ 600: string;
55
+ 700: string;
56
+ 800: string;
57
+ 900: string;
58
+ 950: string;
62
59
  };
63
60
  warning: {
64
- '50': "#fffbeb";
65
- '100': "#fef3c7";
66
- '200': "#fde68a";
67
- '300': "#fcd34d";
68
- '400': "#fbbf24";
69
- '500': "#f59e0b";
70
- '600': "#d97706";
71
- '700': "#b45309";
72
- '800': "#92400e";
73
- '900': "#78350f";
74
- '950': "#451a03";
61
+ 50: string;
62
+ 100: string;
63
+ 200: string;
64
+ 300: string;
65
+ 400: string;
66
+ 500: string;
67
+ 600: string;
68
+ 700: string;
69
+ 800: string;
70
+ 900: string;
71
+ 950: string;
75
72
  };
76
73
  info: {
77
74
  50: string;
@@ -87,30 +84,30 @@ declare const semanticColors: {
87
84
  950: string;
88
85
  };
89
86
  purple: {
90
- '50': "#f5f3ff";
91
- '100': "#ede9fe";
92
- '200': "#ddd6fe";
93
- '300': "#c4b5fd";
94
- '400': "#a78bfa";
95
- '500': "#8b5cf6";
96
- '600': "#7c3aed";
97
- '700': "#6d28d9";
98
- '800': "#5b21b6";
99
- '900': "#4c1d95";
100
- '950': "#2e1065";
87
+ 50: string;
88
+ 100: string;
89
+ 200: string;
90
+ 300: string;
91
+ 400: string;
92
+ 500: string;
93
+ 600: string;
94
+ 700: string;
95
+ 800: string;
96
+ 900: string;
97
+ 950: string;
101
98
  };
102
99
  error: {
103
- '50': "#fff1f2";
104
- '100': "#ffe4e6";
105
- '200': "#fecdd3";
106
- '300': "#fda4af";
107
- '400': "#fb7185";
108
- '500': "#f43f5e";
109
- '600': "#e11d48";
110
- '700': "#be123c";
111
- '800': "#9f1239";
112
- '900': "#881337";
113
- '950': "#4c0519";
100
+ 50: string;
101
+ 100: string;
102
+ 200: string;
103
+ 300: string;
104
+ 400: string;
105
+ 500: string;
106
+ 600: string;
107
+ 700: string;
108
+ 800: string;
109
+ 900: string;
110
+ 950: string;
114
111
  };
115
112
  gray: {
116
113
  50: string;
@@ -766,4 +763,41 @@ interface ITStepperProps {
766
763
 
767
764
  declare function ITStepper({ steps, currentStep, onFinish, onStepChange, allowClickToJump, useIcons, disableNext, containerClassName, stepClassName, scrollableContent, maxContentHeight, color, }: ITStepperProps): react_jsx_runtime.JSX.Element;
768
765
 
769
- export { type Column, type FieldConfig, type FieldConfigV2, ITBadget, type ITBadgetProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDropfile, ITFormBuilder, type ITFormBuilderProps, ITImage, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, ITNavbar, type ITNavbarProps, ITPagination, ITSelect, type ITSelectProps, ITSlideToggle, type ITSlideToggleProps, ITStepper, ITTable, type ITTableProps, ITText, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, createValidationSchema };
766
+ type ColorScale = {
767
+ 50: string;
768
+ 100: string;
769
+ 200: string;
770
+ 300: string;
771
+ 400: string;
772
+ 500: string;
773
+ 600: string;
774
+ 700: string;
775
+ 800: string;
776
+ 900: string;
777
+ 950?: string;
778
+ };
779
+ type SemanticThemeColors = {
780
+ primary?: ColorScale;
781
+ secondary?: ColorScale;
782
+ success?: ColorScale;
783
+ danger?: ColorScale;
784
+ warning?: ColorScale;
785
+ info?: ColorScale;
786
+ purple?: ColorScale;
787
+ };
788
+ interface ITThemeConfig {
789
+ colors: SemanticThemeColors;
790
+ layout?: {
791
+ backgroundColor?: string;
792
+ contentPadding?: string;
793
+ };
794
+ }
795
+
796
+ interface ITThemeProviderProps {
797
+ theme?: Partial<ITThemeConfig>;
798
+ children: React.ReactNode;
799
+ }
800
+
801
+ declare function ITThemeProvider({ theme, children }: ITThemeProviderProps): react_jsx_runtime.JSX.Element;
802
+
803
+ export { type Column, type FieldConfig, type FieldConfigV2, ITBadget, type ITBadgetProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDropfile, ITFormBuilder, type ITFormBuilderProps, ITImage, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, ITNavbar, type ITNavbarProps, ITPagination, ITSelect, type ITSelectProps, ITSlideToggle, type ITSlideToggleProps, ITStepper, ITTable, type ITTableProps, ITText, type ITThemeConfig, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, createValidationSchema };
package/dist/index.js CHANGED
@@ -61,35 +61,45 @@ var palette = {
61
61
  900: "#0f172a",
62
62
  950: "#020617"
63
63
  },
64
- // Mantenemos los colores de estado pero actualizamos a tonos más suaves
65
64
  success: colors.emerald,
66
65
  danger: colors.rose,
67
66
  warning: colors.amber,
68
67
  purple: colors.violet,
69
68
  info: colors.sky
70
69
  };
70
+ var createColorVar = (name) => ({
71
+ 50: `var(--color-${name}-50)`,
72
+ 100: `var(--color-${name}-100)`,
73
+ 200: `var(--color-${name}-200)`,
74
+ 300: `var(--color-${name}-300)`,
75
+ 400: `var(--color-${name}-400)`,
76
+ 500: `var(--color-${name}-500)`,
77
+ 600: `var(--color-${name}-600)`,
78
+ 700: `var(--color-${name}-700)`,
79
+ 800: `var(--color-${name}-800)`,
80
+ 900: `var(--color-${name}-900)`,
81
+ 950: `var(--color-${name}-950)`
82
+ });
71
83
  var semanticColors = {
72
- primary: palette.blue,
73
- secondary: palette.gray,
74
- success: palette.success,
75
- danger: palette.danger,
76
- warning: palette.warning,
77
- info: palette.cyan,
78
- // Usamos cyan para info en lugar de sky
79
- purple: palette.purple,
80
- error: palette.danger,
81
- gray: palette.gray
84
+ primary: createColorVar("primary"),
85
+ secondary: createColorVar("secondary"),
86
+ success: createColorVar("success"),
87
+ danger: createColorVar("danger"),
88
+ warning: createColorVar("warning"),
89
+ info: createColorVar("info"),
90
+ purple: createColorVar("purple"),
91
+ error: createColorVar("danger"),
92
+ // Alias
93
+ gray: createColorVar("secondary")
94
+ // Secondary as Gray
82
95
  };
83
96
  var components = {
84
97
  layout: {
85
98
  backgroundColor: semanticColors.gray[50],
86
- // Very light gray background for the main content area
87
99
  contentPadding: "1.5rem"
88
- // p-6
89
100
  },
90
101
  topbar: {
91
102
  backgroundColor: "rgba(255, 255, 255, 0.90)",
92
- // Glassmorphism base
93
103
  borderColor: semanticColors.gray[200],
94
104
  iconColor: semanticColors.gray[500],
95
105
  iconHoverColor: semanticColors.gray[700],
@@ -110,7 +120,6 @@ var components = {
110
120
  },
111
121
  sidebar: {
112
122
  backgroundColor: "rgba(255, 255, 255, 0.90)",
113
- // Glassmorphism base like topbar
114
123
  borderColor: semanticColors.gray[200],
115
124
  label: {
116
125
  color: semanticColors.gray[700],
@@ -126,95 +135,75 @@ var components = {
126
135
  },
127
136
  active: {
128
137
  backgroundColor: semanticColors.gray[50],
129
- // Very subtle active bg in light mode
130
138
  color: semanticColors.gray[900],
131
- iconColor: "#10b981"
132
- // Emerald green
139
+ iconColor: semanticColors.primary[500]
133
140
  },
134
141
  badge: {
135
- backgroundColor: "#10b981",
142
+ backgroundColor: semanticColors.primary[500],
136
143
  color: "#ffffff"
137
144
  }
138
145
  },
139
146
  button: {
140
147
  primary: {
141
- backgroundColor: "#06b6d4",
142
- // Cyan-500
148
+ backgroundColor: semanticColors.primary[500],
143
149
  color: "#ffffff",
144
- hover: "#0891b2",
145
- // Cyan-600
146
- active: "#0e7490",
147
- // Cyan-700
148
- focus: "0 0 0 2px #a5f3fc",
149
- // Cyan-200
150
+ hover: semanticColors.primary[600],
151
+ active: semanticColors.primary[700],
152
+ focus: `0 0 0 2px ${semanticColors.primary[200]}`,
150
153
  borderRadius: "0.375rem",
151
- // 6px - rounded-md
152
154
  padding: "0.5rem 1rem",
153
155
  fontSize: "0.875rem",
154
156
  fontWeight: "600",
155
157
  transition: "all 150ms ease-in-out"
156
158
  },
157
159
  secondary: {
158
- backgroundColor: "#64748b",
159
- // Slate-500
160
+ backgroundColor: semanticColors.secondary[500],
160
161
  color: "#ffffff",
161
- // Text white for filled secondary per screenshot
162
- hover: "#475569",
163
- // Slate-600
164
- focus: "0 0 0 2px #e2e8f0",
162
+ hover: semanticColors.secondary[600],
163
+ focus: `0 0 0 2px ${semanticColors.secondary[200]}`,
165
164
  borderRadius: "0.375rem",
166
165
  padding: "0.5rem 1rem",
167
166
  fontSize: "0.875rem",
168
167
  fontWeight: "600"
169
168
  },
170
169
  success: {
171
- backgroundColor: "#22c55e",
172
- // Green-500
170
+ backgroundColor: semanticColors.success[500],
173
171
  color: "#ffffff",
174
- hover: "#16a34a",
175
- // Green-600
172
+ hover: semanticColors.success[600],
176
173
  focus: `0 0 0 2px ${semanticColors.success[200]}`,
177
174
  borderRadius: "0.375rem"
178
175
  },
179
176
  danger: {
180
- backgroundColor: "#ef4444",
181
- // Red-500
177
+ backgroundColor: semanticColors.danger[500],
182
178
  color: "#ffffff",
183
- hover: "#dc2626",
184
- // Red-600
179
+ hover: semanticColors.danger[600],
185
180
  focus: `0 0 0 2px ${semanticColors.danger[200]}`,
186
181
  borderRadius: "0.375rem"
187
182
  },
188
183
  error: {
189
- backgroundColor: "#ef4444",
184
+ backgroundColor: semanticColors.danger[500],
190
185
  color: "#ffffff",
191
- hover: "#dc2626",
186
+ hover: semanticColors.danger[600],
192
187
  borderRadius: "0.375rem"
193
188
  },
194
189
  warning: {
195
- backgroundColor: "#f97316",
196
- // Orange-500
190
+ backgroundColor: semanticColors.warning[500],
197
191
  color: "#ffffff",
198
- hover: "#ea580c",
199
- // Orange-600
192
+ hover: semanticColors.warning[600],
200
193
  focus: `0 0 0 2px ${semanticColors.warning[200]}`,
201
194
  borderRadius: "0.375rem"
202
195
  },
203
196
  info: {
204
- backgroundColor: "#0ea5e9",
205
- // Sky-500
197
+ backgroundColor: semanticColors.info[500],
206
198
  color: "#ffffff",
207
- hover: "#0284c7",
208
- // Sky-600
199
+ hover: semanticColors.info[600],
209
200
  focus: `0 0 0 2px ${semanticColors.info[200]}`,
210
201
  borderRadius: "0.375rem"
211
202
  },
212
203
  purple: {
213
- backgroundColor: "#8b5cf6",
214
- // Violet-500
204
+ backgroundColor: semanticColors.purple[500],
215
205
  color: "#ffffff",
216
- hover: "#7c3aed",
217
- // Violet-600
206
+ hover: semanticColors.purple[600],
218
207
  focus: `0 0 0 2px ${semanticColors.purple[200]}`,
219
208
  borderRadius: "0.375rem"
220
209
  },
@@ -223,7 +212,6 @@ var components = {
223
212
  color: semanticColors.primary[600],
224
213
  borderColor: semanticColors.primary[600],
225
214
  borderWidth: "2px",
226
- // Slightly thicker for modern look
227
215
  hover: semanticColors.primary[50],
228
216
  borderRadius: "0.375rem"
229
217
  }
@@ -284,7 +272,6 @@ var components = {
284
272
  card: {
285
273
  backgroundColor: "#ffffff",
286
274
  borderRadius: "1rem",
287
- // 16px - más moderno
288
275
  borderColor: semanticColors.gray[200],
289
276
  borderWidth: "1px",
290
277
  shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@@ -293,7 +280,7 @@ var components = {
293
280
  },
294
281
  header: {
295
282
  backgroundColor: semanticColors.gray[50],
296
- borderBottom: `1px solid ${semanticColors.gray[200]}`,
283
+ borderBottom: `1px solid var(--color-secondary-200)`,
297
284
  padding: "1rem 1.5rem",
298
285
  borderTopLeftRadius: "1rem",
299
286
  borderTopRightRadius: "1rem"
@@ -333,7 +320,7 @@ var components = {
333
320
  },
334
321
  row: {
335
322
  hover: semanticColors.primary[50],
336
- borderBottom: `1px solid ${semanticColors.gray[200]}`
323
+ borderBottom: `1px solid var(--color-secondary-200)`
337
324
  },
338
325
  cell: {
339
326
  padding: "1rem 1.5rem"
@@ -368,7 +355,6 @@ var components = {
368
355
  modal: {
369
356
  overlay: {
370
357
  backgroundColor: "rgba(15, 23, 42, 0.75)"
371
- // gray[900] con opacidad
372
358
  },
373
359
  content: {
374
360
  backgroundColor: "#ffffff",
@@ -377,14 +363,14 @@ var components = {
377
363
  },
378
364
  header: {
379
365
  padding: "1.5rem 1.5rem 0.5rem 1.5rem",
380
- borderBottom: `1px solid ${semanticColors.gray[200]}`
366
+ borderBottom: `1px solid var(--color-secondary-200)`
381
367
  },
382
368
  body: {
383
369
  padding: "1.5rem"
384
370
  },
385
371
  footer: {
386
372
  padding: "1rem 1.5rem",
387
- borderTop: `1px solid ${semanticColors.gray[200]}`,
373
+ borderTop: `1px solid var(--color-secondary-200)`,
388
374
  backgroundColor: semanticColors.gray[50]
389
375
  }
390
376
  }
@@ -4621,6 +4607,48 @@ function ITStepper({
4621
4607
  ] })
4622
4608
  ] });
4623
4609
  }
4610
+
4611
+ // src/components/theme-provider/themeProvider.tsx
4612
+ import { useMemo as useMemo4 } from "react";
4613
+ import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
4614
+ function ITThemeProvider({ theme: theme2, children }) {
4615
+ const activeThemeContext = useMemo4(() => {
4616
+ const baseColors = {
4617
+ primary: palette.blue,
4618
+ secondary: palette.gray,
4619
+ success: palette.success,
4620
+ danger: palette.danger,
4621
+ warning: palette.warning,
4622
+ info: palette.cyan,
4623
+ purple: palette.purple
4624
+ };
4625
+ return {
4626
+ colors: {
4627
+ ...baseColors,
4628
+ ...theme2?.colors
4629
+ },
4630
+ layout: {
4631
+ ...theme.layout,
4632
+ ...theme2?.layout
4633
+ }
4634
+ };
4635
+ }, [theme2]);
4636
+ const cssVariables = useMemo4(() => {
4637
+ let variablesString = "";
4638
+ Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
4639
+ Object.entries(scale).forEach(([shade, hexValue]) => {
4640
+ variablesString += `--color-${colorName}-${shade}: ${hexValue};
4641
+ `;
4642
+ });
4643
+ });
4644
+ return `:root {
4645
+ ${variablesString}}`;
4646
+ }, [activeThemeContext]);
4647
+ return /* @__PURE__ */ jsxs19(Fragment5, { children: [
4648
+ /* @__PURE__ */ jsx27("style", { suppressHydrationWarning: true, children: cssVariables }),
4649
+ children
4650
+ ] });
4651
+ }
4624
4652
  export {
4625
4653
  ITBadget,
4626
4654
  ITButton,
@@ -4641,6 +4669,7 @@ export {
4641
4669
  ITStepper,
4642
4670
  ITTable,
4643
4671
  ITText,
4672
+ ITThemeProvider,
4644
4673
  ITTimePicker,
4645
4674
  ITToast,
4646
4675
  createValidationSchema