xertica-ui 2.5.2 → 2.6.0

package/components/brand/xertica-provider/XerticaProvider.tsx

@@ -1,112 +1,112 @@
-import React from 'react';
-import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
-import { AssistenteProvider } from '../../../contexts/AssistenteContext';
-import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
-import {
-  LanguageProvider,
-  type Language,
-  type LanguageDefinition,
-} from '../../../contexts/LanguageContext';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import { ThemeProvider } from '../../../contexts/ThemeContext';
-import { GoogleMapsLoaderProvider } from '../../ui/google-maps-loader';
-import { Toaster } from '../../ui/sonner';
-import { TooltipProvider } from '../../ui/tooltip';
-
-/**
- * Props for the XerticaProvider component.
- */
-interface XerticaProviderProps {
-  /** The application content to be wrapped by the providers */
-  children: React.ReactNode;
-  /** Optional Gemini API Key for AI features */
-  apiKey?: string;
-  /** Optional Google Maps API Key for map features */
-  googleMapsApiKey?: string;
-  /** Default theme name for branding ('default', 'dark', etc.) */
-  defaultBrandTheme?: string;
-  /** Color theme ID (e.g. 'xertica-original', 'blue', 'rose') — selects a full ColorTheme preset */
-  defaultColorTheme?: string;
-  /** Primary brand color hex value */
-  primaryColor?: string;
-  /** Whether to use custom theme tokens from CSS */
-  useCustomTokens?: boolean;
-  /** Whether to completely disable dark mode support */
-  disableDarkMode?: boolean;
-  /**
-   * List of languages available to this app. Defaults to the built-in
-   * `pt-BR`, `en`, and `es`. Pass a single-element array for a monolingual
-   * app (the `LanguageSelector` will auto-hide). Pass extra entries with
-   * `resources` to add new locales without editing `i18n.ts`.
-   *
-   * @example
-   * ```tsx
-   * // Monolingual English app — no language picker rendered
-   * <XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
-   * ```
-   *
-   * @example
-   * ```tsx
-   * // Add French alongside built-in locales
-   * import fr from './locales/fr.json';
-   * import { DEFAULT_LANGUAGES } from 'xertica-ui';
-   *
-   * <XerticaProvider availableLanguages={[
-   *   ...DEFAULT_LANGUAGES,
-   *   { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
-   * ]}>
-   * ```
-   */
-  availableLanguages?: LanguageDefinition[];
-  /** Override the default language. Falls back to the first item in `availableLanguages`. */
-  defaultLanguage?: Language;
-}
-
-/**
- * Universal Context Provider for Xertica UI.
- *
- * @description
- * This component aggregates all necessary context providers. It should be placed at the
- * root of your application, ideally inside the App component.
- */
-export function XerticaProvider({
-  children,
-  apiKey,
-  googleMapsApiKey,
-  defaultBrandTheme,
-  defaultColorTheme,
-  primaryColor,
-  useCustomTokens,
-  disableDarkMode,
-  availableLanguages,
-  defaultLanguage,
-}: XerticaProviderProps) {
-  return (
-    <ThemeProvider disableDarkMode={disableDarkMode}>
-      <BrandColorsProvider
-        defaultTheme={defaultColorTheme || defaultBrandTheme}
-        primaryColor={primaryColor}
-        useCustomTokens={useCustomTokens}
-      >
-        <LanguageProvider availableLanguages={availableLanguages} defaultLanguage={defaultLanguage}>
-          <ApiKeyProvider
-            initialApiKey={apiKey}
-            initialGeminiApiKey={apiKey}
-            initialGoogleMapsApiKey={googleMapsApiKey}
-          >
-            <GoogleMapsLoaderProvider apiKey={googleMapsApiKey}>
-              <AssistenteProvider>
-                <LayoutProvider>
-                  <TooltipProvider>
-                    {children}
-                    <Toaster position="top-right" richColors />
-                  </TooltipProvider>
-                </LayoutProvider>
-              </AssistenteProvider>
-            </GoogleMapsLoaderProvider>
-          </ApiKeyProvider>
-        </LanguageProvider>
-      </BrandColorsProvider>
-    </ThemeProvider>
-  );
-}
+import React from 'react';
+import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
+import { AssistenteProvider } from '../../../contexts/AssistenteContext';
+import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
+import {
+  LanguageProvider,
+  type Language,
+  type LanguageDefinition,
+} from '../../../contexts/LanguageContext';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import { ThemeProvider } from '../../../contexts/ThemeContext';
+import { GoogleMapsLoaderProvider } from '../../ui/google-maps-loader';
+import { Toaster } from '../../ui/sonner';
+import { TooltipProvider } from '../../ui/tooltip';
+
+/**
+ * Props for the XerticaProvider component.
+ */
+interface XerticaProviderProps {
+  /** The application content to be wrapped by the providers */
+  children: React.ReactNode;
+  /** Optional Gemini API Key for AI features */
+  apiKey?: string;
+  /** Optional Google Maps API Key for map features */
+  googleMapsApiKey?: string;
+  /** Default theme name for branding ('default', 'dark', etc.) */
+  defaultBrandTheme?: string;
+  /** Color theme ID (e.g. 'xertica-original', 'blue', 'rose') — selects a full ColorTheme preset */
+  defaultColorTheme?: string;
+  /** Primary brand color hex value */
+  primaryColor?: string;
+  /** Whether to use custom theme tokens from CSS */
+  useCustomTokens?: boolean;
+  /** Whether to completely disable dark mode support */
+  disableDarkMode?: boolean;
+  /**
+   * List of languages available to this app. Defaults to the built-in
+   * `pt-BR`, `en`, and `es`. Pass a single-element array for a monolingual
+   * app (the `LanguageSelector` will auto-hide). Pass extra entries with
+   * `resources` to add new locales without editing `i18n.ts`.
+   *
+   * @example
+   * ```tsx
+   * // Monolingual English app — no language picker rendered
+   * <XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // Add French alongside built-in locales
+   * import fr from './locales/fr.json';
+   * import { DEFAULT_LANGUAGES } from 'xertica-ui';
+   *
+   * <XerticaProvider availableLanguages={[
+   *   ...DEFAULT_LANGUAGES,
+   *   { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
+   * ]}>
+   * ```
+   */
+  availableLanguages?: LanguageDefinition[];
+  /** Override the default language. Falls back to the first item in `availableLanguages`. */
+  defaultLanguage?: Language;
+}
+
+/**
+ * Universal Context Provider for Xertica UI.
+ *
+ * @description
+ * This component aggregates all necessary context providers. It should be placed at the
+ * root of your application, ideally inside the App component.
+ */
+export function XerticaProvider({
+  children,
+  apiKey,
+  googleMapsApiKey,
+  defaultBrandTheme,
+  defaultColorTheme,
+  primaryColor,
+  useCustomTokens,
+  disableDarkMode,
+  availableLanguages,
+  defaultLanguage,
+}: XerticaProviderProps) {
+  return (
+    <ThemeProvider disableDarkMode={disableDarkMode}>
+      <BrandColorsProvider
+        defaultTheme={defaultColorTheme || defaultBrandTheme}
+        primaryColor={primaryColor}
+        useCustomTokens={useCustomTokens}
+      >
+        <LanguageProvider availableLanguages={availableLanguages} defaultLanguage={defaultLanguage}>
+          <ApiKeyProvider
+            initialApiKey={apiKey}
+            initialGeminiApiKey={apiKey}
+            initialGoogleMapsApiKey={googleMapsApiKey}
+          >
+            <GoogleMapsLoaderProvider apiKey={googleMapsApiKey}>
+              <AssistenteProvider>
+                <LayoutProvider>
+                  <TooltipProvider>
+                    {children}
+                    <Toaster position="top-right" richColors />
+                  </TooltipProvider>
+                </LayoutProvider>
+              </AssistenteProvider>
+            </GoogleMapsLoaderProvider>
+          </ApiKeyProvider>
+        </LanguageProvider>
+      </BrandColorsProvider>
+    </ThemeProvider>
+  );
+}

