xertica-ui 2.2.0 → 2.3.0

package/components/brand/xertica-orbe/index.ts

@@ -1 +1 @@
-export * from './XerticaOrbe';
+export * from './XerticaOrbe';

package/components/brand/xertica-orbe/xertica-orbe.stories.tsx

@@ -1,40 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { XerticaOrbe } from './XerticaOrbe';
-import React from 'react';
-
-const meta: Meta<typeof XerticaOrbe> = {
-  title: 'Brand/XerticaOrbe',
-  component: XerticaOrbe,
-  argTypes: {
-    size: { control: { type: 'range', min: 32, max: 256 } },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof XerticaOrbe>;
-
-export const Default: Story = {
-  args: {
-    size: 120,
-  },
-  render: args => (
-    <div className="flex items-center justify-center p-20 bg-slate-900 rounded-2xl">
-      <XerticaOrbe {...args} />
-    </div>
-  ),
-};
-
-export const Compact: Story = {
-  args: {
-    size: 48,
-  },
-  render: args => (
-    <div className="flex items-center gap-4 p-6 border rounded-xl bg-card">
-      <XerticaOrbe {...args} />
-      <div>
-        <h3 className="font-medium">Assistant Active</h3>
-        <p className="text-sm text-muted-foreground">The orbe is spinning at normal speed.</p>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { XerticaOrbe } from './XerticaOrbe';
+import React from 'react';
+
+const meta: Meta<typeof XerticaOrbe> = {
+  title: 'Brand/XerticaOrbe',
+  component: XerticaOrbe,
+  argTypes: {
+    size: { control: { type: 'range', min: 32, max: 256 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof XerticaOrbe>;
+
+export const Default: Story = {
+  args: {
+    size: 120,
+  },
+  render: args => (
+    <div className="flex items-center justify-center p-20 bg-slate-900 rounded-2xl">
+      <XerticaOrbe {...args} />
+    </div>
+  ),
+};
+
+export const Compact: Story = {
+  args: {
+    size: 48,
+  },
+  render: args => (
+    <div className="flex items-center gap-4 p-6 border rounded-xl bg-card">
+      <XerticaOrbe {...args} />
+      <div>
+        <h3 className="font-medium">Assistant Active</h3>
+        <p className="text-sm text-muted-foreground">The orbe is spinning at normal speed.</p>
+      </div>
+    </div>
+  ),
+};

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

@@ -1,19 +1,19 @@
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { XerticaOrbe } from './XerticaOrbe';
-import React from 'react';
-
-describe('XerticaOrbe', () => {
-  it('renders correctly', () => {
-    const { container } = render(<XerticaOrbe />);
-    // Check if container div is rendered (Lottie renders inside)
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('applies style with correct size', () => {
-    const { container } = render(<XerticaOrbe size={100} />);
-    const div = container.firstChild as HTMLElement;
-    expect(div.style.width).toBe('100px');
-    expect(div.style.height).toBe('100px');
-  });
-});
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { XerticaOrbe } from './XerticaOrbe';
+import React from 'react';
+
+describe('XerticaOrbe', () => {
+  it('renders correctly', () => {
+    const { container } = render(<XerticaOrbe />);
+    // Check if container div is rendered (Lottie renders inside)
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('applies style with correct size', () => {
+    const { container } = render(<XerticaOrbe size={100} />);
+    const div = container.firstChild as HTMLElement;
+    expect(div.style.width).toBe('100px');
+    expect(div.style.height).toBe('100px');
+  });
+});

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;
-  /** 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,
-  primaryColor,
-  useCustomTokens,
-  disableDarkMode,
-  availableLanguages,
-  defaultLanguage,
-}: XerticaProviderProps) {
-  return (
-    <ThemeProvider disableDarkMode={disableDarkMode}>
-      <BrandColorsProvider
-        defaultTheme={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;
+  /** 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,
+  primaryColor,
+  useCustomTokens,
+  disableDarkMode,
+  availableLanguages,
+  defaultLanguage,
+}: XerticaProviderProps) {
+  return (
+    <ThemeProvider disableDarkMode={disableDarkMode}>
+      <BrandColorsProvider
+        defaultTheme={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/index.ts

@@ -1 +1 @@
-export * from './XerticaProvider';
+export * from './XerticaProvider';

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,74 +1,74 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { XerticaProvider } from './XerticaProvider';
-import React from 'react';
-import { useApiKey } from '../../../contexts/ApiKeyContext';
-import { useAssistente } from '../../../contexts/AssistenteContext';
-import { useBrandColors } from '../../../contexts/BrandColorsContext';
-import { useLanguage } from '../../../contexts/LanguageContext';
-import { useLayout } from '../../../contexts/LayoutContext';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-function ProviderProbe() {
-  const layout = useLayout();
-  const theme = useTheme();
-  const language = useLanguage();
-  const brand = useBrandColors();
-  const api = useApiKey();
-  const assistant = useAssistente();
-
-  return (
-    <div
-      data-testid="provider-probe"
-      data-sidebar={layout.sidebarExpanded ? 'open' : 'closed'}
-      data-theme={theme.theme}
-      data-language={language.language}
-      data-brand={brand.currentTheme}
-      data-api={api.geminiApiKey}
-      data-conversation={assistant.conversaAtual}
-    />
-  );
-}
-
-describe('XerticaProvider', () => {
-  it('renders children correctly', () => {
-    render(
-      <XerticaProvider>
-        <div data-testid="provider-child">Child Content</div>
-      </XerticaProvider>
-    );
-
-    expect(screen.getByTestId('provider-child')).toBeInTheDocument();
-  });
-
-  it('renders global components like Toaster', () => {
-    const { container } = render(
-      <XerticaProvider>
-        <div>Content</div>
-      </XerticaProvider>
-    );
-
-    // Check for sonner's toaster container (it has a specific data attribute or class)
-    // Actually, sonner injects a [data-sonner-toaster] element
-    const toaster = container.querySelector('[data-sonner-toaster]');
-    expect(toaster).toBeDefined();
-  });
-
-  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>
-    );
-
-    const probe = screen.getByTestId('provider-probe');
-    expect(probe).toHaveAttribute('data-theme', 'light');
-    expect(probe).toHaveAttribute('data-language', 'pt-BR');
-    expect(probe).toHaveAttribute('data-api', 'test-gemini-key');
-    expect(probe).toHaveAttribute('data-conversation', '1');
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { XerticaProvider } from './XerticaProvider';
+import React from 'react';
+import { useApiKey } from '../../../contexts/ApiKeyContext';
+import { useAssistente } from '../../../contexts/AssistenteContext';
+import { useBrandColors } from '../../../contexts/BrandColorsContext';
+import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLayout } from '../../../contexts/LayoutContext';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+function ProviderProbe() {
+  const layout = useLayout();
+  const theme = useTheme();
+  const language = useLanguage();
+  const brand = useBrandColors();
+  const api = useApiKey();
+  const assistant = useAssistente();
+
+  return (
+    <div
+      data-testid="provider-probe"
+      data-sidebar={layout.sidebarExpanded ? 'open' : 'closed'}
+      data-theme={theme.theme}
+      data-language={language.language}
+      data-brand={brand.currentTheme}
+      data-api={api.geminiApiKey}
+      data-conversation={assistant.conversaAtual}
+    />
+  );
+}
+
+describe('XerticaProvider', () => {
+  it('renders children correctly', () => {
+    render(
+      <XerticaProvider>
+        <div data-testid="provider-child">Child Content</div>
+      </XerticaProvider>
+    );
+
+    expect(screen.getByTestId('provider-child')).toBeInTheDocument();
+  });
+
+  it('renders global components like Toaster', () => {
+    const { container } = render(
+      <XerticaProvider>
+        <div>Content</div>
+      </XerticaProvider>
+    );
+
+    // Check for sonner's toaster container (it has a specific data attribute or class)
+    // Actually, sonner injects a [data-sonner-toaster] element
+    const toaster = container.querySelector('[data-sonner-toaster]');
+    expect(toaster).toBeDefined();
+  });
+
+  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>
+    );
+
+    const probe = screen.getByTestId('provider-probe');
+    expect(probe).toHaveAttribute('data-theme', 'light');
+    expect(probe).toHaveAttribute('data-language', 'pt-BR');
+    expect(probe).toHaveAttribute('data-api', 'test-gemini-key');
+    expect(probe).toHaveAttribute('data-conversation', '1');
+  });
+});