xertica-ui 2.4.1 → 2.5.1

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 (53) hide show
  1. package/CHANGELOG.md +71 -0
  2. package/README.md +69 -2
  3. package/bin/cli.ts +14 -2
  4. package/bin/generate-tokens.ts +12 -12
  5. package/components/brand/xertica-provider/XerticaProvider.tsx +4 -1
  6. package/components/layout/sidebar/sidebar.stories.tsx +201 -0
  7. package/components/layout/sidebar/sidebar.tsx +86 -1
  8. package/components/pages/template-page/TemplatePage.stories.tsx +8 -15
  9. package/components/ui/chart/chart.test.tsx +1 -1
  10. package/components/ui/chart/chart.tsx +13 -6
  11. package/contexts/BrandColorsContext.tsx +39 -8
  12. package/contexts/theme-data.ts +51 -0
  13. package/dist/AssistantChart-BZTPJ5dP.cjs +3551 -0
  14. package/dist/AssistantChart-DMJJ_Amf.js +3383 -0
  15. package/dist/BrandColorsContext-BMRJ04Wf.js +718 -0
  16. package/dist/BrandColorsContext-BwY-b6M4.cjs +725 -0
  17. package/dist/VerifyEmailPage-CGIwmWrm.js +3296 -0
  18. package/dist/VerifyEmailPage-CpqqpLpo.cjs +3305 -0
  19. package/dist/XerticaProvider-CeS5G_n5.cjs +45 -0
  20. package/dist/XerticaProvider-ra2NciRq.js +43 -0
  21. package/dist/assistant.cjs.js +1 -1
  22. package/dist/assistant.es.js +1 -1
  23. package/dist/brand.cjs.js +1 -1
  24. package/dist/brand.es.js +1 -1
  25. package/dist/cli.js +59 -14
  26. package/dist/components/brand/xertica-provider/XerticaProvider.d.ts +3 -1
  27. package/dist/components/ui/chart/chart.d.ts +12 -3
  28. package/dist/contexts/theme-data.d.ts +4 -0
  29. package/dist/hooks.cjs.js +1 -1
  30. package/dist/hooks.es.js +1 -1
  31. package/dist/index.cjs.js +6 -6
  32. package/dist/index.es.js +6 -6
  33. package/dist/layout.cjs.js +1 -1
  34. package/dist/layout.es.js +1 -1
  35. package/dist/pages.cjs.js +1 -1
  36. package/dist/pages.es.js +1 -1
  37. package/dist/rich-text-editor-B2CKz7nx.cjs +2903 -0
  38. package/dist/rich-text-editor-DloeW0wc.js +2832 -0
  39. package/dist/sidebar-0ocFLSks.js +878 -0
  40. package/dist/sidebar-CeTMuzOx.cjs +881 -0
  41. package/dist/ui.cjs.js +2 -2
  42. package/dist/ui.es.js +2 -2
  43. package/dist/xertica-assistant-CyikE3N_.js +2173 -0
  44. package/dist/xertica-assistant-QFUnv5I2.cjs +2180 -0
  45. package/dist/xertica-ui.css +1 -1
  46. package/docs/components/sidebar.md +19 -2
  47. package/llms-compact.txt +30 -1
  48. package/llms.txt +1 -1
  49. package/package.json +2 -2
  50. package/styles/xertica/tokens.css +9 -9
  51. package/templates/guidelines/Guidelines.md +643 -355
  52. package/templates/package.json +2 -2
  53. package/templates/src/styles/xertica/tokens.css +9 -9