package/components/brand/xertica-provider/xertica-provider.mdx

@@ -1,61 +1,61 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="System/XerticaProvider" />
-
-<Title>XerticaProvider</Title>
-<Subtitle>The recommended root wrapper for shared Xertica UI services.</Subtitle>
-
----
-
-## Overview
-
-The `XerticaProvider` orchestrates the shared services used by complete applications: theme, brand colors, language, API keys, assistant state, layout, tooltips, Google Maps loading, and toast notifications.
-
-Most components have local fallbacks and can render without it, but app shells should still place it at the root so state is synchronized across layout, assistant, maps, theme, and notifications.
-
-```tsx
-import { XerticaProvider } from 'xertica-ui/brand';
-import 'xertica-ui/style.css';
-
-function App() {
-  return (
-    <XerticaProvider>
-      <YourAppContent />
-    </XerticaProvider>
-  );
-}
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | **Required** | The application content to be wrapped by all providers. |
-| `googleMapsApiKey` | `string` | - | Initial Google Maps JavaScript API key. |
-| `apiKey` | `string` | - | Initial Gemini / AI service API key forwarded to `ApiKeyProvider`. |
-| `defaultBrandTheme` | `string` | - | Initial brand color theme id forwarded to `BrandColorsProvider`. |
-| `primaryColor` | `string` | - | Hex color override for the primary brand token. |
-| `useCustomTokens` | `boolean` | `false` | Skips runtime brand token injection when the host app owns tokens. |
-| `disableDarkMode` | `boolean` | `false` | Forces light mode and disables dark-mode toggling from the theme provider. |
-
----
-
-## What It Provides
-
-1. **Theme, Language, Brand, and API Key Contexts**: Centralizes app-level preferences and service keys.
-2. **Assistant Context**: Provides shared assistant conversation state.
-3. **Layout Context**: Enables `useLayout()` for synchronized sidebar and assistant state.
-4. **Tooltip Provider**: Standardizes Radix tooltip behavior across the app.
-5. **Google Maps Loader**: Handles asynchronous loading of the Maps API.
-6. **Toast Notifications**: Injects the `Sonner` toaster into the DOM.
-
----
-
-## AI Best Practices
-
-> [!CAUTION]
-> - **Recommended App Wrapper** - Components should render independently when possible, but apps should still use this provider once at the root for synchronized state and shared services.
-> - **Environment Safety** - Never hardcode API keys. Always use environment variables when passing them to the provider.
-> - **Toaster Injection** - The provider automatically injects the `Sonner` toaster. Do not add another `<Toaster />` in your app root unless you specifically need to override it.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="System/XerticaProvider" />
+
+<Title>XerticaProvider</Title>
+<Subtitle>The recommended root wrapper for shared Xertica UI services.</Subtitle>
+
+---
+
+## Overview
+
+The `XerticaProvider` orchestrates the shared services used by complete applications: theme, brand colors, language, API keys, assistant state, layout, tooltips, Google Maps loading, and toast notifications.
+
+Most components have local fallbacks and can render without it, but app shells should still place it at the root so state is synchronized across layout, assistant, maps, theme, and notifications.
+
+```tsx
+import { XerticaProvider } from 'xertica-ui/brand';
+import 'xertica-ui/style.css';
+
+function App() {
+  return (
+    <XerticaProvider>
+      <YourAppContent />
+    </XerticaProvider>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | **Required** | The application content to be wrapped by all providers. |
+| `googleMapsApiKey` | `string` | - | Initial Google Maps JavaScript API key. |
+| `apiKey` | `string` | - | Initial Gemini / AI service API key forwarded to `ApiKeyProvider`. |
+| `defaultBrandTheme` | `string` | - | Initial brand color theme id forwarded to `BrandColorsProvider`. |
+| `primaryColor` | `string` | - | Hex color override for the primary brand token. |
+| `useCustomTokens` | `boolean` | `false` | Skips runtime brand token injection when the host app owns tokens. |
+| `disableDarkMode` | `boolean` | `false` | Forces light mode and disables dark-mode toggling from the theme provider. |
+
+---
+
+## What It Provides
+
+1. **Theme, Language, Brand, and API Key Contexts**: Centralizes app-level preferences and service keys.
+2. **Assistant Context**: Provides shared assistant conversation state.
+3. **Layout Context**: Enables `useLayout()` for synchronized sidebar and assistant state.
+4. **Tooltip Provider**: Standardizes Radix tooltip behavior across the app.
+5. **Google Maps Loader**: Handles asynchronous loading of the Maps API.
+6. **Toast Notifications**: Injects the `Sonner` toaster into the DOM.
+
+---
+
+## AI Best Practices
+
+> [!CAUTION]
+> - **Recommended App Wrapper** - Components should render independently when possible, but apps should still use this provider once at the root for synchronized state and shared services.
+> - **Environment Safety** - Never hardcode API keys. Always use environment variables when passing them to the provider.
+> - **Toaster Injection** - The provider automatically injects the `Sonner` toaster. Do not add another `<Toaster />` in your app root unless you specifically need to override it.

package/components/brand/xertica-provider/xertica-provider.test.tsx

@@ -1,7 +1,13 @@
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { describe, it, expect } from 'vitest';
 import { XerticaProvider } from './XerticaProvider';
 import React from 'react';
+
+function withQueryClient(children: React.ReactNode) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
 import { useApiKey } from '../../../contexts/ApiKeyContext';
 import { useAssistente } from '../../../contexts/AssistenteContext';
 import { useBrandColors } from '../../../contexts/BrandColorsContext';
@@ -33,9 +39,11 @@ function ProviderProbe() {
 describe('XerticaProvider', () => {
   it('renders children correctly', () => {
     render(
-      <XerticaProvider>
-        <div data-testid="provider-child">Child Content</div>
-      </XerticaProvider>
+      withQueryClient(
+        <XerticaProvider>
+          <div data-testid="provider-child">Child Content</div>
+        </XerticaProvider>
+      )
     );
 
     expect(screen.getByTestId('provider-child')).toBeInTheDocument();
@@ -43,9 +51,11 @@ describe('XerticaProvider', () => {
 
   it('renders global components like Toaster', () => {
     const { container } = render(
-      <XerticaProvider>
-        <div>Content</div>
-      </XerticaProvider>
+      withQueryClient(
+        <XerticaProvider>
+          <div>Content</div>
+        </XerticaProvider>
+      )
     );
 
     // Check for sonner's toaster container (it has a specific data attribute or class)
@@ -56,13 +66,15 @@ describe('XerticaProvider', () => {
 
   it('composes all public providers and forwards initial keys/theme props', () => {
     render(
-      <XerticaProvider
-        apiKey="test-gemini-key"
-        googleMapsApiKey="test-maps-key"
-        defaultBrandTheme="xertica-original"
-      >
-        <ProviderProbe />
-      </XerticaProvider>
+      withQueryClient(
+        <XerticaProvider
+          apiKey="test-gemini-key"
+          googleMapsApiKey="test-maps-key"
+          defaultBrandTheme="xertica-original"
+        >
+          <ProviderProbe />
+        </XerticaProvider>
+      )
     );
 
     const probe = screen.getByTestId('provider-probe');

package/components/brand/xertica-xlogo/xertica-xlogo.mdx

@@ -1,55 +1,55 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Brand/XerticaXLogo" />
-
-<Title>XerticaXLogo</Title>
-<Subtitle>Compact X-symbol mark for favicons, avatars, and collapsed sidebar slots.</Subtitle>
-
----
-
-## Overview
-
-`XerticaXLogo` renders only the X-symbol portion of the Xertica identity. It shares the same prop API as `XerticaLogo` and is the preferred choice wherever horizontal space is constrained.
-
-```tsx
-import { XerticaXLogo } from 'xertica-ui/brand';
-
-<XerticaXLogo className="h-8 w-8" />
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `variant` | `'default' \| 'white' \| 'theme'` | `'default'` | Color variant. `default` uses `var(--primary)`, `white` forces white fill, `theme` inherits `currentColor`. |
-| `color` | `string` | — | Direct color override. Overrides `variant`. |
-| `className` | `string` | `'w-auto h-8'` | Additional CSS classes applied to the SVG element. |
-
----
-
-## Usage Examples
-
-```tsx
-// Default — primary color
-<XerticaXLogo className="h-10 w-10" />
-
-// On a dark background
-<XerticaXLogo variant="white" className="h-10 w-10" />
-
-// Inherits current text color
-<XerticaXLogo variant="theme" className="h-10 w-10 text-blue-600" />
-
-// Collapsed sidebar icon slot
-<XerticaXLogo className="h-6 w-6 shrink-0" />
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Square sizing** — Unlike the full logo, set both width and height to the same value (e.g., `h-10 w-10`) since the X symbol has a near-square aspect ratio (viewBox `0 0 258 282`).
-> - **Favicon** — Export as a PNG at 32×32 and 192×192 for web manifest icons; do not use the SVG component directly in `<link rel="icon">`.
-> - **Collapsed sidebar** — Replace the full `XerticaLogo` with `XerticaXLogo` when `sidebarExpanded === false` to avoid clipping.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand/XerticaXLogo" />
+
+<Title>XerticaXLogo</Title>
+<Subtitle>Compact X-symbol mark for favicons, avatars, and collapsed sidebar slots.</Subtitle>
+
+---
+
+## Overview
+
+`XerticaXLogo` renders only the X-symbol portion of the Xertica identity. It shares the same prop API as `XerticaLogo` and is the preferred choice wherever horizontal space is constrained.
+
+```tsx
+import { XerticaXLogo } from 'xertica-ui/brand';
+
+<XerticaXLogo className="h-8 w-8" />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'white' \| 'theme'` | `'default'` | Color variant. `default` uses `var(--primary)`, `white` forces white fill, `theme` inherits `currentColor`. |
+| `color` | `string` | — | Direct color override. Overrides `variant`. |
+| `className` | `string` | `'w-auto h-8'` | Additional CSS classes applied to the SVG element. |
+
+---
+
+## Usage Examples
+
+```tsx
+// Default — primary color
+<XerticaXLogo className="h-10 w-10" />
+
+// On a dark background
+<XerticaXLogo variant="white" className="h-10 w-10" />
+
+// Inherits current text color
+<XerticaXLogo variant="theme" className="h-10 w-10 text-blue-600" />
+
+// Collapsed sidebar icon slot
+<XerticaXLogo className="h-6 w-6 shrink-0" />
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Square sizing** — Unlike the full logo, set both width and height to the same value (e.g., `h-10 w-10`) since the X symbol has a near-square aspect ratio (viewBox `0 0 258 282`).
+> - **Favicon** — Export as a PNG at 32×32 and 192×192 for web manifest icons; do not use the SVG component directly in `<link rel="icon">`.
+> - **Collapsed sidebar** — Replace the full `XerticaLogo` with `XerticaXLogo` when `sidebarExpanded === false` to avoid clipping.

package/components/examples/DrawingMapExample.tsx

@@ -547,10 +547,7 @@ export function DrawingMapExample({ apiKey }: DrawingMapExampleProps) {
               <DialogDescription>Copie os dados das formas desenhadas abaixo.</DialogDescription>
             </DialogHeader>
             <div className="relative mt-2">
-              <pre
-                className="p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono"
-                data-custom-scrollbar
-              >
+              <pre className="p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
                 {savedData}
               </pre>
             </div>