xertica-ui 2.5.1 → 2.5.2

package/components/brand/language-selector/language-selector.test.tsx

@@ -1,101 +1,101 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { LanguageSelector } from './LanguageSelector';
-import React from 'react';
-
-// Default mock — three-language app (matches DEFAULT_LANGUAGES)
-const defaultLanguages = [
-  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
-  { code: 'en', label: 'English', shortLabel: 'EN' },
-  { code: 'es', label: 'Español', shortLabel: 'ES' },
-];
-
-const useLanguageMock = vi.fn(() => ({
-  language: 'pt-BR',
-  setLanguage: vi.fn(),
-  availableLanguages: defaultLanguages,
-  isMonolingual: false,
-}));
-
-vi.mock('../../../contexts/LanguageContext', () => ({
-  useLanguage: () => useLanguageMock(),
-}));
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string) => {
-      const map: Record<string, string> = {
-        'languageSelector.label': 'Selecionar idioma',
-        'languageSelector.placeholder': 'Idioma',
-        'languageSelector.ptBR': 'Português (BR)',
-        'languageSelector.en': 'English',
-        'languageSelector.es': 'Español',
-      };
-      return map[key] ?? fallback ?? key;
-    },
-  }),
-}));
-
-describe('LanguageSelector', () => {
-  beforeEach(() => {
-    // Reset to default three-language behavior between tests
-    useLanguageMock.mockReturnValue({
-      language: 'pt-BR',
-      setLanguage: vi.fn(),
-      availableLanguages: defaultLanguages,
-      isMonolingual: false,
-    });
-  });
-
-  it('renders with current language from context', () => {
-    render(<LanguageSelector />);
-    expect(screen.getByText('Português (BR)')).toBeInTheDocument();
-  });
-
-  it('renders the globe icon by default', () => {
-    render(<LanguageSelector />);
-    // Globe icon is rendered as SVG
-    expect(document.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('applies the aria-label from i18n', () => {
-    render(<LanguageSelector />);
-    expect(screen.getByLabelText('Selecionar idioma')).toBeInTheDocument();
-  });
-
-  it('renders nothing when monolingual (default behavior)', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'en',
-      setLanguage: vi.fn(),
-      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
-      isMonolingual: true,
-    });
-    const { container } = render(<LanguageSelector />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders even when monolingual if showWhenMonolingual is true', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'en',
-      setLanguage: vi.fn(),
-      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
-      isMonolingual: true,
-    });
-    render(<LanguageSelector showWhenMonolingual />);
-    expect(screen.getByText('English')).toBeInTheDocument();
-  });
-
-  it('shows custom languages added via availableLanguages', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'fr',
-      setLanguage: vi.fn(),
-      availableLanguages: [
-        ...defaultLanguages,
-        { code: 'fr', label: 'Français', shortLabel: 'FR' },
-      ],
-      isMonolingual: false,
-    });
-    render(<LanguageSelector />);
-    expect(screen.getByText('Français')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { LanguageSelector } from './LanguageSelector';
+import React from 'react';
+
+// Default mock — three-language app (matches DEFAULT_LANGUAGES)
+const defaultLanguages = [
+  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
+  { code: 'en', label: 'English', shortLabel: 'EN' },
+  { code: 'es', label: 'Español', shortLabel: 'ES' },
+];
+
+const useLanguageMock = vi.fn(() => ({
+  language: 'pt-BR',
+  setLanguage: vi.fn(),
+  availableLanguages: defaultLanguages,
+  isMonolingual: false,
+}));
+
+vi.mock('../../../contexts/LanguageContext', () => ({
+  useLanguage: () => useLanguageMock(),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => {
+      const map: Record<string, string> = {
+        'languageSelector.label': 'Selecionar idioma',
+        'languageSelector.placeholder': 'Idioma',
+        'languageSelector.ptBR': 'Português (BR)',
+        'languageSelector.en': 'English',
+        'languageSelector.es': 'Español',
+      };
+      return map[key] ?? fallback ?? key;
+    },
+  }),
+}));
+
+describe('LanguageSelector', () => {
+  beforeEach(() => {
+    // Reset to default three-language behavior between tests
+    useLanguageMock.mockReturnValue({
+      language: 'pt-BR',
+      setLanguage: vi.fn(),
+      availableLanguages: defaultLanguages,
+      isMonolingual: false,
+    });
+  });
+
+  it('renders with current language from context', () => {
+    render(<LanguageSelector />);
+    expect(screen.getByText('Português (BR)')).toBeInTheDocument();
+  });
+
+  it('renders the globe icon by default', () => {
+    render(<LanguageSelector />);
+    // Globe icon is rendered as SVG
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('applies the aria-label from i18n', () => {
+    render(<LanguageSelector />);
+    expect(screen.getByLabelText('Selecionar idioma')).toBeInTheDocument();
+  });
+
+  it('renders nothing when monolingual (default behavior)', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'en',
+      setLanguage: vi.fn(),
+      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
+      isMonolingual: true,
+    });
+    const { container } = render(<LanguageSelector />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders even when monolingual if showWhenMonolingual is true', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'en',
+      setLanguage: vi.fn(),
+      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
+      isMonolingual: true,
+    });
+    render(<LanguageSelector showWhenMonolingual />);
+    expect(screen.getByText('English')).toBeInTheDocument();
+  });
+
+  it('shows custom languages added via availableLanguages', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'fr',
+      setLanguage: vi.fn(),
+      availableLanguages: [
+        ...defaultLanguages,
+        { code: 'fr', label: 'Français', shortLabel: 'FR' },
+      ],
+      isMonolingual: false,
+    });
+    render(<LanguageSelector />);
+    expect(screen.getByText('Français')).toBeInTheDocument();
+  });
+});