package/components/ui/chart/chart.tsx CHANGED
@@ -212,13 +212,19 @@ function ChartTooltipContent({
212
212
  color,
213
213
  nameKey,
214
214
  labelKey,
215
- }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
216
- React.ComponentProps<'div'> & {
215
+ }: React.ComponentProps<'div'> & {
216
+ active?: boolean;
217
+ payload?: RechartsPrimitive.TooltipPayload;
218
+ label?: React.ReactNode;
219
+ labelFormatter?: (label: React.ReactNode, payload: RechartsPrimitive.TooltipPayload) => React.ReactNode;
220
+ labelClassName?: string;
217
221
  hideLabel?: boolean;
218
222
  hideIndicator?: boolean;
219
223
  indicator?: 'line' | 'dot' | 'dashed';
220
224
  nameKey?: string;
221
225
  labelKey?: string;
226
+ color?: string;
227
+ formatter?: RechartsPrimitive.DefaultTooltipContentProps['formatter'];
222
228
  }) {
223
229
  const { config } = useChart();
224
230
 
@@ -270,7 +276,7 @@ function ChartTooltipContent({
270
276
 
271
277
  return (
272
278
  <div
273
- key={item.dataKey}
279
+ key={`${item.dataKey ?? index}`}
274
280
  className={cn(
275
281
  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
276
282
  indicator === 'dot' && 'items-center'
@@ -340,8 +346,9 @@ function ChartLegendContent({
340
346
  payload,
341
347
  verticalAlign = 'bottom',
342
348
  nameKey,
343
- }: React.ComponentProps<'div'> &
344
- Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
349
+ }: React.ComponentProps<'div'> & {
350
+ payload?: RechartsPrimitive.LegendPayload[];
351
+ verticalAlign?: 'top' | 'middle' | 'bottom';
345
352
  hideIcon?: boolean;
346
353
  nameKey?: string;
347
354
  }) {
@@ -1460,7 +1467,6 @@ function DonutBreakdownChart({
1460
1467
  innerRadius={innerRadius}
1461
1468
  outerRadius={outerRadius}
1462
1469
  paddingAngle={3}
1463
- activeIndex={activeIndex}
1464
1470
  onMouseEnter={(_, index) => setActiveIndex(index)}
1465
1471
  isAnimationActive
1466
1472
  animationDuration={600}
@@ -1822,6 +1828,7 @@ function PieMetricChart({
1822
1828
  label={
1823
1829
  showLabels
1824
1830
  ? ({ cx, cy, midAngle, innerRadius: ir, outerRadius: or, percent }) => {
1831
+ if (midAngle == null || percent == null) return null;
1825
1832
  const RADIAN = Math.PI / 180;
1826
1833
  const radius = Number(ir) + (Number(or) - Number(ir)) * 1.35;
1827
1834
  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
package/contexts/BrandColorsContext.tsx CHANGED
@@ -178,20 +178,51 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
178
178
  `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
179
179
  );
180
180
 
181
- // Inject into head as a style tag rather than inline on HTML element
182
- // Usamos prepend em vez de appendChild para garantir que a injeção seja
183
- // lida ANTES de qualquer arquivo CSS estático (como tokens.css), garantindo que
184
- // as modificações feitas pelo desenvolvedor em :root tenham prioridade natural de cascata.
181
+ // 7. Surface colors for dark mode (tinted toward the theme hue)
182
+ // Only applied when dark surface tokens exist on the theme.
183
+ const darkSurfaceVars: string[] = [];
184
+ if (colors.darkBackground) {
185
+ darkSurfaceVars.push(`--background: ${colors.darkBackground}`);
186
+ darkSurfaceVars.push(`--card: ${colors.darkCard}`);
187
+ darkSurfaceVars.push(`--popover: ${colors.darkCard}`);
188
+ darkSurfaceVars.push(`--secondary: ${colors.darkMuted}`);
189
+ darkSurfaceVars.push(`--muted: ${colors.darkMuted}`);
190
+ darkSurfaceVars.push(`--accent: ${colors.darkMuted}`);
191
+ darkSurfaceVars.push(`--border: ${colors.darkBorder}`);
192
+ darkSurfaceVars.push(`--input: ${colors.darkMuted}`);
193
+ darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
194
+ }
195
+
196
+ // Apply primary-related tokens directly as inline styles on <html>.
197
+ // Inline styles have the highest possible specificity and always win over
198
+ // any stylesheet rule, regardless of order or selector specificity.
199
+ cssVars.forEach(declaration => {
200
+ const eqIdx = declaration.indexOf(':');
201
+ if (eqIdx === -1) return;
202
+ const prop = declaration.substring(0, eqIdx).trim();
203
+ const val = declaration.substring(eqIdx + 1).trim();
204
+ root.style.setProperty(prop, val); // `root` is document.documentElement, declared at line 79
205
+ });
206
+
207
+ // Surface tokens (background, card, muted, etc.) are injected via a style
208
+ // tag appended last in <head> so they win the cascade for their selectors.
185
209
  const styleId = 'xertica-brand-colors-injection';
186
210
  let styleEl = document.getElementById(styleId);
187
211
  if (!styleEl) {
188
212
  styleEl = document.createElement('style');
189
213
  styleEl.id = styleId;
190
- document.head.prepend(styleEl);
214
+ document.head.appendChild(styleEl);
215
+ } else {
216
+ document.head.appendChild(styleEl);
191
217
  }
192
- styleEl.innerHTML = `:root {
193
- ${cssVars.join(';\n ')};
194
- }`;
218
+
219
+ const darkSurfaceBlock =
220
+ darkSurfaceVars.length > 0
221
+ ? `\n:root[data-mode='dark'], .dark {\n ${darkSurfaceVars.join(';\n ')};\n}`
222
+ : '';
223
+
224
+ // The style tag handles only the surface tokens that vary per theme in dark mode.
225
+ styleEl.innerHTML = darkSurfaceBlock.trim();
195
226
  }, [colors, currentTheme, radius, useCustomTokens]);
196
227
 
197
228
  // Aplicar cores quando elas mudarem
package/contexts/theme-data.ts CHANGED
@@ -12,6 +12,12 @@ export interface BrandColors {
12
12
  sidebarLight: string;
13
13
  sidebarDark: string;
14
14
 
15
+ // Dark Mode Surface Colors (tinted toward the theme hue)
16
+ darkBackground: string; // --background in dark
17
+ darkCard: string; // --card / --popover in dark
18
+ darkMuted: string; // --muted / --secondary / --accent in dark
19
+ darkBorder: string; // --border in dark
20
+
15
21
  // Gradients
16
22
  gradientStart: string;
17
23
  gradientEnd: string;
@@ -72,6 +78,11 @@ export const colorThemes: ColorTheme[] = [
72
78
  sidebarLight: '#2C275B', // Primary Color
73
79
  sidebarDark: '#1a1928', // Original Dark BG
74
80
 
81
+ darkBackground: '#05050d',
82
+ darkCard: '#0d0c16',
83
+ darkMuted: '#16151f',
84
+ darkBorder: '#252336',
85
+
75
86
  gradientStart: '#FDB0F2',
76
87
  gradientEnd: '#72CDFD',
77
88
  gradientStartDark: '#7B4A7A',
@@ -103,6 +114,11 @@ export const colorThemes: ColorTheme[] = [
103
114
  sidebarLight: '#18181B', // Primary Color
104
115
  sidebarDark: '#09090B',
105
116
 
117
+ darkBackground: '#05050d',
118
+ darkCard: '#0d0c16',
119
+ darkMuted: '#16151f',
120
+ darkBorder: '#252336',
121
+
106
122
  gradientStart: '#52525B',
107
123
  gradientEnd: '#D4D4D8',
108
124
  gradientStartDark: '#27272A',
@@ -134,6 +150,11 @@ export const colorThemes: ColorTheme[] = [
134
150
  sidebarLight: '#0F172A', // Primary Color
135
151
  sidebarDark: '#020617',
136
152
 
153
+ darkBackground: '#05050d',
154
+ darkCard: '#0d0c16',
155
+ darkMuted: '#16151f',
156
+ darkBorder: '#252336',
157
+
137
158
  gradientStart: '#475569',
138
159
  gradientEnd: '#94A3B8',
139
160
  gradientStartDark: '#1E293B',
@@ -165,6 +186,11 @@ export const colorThemes: ColorTheme[] = [
165
186
  sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
166
187
  sidebarDark: '#172554',
167
188
 
189
+ darkBackground: '#03050f',
190
+ darkCard: '#080d18',
191
+ darkMuted: '#0f1422',
192
+ darkBorder: '#1a2440',
193
+
168
194
  gradientStart: '#2563EB',
169
195
  gradientEnd: '#60A5FA',
170
196
  gradientStartDark: '#1D4ED8',
@@ -196,6 +222,11 @@ export const colorThemes: ColorTheme[] = [
196
222
  sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
197
223
  sidebarDark: '#2E1065',
198
224
 
225
+ darkBackground: '#07040f',
226
+ darkCard: '#0e0a18',
227
+ darkMuted: '#150f21',
228
+ darkBorder: '#221838',
229
+
199
230
  gradientStart: '#7C3AED',
200
231
  gradientEnd: '#A78BFA',
201
232
  gradientStartDark: '#5B21B6',
@@ -227,6 +258,11 @@ export const colorThemes: ColorTheme[] = [
227
258
  sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
228
259
  sidebarDark: '#881337',
229
260
 
261
+ darkBackground: '#0f0305',
262
+ darkCard: '#180709',
263
+ darkMuted: '#200c0f',
264
+ darkBorder: '#3a1018',
265
+
230
266
  gradientStart: '#E11D48',
231
267
  gradientEnd: '#FB7185',
232
268
  gradientStartDark: '#9F1239',
@@ -258,6 +294,11 @@ export const colorThemes: ColorTheme[] = [
258
294
  sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
259
295
  sidebarDark: '#064E3B',
260
296
 
297
+ darkBackground: '#030f08',
298
+ darkCard: '#07160c',
299
+ darkMuted: '#0c1e11',
300
+ darkBorder: '#143320',
301
+
261
302
  gradientStart: '#059669',
262
303
  gradientEnd: '#34D399',
263
304
  gradientStartDark: '#064E3B',
@@ -289,6 +330,11 @@ export const colorThemes: ColorTheme[] = [
289
330
  sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
290
331
  sidebarDark: '#78350F',
291
332
 
333
+ darkBackground: '#0f0a03',
334
+ darkCard: '#181107',
335
+ darkMuted: '#20190d',
336
+ darkBorder: '#382e14',
337
+
292
338
  gradientStart: '#D97706',
293
339
  gradientEnd: '#FBBF24',
294
340
  gradientStartDark: '#92400E',
@@ -320,6 +366,11 @@ export const colorThemes: ColorTheme[] = [
320
366
  sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
321
367
  sidebarDark: '#7C2D12',
322
368
 
369
+ darkBackground: '#0f0703',
370
+ darkCard: '#180e06',
371
+ darkMuted: '#20150a',
372
+ darkBorder: '#382512',
373
+
323
374
  gradientStart: '#EA580C',
324
375
  gradientEnd: '#FB923C',
325
376
  gradientStartDark: '#9A3412',