xertica-ui 2.1.3 → 2.1.4

package/components/blocks/card-patterns/index.ts

@@ -1,17 +1,17 @@
-export { ActivityCard } from "./ActivityCard"
-export type { ActivityCardProps, ActivityItem } from "./ActivityCard"
-
-export { ProfileCard } from "./ProfileCard"
-export type { ProfileCardProps } from "./ProfileCard"
-
-export { ProjectCard } from "./ProjectCard"
-export type { ProjectCardProps, ProjectMember, ProjectStatus } from "./ProjectCard"
-
-export { QuickActionCard } from "./QuickActionCard"
-export type { QuickActionCardProps } from "./QuickActionCard"
-
-export { NotificationCard } from "./NotificationCard"
-export type { NotificationCardProps, NotificationItem, NotificationType } from "./NotificationCard"
-
-export { FeatureCard } from "./FeatureCard"
-export type { FeatureCardProps, FeatureCardColor } from "./FeatureCard"
+export { ActivityCard } from "./ActivityCard"
+export type { ActivityCardProps, ActivityItem } from "./ActivityCard"
+
+export { ProfileCard } from "./ProfileCard"
+export type { ProfileCardProps } from "./ProfileCard"
+
+export { ProjectCard } from "./ProjectCard"
+export type { ProjectCardProps, ProjectMember, ProjectStatus } from "./ProjectCard"
+
+export { QuickActionCard } from "./QuickActionCard"
+export type { QuickActionCardProps } from "./QuickActionCard"
+
+export { NotificationCard } from "./NotificationCard"
+export type { NotificationCardProps, NotificationItem, NotificationType } from "./NotificationCard"
+
+export { FeatureCard } from "./FeatureCard"
+export type { FeatureCardProps, FeatureCardColor } from "./FeatureCard"

package/components/blocks/index.ts

@@ -1 +1 @@
-export * from "./card-patterns"
+export * from "./card-patterns"

package/components/brand/index.ts

@@ -1,6 +1,6 @@
-export * from './xertica-provider';
-export * from './xertica-logo';
-export * from './xertica-xlogo';
-export * from './xertica-orbe';
-export * from './theme-toggle';
-export * from './language-selector';
+export * from './xertica-provider';
+export * from './xertica-logo';
+export * from './xertica-xlogo';
+export * from './xertica-orbe';
+export * from './theme-toggle';
+export * from './language-selector';

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

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Sun, Moon } from 'lucide-react';
 import { Button } from '../../ui/button';
+import { useTheme } from '../../../contexts/ThemeContext';
 
 interface ThemeToggleProps {
   size?: 'sm' | 'md' | 'lg';
@@ -9,33 +10,13 @@ interface ThemeToggleProps {
   showLabel?: boolean;
 }
 
-export function ThemeToggle({ 
-  size = 'md', 
-  variant = 'ghost', 
+export function ThemeToggle({
+  size = 'md',
+  variant = 'ghost',
   className = '',
-  showLabel = false 
+  showLabel = false
 }: ThemeToggleProps) {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    // Check initial state from HTML element
-    if (typeof document !== 'undefined') {
-      setIsDark(document.documentElement.classList.contains('dark'));
-    }
-  }, []);
-
-  const toggleTheme = () => {
-    if (typeof document !== 'undefined') {
-      const isCurrentlyDark = document.documentElement.classList.contains('dark');
-      if (isCurrentlyDark) {
-        document.documentElement.classList.remove('dark');
-        setIsDark(false);
-      } else {
-        document.documentElement.classList.add('dark');
-        setIsDark(true);
-      }
-    }
-  };
+  const { isDark, toggleTheme } = useTheme();
 
   const getSizeClasses = () => {
     switch (size) {
@@ -82,4 +63,4 @@ export function ThemeToggle({
       )}
     </Button>
   );
-}
+}

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

@@ -1,13 +1,13 @@
-import React from 'react';
-import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
-import { AssistenteProvider } from '../../../contexts/AssistenteContext';
-import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
-import { LanguageProvider } 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';
+import React from 'react';
+import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
+import { AssistenteProvider } from '../../../contexts/AssistenteContext';
+import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
+import { LanguageProvider } 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.
@@ -36,41 +36,41 @@ interface XerticaProviderProps {
  * 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,
-}: XerticaProviderProps) {
-    return (
-        <ThemeProvider disableDarkMode={disableDarkMode}>
-            <BrandColorsProvider
-                defaultTheme={defaultBrandTheme}
-                primaryColor={primaryColor}
-                useCustomTokens={useCustomTokens}
-            >
-                <LanguageProvider>
-                    <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>
-    );
-}
+export function XerticaProvider({
+    children,
+    apiKey,
+    googleMapsApiKey,
+    defaultBrandTheme,
+    primaryColor,
+    useCustomTokens,
+    disableDarkMode,
+}: XerticaProviderProps) {
+    return (
+        <ThemeProvider disableDarkMode={disableDarkMode}>
+            <BrandColorsProvider
+                defaultTheme={defaultBrandTheme}
+                primaryColor={primaryColor}
+                useCustomTokens={useCustomTokens}
+            >
+                <LanguageProvider>
+                    <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,34 +1,34 @@
 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}
-    />
-  );
-}
+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', () => {
@@ -41,7 +41,7 @@ describe('XerticaProvider', () => {
     expect(screen.getByTestId('provider-child')).toBeInTheDocument();
   });
 
-  it('renders global components like Toaster', () => {
+  it('renders global components like Toaster', () => {
     const { container } = render(
       <XerticaProvider>
         <div>Content</div>
@@ -50,25 +50,25 @@ describe('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');
-  });
-});
+    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');
+  });
+});