package/components/brand/theme-toggle/ThemeToggle.tsx

@@ -1,74 +1,74 @@
-import React from 'react';
-import { Sun, Moon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../ui/button';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-interface ThemeToggleProps {
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'outline' | 'ghost';
-  className?: string;
-  showLabel?: boolean;
-}
-
-export function ThemeToggle({
-  size = 'md',
-  variant = 'ghost',
-  className = '',
-  showLabel = false,
-}: ThemeToggleProps) {
-  const { isDark, toggleTheme, disableDarkMode } = useTheme();
-  const { t } = useTranslation();
-
-  if (disableDarkMode) {
-    return null;
-  }
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-8 w-8 p-0';
-      case 'lg':
-        return 'h-12 w-12 p-0';
-      default:
-        return 'h-9 w-9 p-0';
-    }
-  };
-
-  const getIconSize = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-3 w-3';
-      case 'lg':
-        return 'h-6 w-6';
-      default:
-        return 'h-4 w-4';
-    }
-  };
-
-  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
-
-  return (
-    <Button
-      variant={variant}
-      onClick={toggleTheme}
-      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
-      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-    >
-      {isDark ? (
-        <>
-          <Sun
-            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
-          />
-          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
-        </>
-      ) : (
-        <>
-          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
-          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
-        </>
-      )}
-    </Button>
-  );
-}
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../ui/button';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+interface ThemeToggleProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({
+  size = 'md',
+  variant = 'ghost',
+  className = '',
+  showLabel = false,
+}: ThemeToggleProps) {
+  const { isDark, toggleTheme, disableDarkMode } = useTheme();
+  const { t } = useTranslation();
+
+  if (disableDarkMode) {
+    return null;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-8 w-8 p-0';
+      case 'lg':
+        return 'h-12 w-12 p-0';
+      default:
+        return 'h-9 w-9 p-0';
+    }
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-3 w-3';
+      case 'lg':
+        return 'h-6 w-6';
+      default:
+        return 'h-4 w-4';
+    }
+  };
+
+  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
+
+  return (
+    <Button
+      variant={variant}
+      onClick={toggleTheme}
+      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
+      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+    >
+      {isDark ? (
+        <>
+          <Sun
+            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
+          />
+          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
+        </>
+      ) : (
+        <>
+          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
+          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
+        </>
+      )}
+    </Button>
+  );
+}

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/index.ts

