xertica-ui 2.4.1 → 2.5.0

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 (52) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +28 -2
  3. package/bin/generate-tokens.ts +9 -9
  4. package/components/brand/xertica-provider/XerticaProvider.tsx +4 -1
  5. package/components/layout/sidebar/sidebar.stories.tsx +201 -0
  6. package/components/layout/sidebar/sidebar.tsx +86 -1
  7. package/components/pages/template-page/TemplatePage.stories.tsx +8 -15
  8. package/components/ui/chart/chart.test.tsx +1 -1
  9. package/components/ui/chart/chart.tsx +13 -6
  10. package/contexts/BrandColorsContext.tsx +39 -8
  11. package/contexts/theme-data.ts +51 -0
  12. package/dist/AssistantChart-BZTPJ5dP.cjs +3551 -0
  13. package/dist/AssistantChart-DMJJ_Amf.js +3383 -0
  14. package/dist/BrandColorsContext-BMRJ04Wf.js +718 -0
  15. package/dist/BrandColorsContext-BwY-b6M4.cjs +725 -0
  16. package/dist/VerifyEmailPage-CGIwmWrm.js +3296 -0
  17. package/dist/VerifyEmailPage-CpqqpLpo.cjs +3305 -0
  18. package/dist/XerticaProvider-CeS5G_n5.cjs +45 -0
  19. package/dist/XerticaProvider-ra2NciRq.js +43 -0
  20. package/dist/assistant.cjs.js +1 -1
  21. package/dist/assistant.es.js +1 -1
  22. package/dist/brand.cjs.js +1 -1
  23. package/dist/brand.es.js +1 -1
  24. package/dist/cli.js +45 -9
  25. package/dist/components/brand/xertica-provider/XerticaProvider.d.ts +3 -1
  26. package/dist/components/ui/chart/chart.d.ts +12 -3
  27. package/dist/contexts/theme-data.d.ts +4 -0
  28. package/dist/hooks.cjs.js +1 -1
  29. package/dist/hooks.es.js +1 -1
  30. package/dist/index.cjs.js +6 -6
  31. package/dist/index.es.js +6 -6
  32. package/dist/layout.cjs.js +1 -1
  33. package/dist/layout.es.js +1 -1
  34. package/dist/pages.cjs.js +1 -1
  35. package/dist/pages.es.js +1 -1
  36. package/dist/rich-text-editor-B2CKz7nx.cjs +2903 -0
  37. package/dist/rich-text-editor-DloeW0wc.js +2832 -0
  38. package/dist/sidebar-0ocFLSks.js +878 -0
  39. package/dist/sidebar-CeTMuzOx.cjs +881 -0
  40. package/dist/ui.cjs.js +2 -2
  41. package/dist/ui.es.js +2 -2
  42. package/dist/xertica-assistant-CyikE3N_.js +2173 -0
  43. package/dist/xertica-assistant-QFUnv5I2.cjs +2180 -0
  44. package/dist/xertica-ui.css +1 -1
  45. package/docs/components/sidebar.md +19 -2
  46. package/llms-compact.txt +30 -1
  47. package/llms.txt +1 -1
  48. package/package.json +2 -2
  49. package/styles/xertica/tokens.css +9 -9
  50. package/templates/guidelines/Guidelines.md +643 -355
  51. package/templates/package.json +2 -2
  52. package/templates/src/styles/xertica/tokens.css +9 -9