@@ -1,86 +1,86 @@
-/**
- * Xertica UI Library Entry Point
- *
- * @description
- * This file exports all public components, contexts, and utilities of the Xertica UI library.
- * Consumers should import from the root of the package.
- */
-import '../styles/globals.css';
-
-// Xertica UI Styles should be imported by the consumer
-// ============================================================================
-// Xertica Assistant Exports
-// ============================================================================
-
-export { XerticaAssistant } from './assistant/xertica-assistant/xertica-assistant';
-export { XerticaProvider } from './brand/xertica-provider';
-export type {
-  XerticaAssistantProps,
-  Message,
-  Conversation,
-  Suggestion,
-  SearchResult,
-  SearchSource,
-  SearchCommand,
-  MessageType,
-  AttachmentType,
-  SearchResultType,
-  AssistantMode,
-  AssistantTab,
-} from './assistant/xertica-assistant/xertica-assistant';
-
-// ============================================================================
-// Page Components
-// ============================================================================
-
-export * from './pages';
-
-// UI Components - All available via /components/ui/index.ts
-export * from './ui';
-
-// Block Components - High-level composed patterns
-export * from './blocks';
-
-// Utility Components (used by XerticaAssistant)
-export { CodeBlock } from './assistant/code-block';
-export { MarkdownMessage } from './assistant/markdown-message';
-export { ModernChatInput } from './assistant/modern-chat-input';
-export { FormattedDocument } from './assistant/formatted-document';
-
-// Branding
-export { XerticaLogo } from './brand/xertica-logo';
-export { XerticaXLogo } from './brand/xertica-xlogo';
-export { XerticaOrbe } from './brand/xertica-orbe';
-
-// Utility
-export { ImageWithFallback } from './figma/ImageWithFallback';
-
-// Layout
-export { Sidebar } from './layout/sidebar';
-export { ThemeToggle } from './brand/theme-toggle';
-export { LanguageSelector } from './brand/language-selector';
-
-// State Management & Contexts
-export * from '../contexts/LayoutContext';
-
-// Language / i18n
-export { useLanguage, LanguageProvider, DEFAULT_LANGUAGES } from '../contexts/LanguageContext';
-export type {
-  Language,
-  LanguageDefinition,
-  LanguageProviderProps,
-} from '../contexts/LanguageContext';
-export { default as i18n, registerLanguageResource } from '../i18n';
-
-// Layout & Common Components
-export { Header } from './layout/header';
-export type { HeaderProps, BreadcrumbType as HeaderBreadcrumbType } from './layout/header';
-
-// Media Components
-export { VideoPlayer } from './media/video-player/VideoPlayer';
-export { AudioPlayer } from './media/audio-player/AudioPlayer';
-export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
-// PodcastPlayer was consolidated into AudioPlayer via colorVariant="primary" prop
-
-// Demo utilities (for templates)
-export { gerarResposta, gerarResposta as generateDemoResponse } from './shared/assistant-utils';
+/**
+ * Xertica UI Library Entry Point
+ *
+ * @description
+ * This file exports all public components, contexts, and utilities of the Xertica UI library.
+ * Consumers should import from the root of the package.
+ */
+import '../styles/globals.css';
+
+// Xertica UI Styles should be imported by the consumer
+// ============================================================================
+// Xertica Assistant Exports
+// ============================================================================
+
+export { XerticaAssistant } from './assistant/xertica-assistant/xertica-assistant';
+export { XerticaProvider } from './brand/xertica-provider';
+export type {
+  XerticaAssistantProps,
+  Message,
+  Conversation,
+  Suggestion,
+  SearchResult,
+  SearchSource,
+  SearchCommand,
+  MessageType,
+  AttachmentType,
+  SearchResultType,
+  AssistantMode,
+  AssistantTab,
+} from './assistant/xertica-assistant/xertica-assistant';
+
+// ============================================================================
+// Page Components
+// ============================================================================
+
+export * from './pages';
+
+// UI Components - All available via /components/ui/index.ts
+export * from './ui';
+
+// Block Components - High-level composed patterns
+export * from './blocks';
+
+// Utility Components (used by XerticaAssistant)
+export { CodeBlock } from './assistant/code-block';
+export { MarkdownMessage } from './assistant/markdown-message';
+export { ModernChatInput } from './assistant/modern-chat-input';
+export { FormattedDocument } from './assistant/formatted-document';
+
+// Branding
+export { XerticaLogo } from './brand/xertica-logo';
+export { XerticaXLogo } from './brand/xertica-xlogo';
+export { XerticaOrbe } from './brand/xertica-orbe';
+
+// Utility
+export { ImageWithFallback } from './figma/ImageWithFallback';
+
+// Layout
+export { Sidebar } from './layout/sidebar';
+export { ThemeToggle } from './brand/theme-toggle';
+export { LanguageSelector } from './brand/language-selector';
+
+// State Management & Contexts
+export * from '../contexts/LayoutContext';
+
+// Language / i18n
+export { useLanguage, LanguageProvider, DEFAULT_LANGUAGES } from '../contexts/LanguageContext';
+export type {
+  Language,
+  LanguageDefinition,
+  LanguageProviderProps,
+} from '../contexts/LanguageContext';
+export { default as i18n, registerLanguageResource } from '../i18n';
+
+// Layout & Common Components
+export { Header } from './layout/header';
+export type { HeaderProps, BreadcrumbType as HeaderBreadcrumbType } from './layout/header';
+
+// Media Components
+export { VideoPlayer } from './media/video-player/VideoPlayer';
+export { AudioPlayer } from './media/audio-player/AudioPlayer';
+export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
+// PodcastPlayer was consolidated into AudioPlayer via colorVariant="primary" prop
+
+// Demo utilities (for templates)
+export { gerarResposta, gerarResposta as generateDemoResponse } from './shared/assistant-utils';

package/components/layout/sidebar/sidebar.mdx

@@ -76,7 +76,7 @@ The expansion state is automatically persisted in a cookie (`sidebar_state`), en
 The Sidebar should ideally be synchronized with the `useLayout()` hook to ensure the main application container adjusts its padding accordingly.
 
 ```tsx
-import { Sidebar } from 'xertica-ui/layout';
+import { Sidebar } from 'xertica-ui/layout';
 import { useLayout } from 'xertica-ui/hooks';
 
 const { sidebarExpanded, toggleSidebar, sidebarWidth } = useLayout();