@@ -0,0 +1,718 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import React__default, { createContext, useState, useEffect, useContext } from 'react';
3
+
4
+ const ApiKeyContext = createContext(void 0);
5
+ const readStorage = (key) => typeof window !== "undefined" ? window.localStorage?.getItem(key) : null;
6
+ const writeStorage = (key, value) => {
7
+ if (typeof window === "undefined") return;
8
+ window.localStorage?.setItem(key, value);
9
+ };
10
+ const removeStorage = (key) => {
11
+ if (typeof window === "undefined") return;
12
+ window.localStorage?.removeItem(key);
13
+ };
14
+ function ApiKeyProvider({
15
+ children,
16
+ initialApiKey,
17
+ initialGeminiApiKey,
18
+ initialGoogleMapsApiKey
19
+ }) {
20
+ const LEAKED_KEYS = [
21
+ "AIzaSyCMsAMytBeOK0Qd7RKFyA5IW9eWt2WTJg",
22
+ "AIzaSyAiYWEIEmx212Up9zfM8kqyMXB4jLs8gq0"
23
+ ];
24
+ const [apiKey, setApiKeyState] = useState(() => {
25
+ if (initialApiKey) return initialApiKey;
26
+ const saved = readStorage("xertica-api-key");
27
+ return saved || "";
28
+ });
29
+ const [geminiApiKey, setGeminiApiKeyState] = useState(() => {
30
+ if (initialGeminiApiKey) return initialGeminiApiKey;
31
+ const saved = readStorage("xertica-gemini-api-key");
32
+ if (saved && LEAKED_KEYS.includes(saved)) {
33
+ removeStorage("xertica-gemini-api-key");
34
+ return "";
35
+ }
36
+ return saved || "";
37
+ });
38
+ const [googleMapsApiKey, setGoogleMapsApiKeyState] = useState(() => {
39
+ if (initialGoogleMapsApiKey) return initialGoogleMapsApiKey;
40
+ const saved = readStorage("xertica-googlemaps-api-key");
41
+ return saved || "";
42
+ });
43
+ const [isApiKeyValid, setIsApiKeyValid] = useState(false);
44
+ const [isGoogleMapsKeyValid, setIsGoogleMapsKeyValid] = useState(false);
45
+ useEffect(() => {
46
+ if (initialApiKey !== void 0) {
47
+ setApiKeyState(initialApiKey.trim());
48
+ }
49
+ }, [initialApiKey]);
50
+ useEffect(() => {
51
+ if (initialGeminiApiKey !== void 0) {
52
+ setGeminiApiKeyState(initialGeminiApiKey.trim());
53
+ }
54
+ }, [initialGeminiApiKey]);
55
+ useEffect(() => {
56
+ if (initialGoogleMapsApiKey !== void 0) {
57
+ setGoogleMapsApiKeyState(initialGoogleMapsApiKey.trim());
58
+ }
59
+ }, [initialGoogleMapsApiKey]);
60
+ useEffect(() => {
61
+ if (apiKey) {
62
+ writeStorage("xertica-api-key", apiKey);
63
+ setIsApiKeyValid(apiKey.length > 0);
64
+ } else {
65
+ removeStorage("xertica-api-key");
66
+ setIsApiKeyValid(false);
67
+ }
68
+ }, [apiKey]);
69
+ useEffect(() => {
70
+ if (geminiApiKey) {
71
+ writeStorage("xertica-gemini-api-key", geminiApiKey);
72
+ setIsApiKeyValid(geminiApiKey.startsWith("AIzaSy") && geminiApiKey.length > 20);
73
+ } else {
74
+ removeStorage("xertica-gemini-api-key");
75
+ setIsApiKeyValid(false);
76
+ }
77
+ }, [geminiApiKey]);
78
+ useEffect(() => {
79
+ if (googleMapsApiKey) {
80
+ writeStorage("xertica-googlemaps-api-key", googleMapsApiKey);
81
+ setIsGoogleMapsKeyValid(
82
+ googleMapsApiKey.startsWith("AIzaSy") && googleMapsApiKey.length > 20
83
+ );
84
+ const reloadMaps = async () => {
85
+ if (googleMapsApiKey.length < 10) return;
86
+ try {
87
+ const { reloadGoogleMaps } = await import('./index-BabBx2pa.js');
88
+ await reloadGoogleMaps(googleMapsApiKey);
89
+ console.log("[ApiKeyContext] Google Maps recarregado com sucesso");
90
+ } catch (error) {
91
+ console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
92
+ }
93
+ };
94
+ reloadMaps();
95
+ } else {
96
+ removeStorage("xertica-googlemaps-api-key");
97
+ setIsGoogleMapsKeyValid(false);
98
+ }
99
+ }, [googleMapsApiKey]);
100
+ const setApiKey = (key) => {
101
+ setApiKeyState(key.trim());
102
+ };
103
+ const setGeminiApiKey = (key) => {
104
+ setGeminiApiKeyState(key.trim());
105
+ };
106
+ const setGoogleMapsApiKey = (key) => {
107
+ setGoogleMapsApiKeyState(key.trim());
108
+ };
109
+ const reloadMapsApi = async () => {
110
+ if (!googleMapsApiKey || googleMapsApiKey.length < 10) {
111
+ return;
112
+ }
113
+ try {
114
+ const { reloadGoogleMaps } = await import('./index-BabBx2pa.js');
115
+ await reloadGoogleMaps(googleMapsApiKey);
116
+ console.log("[ApiKeyContext] Google Maps recarregado manualmente");
117
+ } catch (error) {
118
+ console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
119
+ }
120
+ };
121
+ return /* @__PURE__ */ jsx(
122
+ ApiKeyContext.Provider,
123
+ {
124
+ value: {
125
+ apiKey,
126
+ setApiKey,
127
+ geminiApiKey,
128
+ setGeminiApiKey,
129
+ isApiKeyValid,
130
+ googleMapsApiKey,
131
+ setGoogleMapsApiKey,
132
+ isGoogleMapsKeyValid,
133
+ reloadMapsApi
134
+ },
135
+ children
136
+ }
137
+ );
138
+ }
139
+ function useApiKey() {
140
+ const context = useContext(ApiKeyContext);
141
+ if (!context) {
142
+ throw new Error("useApiKey must be used within ApiKeyProvider");
143
+ }
144
+ return context;
145
+ }
146
+
147
+ const AssistenteContext = createContext(void 0);
148
+ function AssistenteProvider({ children }) {
149
+ const [conversaAtual, setConversaAtual] = useState("1");
150
+ const [conversas, setConversas] = useState([
151
+ {
152
+ id: "1",
153
+ titulo: "Nova Conversa",
154
+ mensagens: [],
155
+ ultimaMensagem: "",
156
+ timestamp: (/* @__PURE__ */ new Date()).toISOString(),
157
+ favorita: false
158
+ }
159
+ ]);
160
+ const [isTyping, setIsTyping] = useState(false);
161
+ const [abaSelecionada, setAbaSelecionada] = useState("chat");
162
+ const [editingDocument, setEditingDocument] = useState(
163
+ null
164
+ );
165
+ const [searchFilter, setSearchFilter] = useState("all");
166
+ const [savedSearches, setSavedSearches] = useState([]);
167
+ const historico = conversas.find((c) => c.id === conversaAtual)?.mensagens || [];
168
+ return /* @__PURE__ */ jsx(
169
+ AssistenteContext.Provider,
170
+ {
171
+ value: {
172
+ historico,
173
+ conversaAtual,
174
+ setConversaAtual,
175
+ conversas,
176
+ setConversas,
177
+ isTyping,
178
+ setIsTyping,
179
+ abaSelecionada,
180
+ setAbaSelecionada,
181
+ editingDocument,
182
+ setEditingDocument,
183
+ searchFilter,
184
+ setSearchFilter,
185
+ savedSearches,
186
+ setSavedSearches
187
+ },
188
+ children
189
+ }
190
+ );
191
+ }
192
+ function useAssistente() {
193
+ const context = useContext(AssistenteContext);
194
+ if (!context) {
195
+ throw new Error("useAssistente must be used within AssistenteProvider");
196
+ }
197
+ return context;
198
+ }
199
+
200
+ const colorThemes = [
201
+ {
202
+ id: "xertica-original",
203
+ name: "Xertica Original",
204
+ description: "A identidade visual clássica da Xertica com o gradiente original",
205
+ colors: {
206
+ primary: "#2C275B",
207
+ primaryForeground: "#FFFFFF",
208
+ primaryLight: "#5B568F",
209
+ primaryDarkMode: "#72CDFD",
210
+ primaryForegroundDark: "#09090B",
211
+ sidebarLight: "#2C275B",
212
+ // Primary Color
213
+ sidebarDark: "#1a1928",
214
+ // Original Dark BG
215
+ darkBackground: "#05050d",
216
+ darkCard: "#0d0c16",
217
+ darkMuted: "#16151f",
218
+ darkBorder: "#252336",
219
+ gradientStart: "#FDB0F2",
220
+ gradientEnd: "#72CDFD",
221
+ gradientStartDark: "#7B4A7A",
222
+ gradientEndDark: "#3A5C7D",
223
+ chart1: "#2C275B",
224
+ chart2: "#047857",
225
+ chart3: "#B45309",
226
+ chart4: "#1D4ED8",
227
+ chart5: "#B91C1C"
228
+ },
229
+ preview: {
230
+ primary: "#2C275B",
231
+ secondary: "#FDB0F2",
232
+ accent: "#72CDFD"
233
+ }
234
+ },
235
+ {
236
+ id: "zinc",
237
+ name: "Zinc",
238
+ description: "Minimalista, sério e elegante (Escala de Cinza)",
239
+ colors: {
240
+ primary: "#18181B",
241
+ primaryForeground: "#FAFAFA",
242
+ primaryLight: "#E4E4E7",
243
+ primaryDarkMode: "#FAFAFA",
244
+ primaryForegroundDark: "#18181B",
245
+ sidebarLight: "#18181B",
246
+ // Primary Color
247
+ sidebarDark: "#09090B",
248
+ darkBackground: "#05050d",
249
+ darkCard: "#0d0c16",
250
+ darkMuted: "#16151f",
251
+ darkBorder: "#252336",
252
+ gradientStart: "#52525B",
253
+ gradientEnd: "#D4D4D8",
254
+ gradientStartDark: "#27272A",
255
+ gradientEndDark: "#52525B",
256
+ chart1: "#18181B",
257
+ chart2: "#52525B",
258
+ chart3: "#A1A1AA",
259
+ chart4: "#D4D4D8",
260
+ chart5: "#E4E4E7"
261
+ },
262
+ preview: {
263
+ primary: "#18181B",
264
+ secondary: "#52525B",
265
+ accent: "#E4E4E7"
266
+ }
267
+ },
268
+ {
269
+ id: "slate",
270
+ name: "Slate",
271
+ description: "Profissional com tons de azul acinzentado",
272
+ colors: {
273
+ primary: "#0F172A",
274
+ primaryForeground: "#F8FAFC",
275
+ primaryLight: "#CBD5E1",
276
+ primaryDarkMode: "#F8FAFC",
277
+ primaryForegroundDark: "#0F172A",
278
+ sidebarLight: "#0F172A",
279
+ // Primary Color
280
+ sidebarDark: "#020617",
281
+ darkBackground: "#05050d",
282
+ darkCard: "#0d0c16",
283
+ darkMuted: "#16151f",
284
+ darkBorder: "#252336",
285
+ gradientStart: "#475569",
286
+ gradientEnd: "#94A3B8",
287
+ gradientStartDark: "#1E293B",
288
+ gradientEndDark: "#475569",
289
+ chart1: "#0F172A",
290
+ chart2: "#475569",
291
+ chart3: "#94A3B8",
292
+ chart4: "#CBD5E1",
293
+ chart5: "#E2E8F0"
294
+ },
295
+ preview: {
296
+ primary: "#0F172A",
297
+ secondary: "#475569",
298
+ accent: "#94A3B8"
299
+ }
300
+ },
301
+ {
302
+ id: "blue",
303
+ name: "Blue",
304
+ description: "Confiável e seguro, padrão corporativo",
305
+ colors: {
306
+ primary: "#2563EB",
307
+ primaryForeground: "#FFFFFF",
308
+ primaryLight: "#DBEAFE",
309
+ primaryDarkMode: "#3B82F6",
310
+ primaryForegroundDark: "#FFFFFF",
311
+ sidebarLight: "#1E3A8A",
312
+ // Blue 900 (High Contrast Sidebar)
313
+ sidebarDark: "#172554",
314
+ darkBackground: "#03050f",
315
+ darkCard: "#080d18",
316
+ darkMuted: "#0f1422",
317
+ darkBorder: "#1a2440",
318
+ gradientStart: "#2563EB",
319
+ gradientEnd: "#60A5FA",
320
+ gradientStartDark: "#1D4ED8",
321
+ gradientEndDark: "#2563EB",
322
+ chart1: "#2563EB",
323
+ chart2: "#3B82F6",
324
+ chart3: "#60A5FA",
325
+ chart4: "#93C5FD",
326
+ chart5: "#BFDBFE"
327
+ },
328
+ preview: {
329
+ primary: "#2563EB",
330
+ secondary: "#60A5FA",
331
+ accent: "#DBEAFE"
332
+ }
333
+ },
334
+ {
335
+ id: "violet",
336
+ name: "Violet",
337
+ description: "Criativo e vibrante",
338
+ colors: {
339
+ primary: "#7C3AED",
340
+ primaryForeground: "#FFFFFF",
341
+ primaryLight: "#EDE9FE",
342
+ primaryDarkMode: "#8B5CF6",
343
+ primaryForegroundDark: "#FFFFFF",
344
+ sidebarLight: "#4C1D95",
345
+ // Violet 900 (High Contrast Sidebar)
346
+ sidebarDark: "#2E1065",
347
+ darkBackground: "#07040f",
348
+ darkCard: "#0e0a18",
349
+ darkMuted: "#150f21",
350
+ darkBorder: "#221838",
351
+ gradientStart: "#7C3AED",
352
+ gradientEnd: "#A78BFA",
353
+ gradientStartDark: "#5B21B6",
354
+ gradientEndDark: "#7C3AED",
355
+ chart1: "#7C3AED",
356
+ chart2: "#8B5CF6",
357
+ chart3: "#A78BFA",
358
+ chart4: "#C4B5FD",
359
+ chart5: "#DDD6FE"
360
+ },
361
+ preview: {
362
+ primary: "#7C3AED",
363
+ secondary: "#A78BFA",
364
+ accent: "#EDE9FE"
365
+ }
366
+ },
367
+ {
368
+ id: "rose",
369
+ name: "Rose",
370
+ description: "Elegante e suave",
371
+ colors: {
372
+ primary: "#BE123C",
373
+ // Rose 700 (Better text contrast for Primary)
374
+ primaryForeground: "#FFFFFF",
375
+ primaryLight: "#FFE4E6",
376
+ primaryDarkMode: "#F43F5E",
377
+ primaryForegroundDark: "#FFFFFF",
378
+ sidebarLight: "#881337",
379
+ // Rose 900 (High Contrast Sidebar)
380
+ sidebarDark: "#881337",
381
+ darkBackground: "#0f0305",
382
+ darkCard: "#180709",
383
+ darkMuted: "#200c0f",
384
+ darkBorder: "#3a1018",
385
+ gradientStart: "#E11D48",
386
+ gradientEnd: "#FB7185",
387
+ gradientStartDark: "#9F1239",
388
+ gradientEndDark: "#E11D48",
389
+ chart1: "#E11D48",
390
+ chart2: "#F43F5E",
391
+ chart3: "#FB7185",
392
+ chart4: "#FDA4AF",
393
+ chart5: "#FECDD3"
394
+ },
395
+ preview: {
396
+ primary: "#BE123C",
397
+ secondary: "#FB7185",
398
+ accent: "#FFE4E6"
399
+ }
400
+ },
401
+ {
402
+ id: "emerald",
403
+ name: "Emerald",
404
+ description: "Natural e equilibrado",
405
+ colors: {
406
+ primary: "#047857",
407
+ // Emerald 700 (Better text contrast for Primary)
408
+ primaryForeground: "#FFFFFF",
409
+ primaryLight: "#D1FAE5",
410
+ primaryDarkMode: "#10B981",
411
+ primaryForegroundDark: "#FFFFFF",
412
+ sidebarLight: "#064E3B",
413
+ // Emerald 900 (High Contrast Sidebar)
414
+ sidebarDark: "#064E3B",
415
+ darkBackground: "#030f08",
416
+ darkCard: "#07160c",
417
+ darkMuted: "#0c1e11",
418
+ darkBorder: "#143320",
419
+ gradientStart: "#059669",
420
+ gradientEnd: "#34D399",
421
+ gradientStartDark: "#064E3B",
422
+ gradientEndDark: "#059669",
423
+ chart1: "#059669",
424
+ chart2: "#10B981",
425
+ chart3: "#34D399",
426
+ chart4: "#6EE7B7",
427
+ chart5: "#A7F3D0"
428
+ },
429
+ preview: {
430
+ primary: "#047857",
431
+ secondary: "#34D399",
432
+ accent: "#D1FAE5"
433
+ }
434
+ },
435
+ {
436
+ id: "amber",
437
+ name: "Amber",
438
+ description: "Quente e energético",
439
+ colors: {
440
+ primary: "#B45309",
441
+ // Amber 700 (Better text contrast for Primary)
442
+ primaryForeground: "#FFFFFF",
443
+ primaryLight: "#FEF3C7",
444
+ primaryDarkMode: "#F59E0B",
445
+ primaryForegroundDark: "#FFFFFF",
446
+ sidebarLight: "#78350F",
447
+ // Amber 900 (High Contrast Sidebar)
448
+ sidebarDark: "#78350F",
449
+ darkBackground: "#0f0a03",
450
+ darkCard: "#181107",
451
+ darkMuted: "#20190d",
452
+ darkBorder: "#382e14",
453
+ gradientStart: "#D97706",
454
+ gradientEnd: "#FBBF24",
455
+ gradientStartDark: "#92400E",
456
+ gradientEndDark: "#D97706",
457
+ chart1: "#D97706",
458
+ chart2: "#F59E0B",
459
+ chart3: "#FBBF24",
460
+ chart4: "#FDE68A",
461
+ chart5: "#FEF3C7"
462
+ },
463
+ preview: {
464
+ primary: "#B45309",
465
+ secondary: "#FBBF24",
466
+ accent: "#FEF3C7"
467
+ }
468
+ },
469
+ {
470
+ id: "orange",
471
+ name: "Orange",
472
+ description: "Vibrante e amigável",
473
+ colors: {
474
+ primary: "#C2410C",
475
+ // Orange 700 (Better text contrast for Primary)
476
+ primaryForeground: "#FFFFFF",
477
+ primaryLight: "#FFEDD5",
478
+ primaryDarkMode: "#F97316",
479
+ primaryForegroundDark: "#FFFFFF",
480
+ sidebarLight: "#7C2D12",
481
+ // Orange 900 (High Contrast Sidebar)
482
+ sidebarDark: "#7C2D12",
483
+ darkBackground: "#0f0703",
484
+ darkCard: "#180e06",
485
+ darkMuted: "#20150a",
486
+ darkBorder: "#382512",
487
+ gradientStart: "#EA580C",
488
+ gradientEnd: "#FB923C",
489
+ gradientStartDark: "#9A3412",
490
+ gradientEndDark: "#EA580C",
491
+ chart1: "#EA580C",
492
+ chart2: "#F97316",
493
+ chart3: "#FB923C",
494
+ chart4: "#FDBA74",
495
+ chart5: "#FED7AA"
496
+ },
497
+ preview: {
498
+ primary: "#C2410C",
499
+ secondary: "#FB923C",
500
+ accent: "#FFEDD5"
501
+ }
502
+ }
503
+ ];
504
+
505
+ function hexToRgb(hex) {
506
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
507
+ return result ? {
508
+ r: parseInt(result[1], 16),
509
+ g: parseInt(result[2], 16),
510
+ b: parseInt(result[3], 16)
511
+ } : null;
512
+ }
513
+
514
+ const BrandColorsContext = createContext(void 0);
515
+ const BrandColorsProvider = ({
516
+ children,
517
+ defaultTheme,
518
+ primaryColor,
519
+ useCustomTokens = false
520
+ }) => {
521
+ const [currentTheme, setCurrentTheme] = useState(() => {
522
+ if (primaryColor) return "custom";
523
+ return defaultTheme || "xertica-original";
524
+ });
525
+ const [radius, setRadius] = useState(0.5);
526
+ const [colors, setColors] = useState(() => {
527
+ if (primaryColor) {
528
+ return {
529
+ ...colorThemes[0].colors,
530
+ primary: primaryColor,
531
+ primaryDarkMode: primaryColor,
532
+ sidebarLight: primaryColor,
533
+ sidebarDark: primaryColor,
534
+ chart1: primaryColor
535
+ };
536
+ }
537
+ const theme = colorThemes.find((t) => t.id === currentTheme);
538
+ return theme?.colors || colorThemes[0].colors;
539
+ });
540
+ useEffect(() => {
541
+ if (primaryColor) {
542
+ setColors({
543
+ ...colorThemes[0].colors,
544
+ primary: primaryColor,
545
+ primaryDarkMode: primaryColor,
546
+ sidebarLight: primaryColor,
547
+ sidebarDark: primaryColor,
548
+ chart1: primaryColor
549
+ });
550
+ setCurrentTheme("custom");
551
+ return;
552
+ }
553
+ const theme = colorThemes.find((t) => t.id === currentTheme);
554
+ if (theme) {
555
+ setColors(theme.colors);
556
+ }
557
+ }, [currentTheme, primaryColor]);
558
+ const applyColors = React__default.useCallback(() => {
559
+ if (useCustomTokens) return;
560
+ if (typeof document === "undefined") return;
561
+ const root = document.documentElement;
562
+ const isDark = root.classList.contains("dark");
563
+ const primary = isDark ? colors.primaryDarkMode : colors.primary;
564
+ const primaryForeground = isDark ? colors.primaryForegroundDark : colors.primaryForeground;
565
+ const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
566
+ const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
567
+ const semantic = {
568
+ success: isDark ? "#4ade80" : "#047857",
569
+ // Green 400 / 700
570
+ warning: isDark ? "#fbbf24" : "#b45309",
571
+ // Amber 400 / 700
572
+ info: isDark ? "#60a5fa" : "#1d4ed8",
573
+ // Blue 400 / 700
574
+ destructive: isDark ? "#f87171" : "#b91c1c",
575
+ // Red 400 / 700
576
+ foreground: isDark ? "#050505" : "#ffffff"
577
+ };
578
+ const cssVars = [];
579
+ cssVars.push(`--primary: ${primary}`);
580
+ cssVars.push(`--primary-foreground: ${primaryForeground}`);
581
+ cssVars.push(`--success: ${semantic.success}`);
582
+ cssVars.push(`--success-foreground: ${semantic.foreground}`);
583
+ cssVars.push(`--warning: ${semantic.warning}`);
584
+ cssVars.push(`--warning-foreground: ${semantic.foreground}`);
585
+ cssVars.push(`--info: ${semantic.info}`);
586
+ cssVars.push(`--info-foreground: ${semantic.foreground}`);
587
+ cssVars.push(`--destructive: ${semantic.destructive}`);
588
+ cssVars.push(`--destructive-foreground: ${semantic.foreground}`);
589
+ const primaryRGB = hexToRgb(primary);
590
+ if (primaryRGB) {
591
+ cssVars.push(
592
+ `--ring: ${isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`}`
593
+ );
594
+ cssVars.push(`--xertica-primary: ${primary}`);
595
+ cssVars.push(
596
+ `--primary-light: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`
597
+ );
598
+ cssVars.push(`--primary-light-foreground: ${primary}`);
599
+ }
600
+ cssVars.push(`--radius: ${radius}rem`);
601
+ cssVars.push(`--chart-1: ${colors.chart1}`);
602
+ cssVars.push(`--chart-2: ${colors.chart2}`);
603
+ cssVars.push(`--chart-3: ${colors.chart3}`);
604
+ cssVars.push(`--chart-4: ${colors.chart4}`);
605
+ cssVars.push(`--chart-5: ${colors.chart5}`);
606
+ const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
607
+ const isSidebarLight = sidebarBg.toLowerCase() === "#ffffff" || sidebarBg.toLowerCase() === "#f3f4f6" || sidebarBg.toLowerCase() === "#fafafa";
608
+ const sidebarFg = isSidebarLight ? "#0F172A" : "#FFFFFF";
609
+ cssVars.push(`--sidebar: ${sidebarBg}`);
610
+ cssVars.push(`--sidebar-foreground: ${sidebarFg}`);
611
+ if (primaryRGB) {
612
+ if (isSidebarLight) {
613
+ cssVars.push(
614
+ `--sidebar-accent: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`
615
+ );
616
+ cssVars.push(`--sidebar-accent-foreground: ${primary}`);
617
+ cssVars.push(`--sidebar-border: rgba(0,0,0,0.1)`);
618
+ } else {
619
+ cssVars.push(`--sidebar-accent: rgba(255, 255, 255, 0.1)`);
620
+ cssVars.push(`--sidebar-accent-foreground: #FFFFFF`);
621
+ cssVars.push(`--sidebar-border: rgba(255,255,255,0.1)`);
622
+ }
623
+ cssVars.push(`--sidebar-ring: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
624
+ }
625
+ if (!isSidebarLight) {
626
+ cssVars.push(`--sidebar-primary: #FFFFFF`);
627
+ cssVars.push(`--sidebar-primary-foreground: ${primary}`);
628
+ } else {
629
+ cssVars.push(`--sidebar-primary: ${primary}`);
630
+ cssVars.push(`--sidebar-primary-foreground: ${primaryForeground}`);
631
+ }
632
+ cssVars.push(
633
+ `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
634
+ );
635
+ const darkSurfaceVars = [];
636
+ if (colors.darkBackground) {
637
+ darkSurfaceVars.push(`--background: ${colors.darkBackground}`);
638
+ darkSurfaceVars.push(`--card: ${colors.darkCard}`);
639
+ darkSurfaceVars.push(`--popover: ${colors.darkCard}`);
640
+ darkSurfaceVars.push(`--secondary: ${colors.darkMuted}`);
641
+ darkSurfaceVars.push(`--muted: ${colors.darkMuted}`);
642
+ darkSurfaceVars.push(`--accent: ${colors.darkMuted}`);
643
+ darkSurfaceVars.push(`--border: ${colors.darkBorder}`);
644
+ darkSurfaceVars.push(`--input: ${colors.darkMuted}`);
645
+ darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
646
+ }
647
+ cssVars.forEach((declaration) => {
648
+ const eqIdx = declaration.indexOf(":");
649
+ if (eqIdx === -1) return;
650
+ const prop = declaration.substring(0, eqIdx).trim();
651
+ const val = declaration.substring(eqIdx + 1).trim();
652
+ root.style.setProperty(prop, val);
653
+ });
654
+ const styleId = "xertica-brand-colors-injection";
655
+ let styleEl = document.getElementById(styleId);
656
+ if (!styleEl) {
657
+ styleEl = document.createElement("style");
658
+ styleEl.id = styleId;
659
+ document.head.appendChild(styleEl);
660
+ } else {
661
+ document.head.appendChild(styleEl);
662
+ }
663
+ const darkSurfaceBlock = darkSurfaceVars.length > 0 ? `
664
+ :root[data-mode='dark'], .dark {
665
+ ${darkSurfaceVars.join(";\n ")};
666
+ }` : "";
667
+ styleEl.innerHTML = darkSurfaceBlock.trim();
668
+ }, [colors, currentTheme, radius, useCustomTokens]);
669
+ useEffect(() => {
670
+ applyColors();
671
+ }, [applyColors]);
672
+ useEffect(() => {
673
+ if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
674
+ const root = document.documentElement;
675
+ const observer = new MutationObserver((mutations) => {
676
+ mutations.forEach((mutation) => {
677
+ if (mutation.type === "attributes" && mutation.attributeName === "class") {
678
+ applyColors();
679
+ }
680
+ });
681
+ });
682
+ observer.observe(root, { attributes: true, attributeFilter: ["class"] });
683
+ return () => observer.disconnect();
684
+ }, [applyColors]);
685
+ const setTheme = (themeId) => {
686
+ setCurrentTheme(themeId);
687
+ };
688
+ const setBrandColor = (colorKey, value) => {
689
+ setColors((prev) => ({
690
+ ...prev,
691
+ [colorKey]: value
692
+ }));
693
+ };
694
+ return /* @__PURE__ */ jsx(
695
+ BrandColorsContext.Provider,
696
+ {
697
+ value: {
698
+ colors,
699
+ currentTheme,
700
+ themes: colorThemes,
701
+ setTheme,
702
+ setBrandColor,
703
+ radius,
704
+ setRadius
705
+ },
706
+ children
707
+ }
708
+ );
709
+ };
710
+ const useBrandColors = () => {
711
+ const context = useContext(BrandColorsContext);
712
+ if (context === void 0) {
713
+ throw new Error("useBrandColors must be used within a BrandColorsProvider");
714
+ }
715
+ return context;
716
+ };
717
+
718
+ export { ApiKeyProvider as A, BrandColorsProvider as B, AssistenteProvider as a, useAssistente as b, useBrandColors as c, useApiKey as u };