xertica-ui 2.3.0 → 2.4.1

package/docs/components/stats-card.md

@@ -29,7 +29,9 @@ Built on top of `<Card>`. Use it for dashboard stat widgets where a consistent m
 | `description` | `string`                            | No       | Additional supplementary text below the value                                                             |
 | `trend`       | `{ value: number; label?: string }` | No       | Trend object. `value` is a number (positive = up, negative = down). `label` overrides `description` text. |
 | `icon`        | `ReactNode`                         | No       | Icon from `lucide-react`                                                                                  |
-| `className`   | `string`                            | No       | Additional CSS classes                                                                                    |
+| `iconColor`   | `string`                            | No       | Tailwind class for the icon text/foreground color (defaults to `text-muted-foreground`)                   |
+| `iconBg`      | `string`                            | No       | Tailwind class for the icon background color (defaults to `bg-muted`)                                     |
+| `className`   | `string`                            | No       | Additional CSS classes |
 
 ### trend
 
@@ -59,6 +61,22 @@ import { DollarSign } from 'lucide-react';
 />;
 ```
 
+### Custom Icon Colors
+
+```tsx
+import { StatsCard } from 'xertica-ui/ui';
+import { Users } from 'lucide-react';
+
+<StatsCard
+  title="Active Users"
+  value="2,350"
+  trend={{ value: 8.2, label: 'new this week' }}
+  icon={<Users className="size-5" />}
+  iconBg="bg-primary/10"
+  iconColor="text-primary"
+/>;
+```
+
 ### Negative Trend
 
 ```tsx
@@ -108,7 +126,7 @@ import { DollarSign } from 'lucide-react';
 - `trend.value` is a **numeric percentage** (e.g., `20.1` for +20.1%) — the component displays `Math.abs(value)%` automatically.
 - Do NOT pre-format the trend value as a string — pass the raw number.
 - `value` IS pre-formatted as a display string: `"$45,231"`, `"3.6%"`, `"2,350"`.
-- Icons render inside a muted rounded background — use `size-5` for the icon.
+- Icons render inside a rounded background. By default, background is `bg-muted` and color is `text-muted-foreground`, but they can be customized using `iconBg` and `iconColor` props. Use `size-5` for the icon.
 - Always use in a 4-column responsive grid for dashboard overviews.
 - `trend.label` takes precedence over `description` for below-value text.
 

package/docs/doc-audit.md

@@ -4,19 +4,20 @@
 >
 > Antes de seguir qualquer recomendação aqui, verifique se a documentação correspondente já existe em `docs/components/`. A inventário real abaixo foi atualizado para refletir o estado em 2026-05-21:
 >
-> | Categoria | Total | Com Doc | Sem Doc |
-> |---|---|---|---|
-> | Componentes UI (`components/ui/`) | 65 | 65 | 0 |
-> | Componentes Assistant (`components/assistant/`) | 5 | 5 | 0 |
-> | Componentes Brand (`components/brand/`) | 7 | 7 | 0 |
-> | Componentes Layout (`components/layout/`) | 2 | 2 | 0 |
-> | Componentes Media (`components/media/`) | 3 | 3 | 0 |
-> | Componentes Blocks (`components/blocks/`) | 6 cards + 6 skeletons | card-patterns.md (cobre cards + skeletons) | 0 |
-> | Páginas (`components/pages/`) | 8 | pages.md (cobertura agregada) | 0 |
-> | Hooks/Contextos | 9 hooks | hooks.md (cobertura agregada) | 0 |
-> | Utilitários (`components/figma/`) | 1 | image-with-fallback.md | 0 |
+> | Categoria                                       | Total                 | Com Doc                                    | Sem Doc |
+> | ----------------------------------------------- | --------------------- | ------------------------------------------ | ------- |
+> | Componentes UI (`components/ui/`)               | 65                    | 65                                         | 0       |
+> | Componentes Assistant (`components/assistant/`) | 5                     | 5                                          | 0       |
+> | Componentes Brand (`components/brand/`)         | 7                     | 7                                          | 0       |
+> | Componentes Layout (`components/layout/`)       | 2                     | 2                                          | 0       |
+> | Componentes Media (`components/media/`)         | 3                     | 3                                          | 0       |
+> | Componentes Blocks (`components/blocks/`)       | 6 cards + 6 skeletons | card-patterns.md (cobre cards + skeletons) | 0       |
+> | Páginas (`components/pages/`)                   | 8                     | pages.md (cobertura agregada)              | 0       |
+> | Hooks/Contextos                                 | 9 hooks               | hooks.md (cobertura agregada)              | 0       |
+> | Utilitários (`components/figma/`)               | 1                     | image-with-fallback.md                     | 0       |
 >
 > **Lacunas ainda em aberto (verificar antes de fechar):**
+>
 > - Storybook `.mdx` para os 6 card skeletons (existe `.md`, mas não `.mdx`)
 > - `lib/query-client.ts` — singleton não documentado externamente (intencionalmente interno)
 >

package/docs/getting-started.md

@@ -34,13 +34,14 @@ npx xertica-ui@latest init
 
 The CLI walks you through an interactive setup:
 
-| Prompt | Choices |
-|---|---|
-| Pages to include | Login, Home, Template (multi-select) |
-| Languages to support | pt-BR, English, Español (multi-select, min 1) |
-| Default color theme | Xertica, Slate, Blue, Violet, Rose, Emerald, … |
-| **Include AI Assistant** | yes (default) / no |
-| Install dependencies | yes / no |
+| Prompt                        | Choices                                        |
+| ----------------------------- | ---------------------------------------------- |
+| Pages to include              | Login, Home, Template (multi-select)           |
+| Languages to support          | pt-BR, English, Español (multi-select, min 1)  |
+| Default color theme           | Xertica, Slate, Blue, Violet, Rose, Emerald, … |
+| **Enable dark mode support?** | yes (default) / no                             |
+| **Include AI Assistant**      | yes (default) / no                             |
+| Install dependencies          | yes / no                                       |
 
 This command:
 
@@ -50,7 +51,7 @@ This command:
 - Injects the theme token system (`tokens.css`)
 - Copies only the locale files for the selected languages
 - Conditionally scaffolds the AI Assistant (`AssistantPage`, `features/assistant/`) based on your answer
-- Persists your choices in `src/locales/.languages.json` and `.xertica.json`
+- Persists your choices in `src/locales/.languages.json` and `.xertica.json` (e.g. `hasAssistant`, `disableDarkMode`)
 
 ### Step 1b — Update an Existing Project (CLI)
 
@@ -62,12 +63,13 @@ npx xertica-ui@latest update
 
 The menu offers:
 
-| Option | What it does |
-|---|---|
-| **Theme only** | Re-prompts for color theme, overwrites `tokens.css` |
-| **Languages** | Add/remove language support, regenerates `i18n.ts` and `App.tsx` |
-| **Assistant** | Add or remove the AI Assistant (copies/deletes files, regenerates `AuthGuard.tsx`, `HomePage.tsx`, `TemplatePage.tsx`) |
-| **Project files** | Updates `app/`, `shared/`, `features/`, `pages/` to a newer version |
+| Option            | What it does                                                                                                           |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **Theme only**    | Re-prompts for color theme, overwrites `tokens.css`                                                                    |
+| **Languages**     | Add/remove language support, regenerates `i18n.ts` and `App.tsx`                                                       |
+| **Dark Mode**     | Enable or disable dark mode support (updates `.xertica.json` and regenerates `App.tsx` to set `disableDarkMode` flag)  |
+| **Assistant**     | Add or remove the AI Assistant (copies/deletes files, regenerates `AuthGuard.tsx`, `HomePage.tsx`, `TemplatePage.tsx`) |
+| **Project files** | Updates `app/`, `shared/`, `features/`, `pages/` to a newer version                                                    |
 
 > **Tip:** You can also manually edit `src/styles/xertica/tokens.css` to tweak individual color values — the file is fully commented and designed to be human-readable.
 
@@ -100,12 +102,18 @@ const queryClient = new QueryClient({
 
 function App() {
   return (
-    <AppErrorBoundary>                    {/* catches provider/context crashes */}
+    <AppErrorBoundary>
+      {' '}
+      {/* catches provider/context crashes */}
       <QueryClientProvider client={queryClient}>
         <XerticaProvider>
           <Router>
-            <AuthProvider>               {/* must be inside Router */}
-              <PageErrorBoundary>        {/* catches lazy-chunk + page errors */}
+            <AuthProvider>
+              {' '}
+              {/* must be inside Router */}
+              <PageErrorBoundary>
+                {' '}
+                {/* catches lazy-chunk + page errors */}
                 <YourRoutes />
               </PageErrorBoundary>
             </AuthProvider>
@@ -183,12 +191,12 @@ function MyPage() {
 
 `useAuth()` returns:
 
-| Property    | Type                                       | Description                                  |
-| ----------- | ------------------------------------------ | -------------------------------------------- |
-| `user`      | `AuthUser \| null`                         | Current user (`email`, `name?`, `avatar?`)   |
-| `isLoading` | `boolean`                                  | `true` while the session is being hydrated   |
-| `login`     | `(email, password) => boolean`             | Attempt login; returns `true` on success     |
-| `logout`    | `() => void`                               | Clear session and redirect to `/login`       |
+| Property    | Type                           | Description                                |
+| ----------- | ------------------------------ | ------------------------------------------ |
+| `user`      | `AuthUser \| null`             | Current user (`email`, `name?`, `avatar?`) |
+| `isLoading` | `boolean`                      | `true` while the session is being hydrated |
+| `login`     | `(email, password) => boolean` | Attempt login; returns `true` on success   |
+| `logout`    | `() => void`                   | Clear session and redirect to `/login`     |
 
 ### Route Guards
 
@@ -198,7 +206,7 @@ Use `ProtectedRoute` and `GuestRoute` wrappers (provided in the CLI-generated `A
 // Redirect unauthenticated users to /login
 function ProtectedRoute({ children }) {
   const { user, isLoading } = useAuth();
-  if (isLoading) return null;  // wait for localStorage hydration
+  if (isLoading) return null; // wait for localStorage hydration
   if (!user) return <Navigate to="/login" replace />;
   return <>{children}</>;
 }
@@ -221,15 +229,20 @@ All routes should use `React.lazy()` + `<Suspense>` to split each page into a se
 ```tsx
 import React, { Suspense } from 'react';
 
-const HomePage = React.lazy(() =>
-  import('./pages/HomePage').then(m => ({ default: m.HomePage }))
-);
+const HomePage = React.lazy(() => import('./pages/HomePage').then(m => ({ default: m.HomePage })));
 
 function AppRoutes() {
   return (
     <Suspense fallback={null}>
       <Routes>
-        <Route path="/home" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
+        <Route
+          path="/home"
+          element={
+            <ProtectedRoute>
+              <HomePage />
+            </ProtectedRoute>
+          }
+        />
       </Routes>
     </Suspense>
   );

package/docs/guidelines.md

@@ -201,9 +201,9 @@ Always render a skeleton placeholder — never a spinner — for data-bearing su
 ```tsx
 import { ActivityCard, ActivityCardSkeleton } from 'xertica-ui';
 
-{isLoading
-  ? <ActivityCardSkeleton rows={5} />
-  : <ActivityCard items={items} />}
+{
+  isLoading ? <ActivityCardSkeleton rows={5} /> : <ActivityCard items={items} />;
+}
 ```
 
 Available skeleton companions: `ActivityCardSkeleton`, `ProfileCardSkeleton`, `ProjectCardSkeleton`, `NotificationCardSkeleton`, `QuickActionCardSkeleton`, `FeatureCardSkeleton`, `StatsCardSkeleton`.
@@ -211,15 +211,17 @@ Available skeleton companions: `ActivityCardSkeleton`, `ProfileCardSkeleton`, `P
 **For grids**, render one skeleton per expected card so layout shift is minimized when data arrives:
 
 ```tsx
-{isLoading ? (
-  <>
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-  </>
-) : (
-  data.map(item => <FeatureCard key={item.id} {...item} />)
-)}
+{
+  isLoading ? (
+    <>
+      <FeatureCardSkeleton showAction />
+      <FeatureCardSkeleton showAction />
+      <FeatureCardSkeleton showAction />
+    </>
+  ) : (
+    data.map(item => <FeatureCard key={item.id} {...item} />)
+  );
+}
 ```
 
 **For tables**, render skeleton `<TableRow>`s using the `<Skeleton>` primitive (`xertica-ui/ui`) sized to match each cell:

package/docs/i18n.md

@@ -97,15 +97,13 @@ const es = bundleLang(
 );
 
 const savedLanguage =
-  typeof window !== 'undefined'
-    ? (localStorage.getItem('xertica_language') ?? 'pt-BR')
-    : 'pt-BR';
+  typeof window !== 'undefined' ? (localStorage.getItem('xertica_language') ?? 'pt-BR') : 'pt-BR';
 
 i18n.use(initReactI18next).init({
   resources: {
     'pt-BR': { translation: ptBR },
-    en:      { translation: en },
-    es:      { translation: es },
+    en: { translation: en },
+    es: { translation: es },
   },
   lng: savedLanguage,
   fallbackLng: 'pt-BR',
@@ -150,7 +148,7 @@ function HomeContent() {
 ```
 
 ```tsx
-t('team.showing', { count: 5, total: 127 })
+t('team.showing', { count: 5, total: 127 });
 // → "Exibindo 5 de 127 usuários"
 ```
 
@@ -176,11 +174,11 @@ setLanguage('en'); // persists + calls i18n.changeLanguage('en') + invalidates R
 
 ### Language codes
 
-| Code | Display | Stored as |
-|---|---|---|
+| Code      | Display        | Stored as                   |
+| --------- | -------------- | --------------------------- |
 | `'pt-BR'` | Português (BR) | `'pt-BR'` in `localStorage` |
-| `'en'` | English | `'en'` |
-| `'es'` | Español | `'es'` |
+| `'en'`    | English        | `'en'`                      |
+| `'es'`    | Español        | `'es'`                      |
 
 ---
 
@@ -190,41 +188,41 @@ The project uses a single `translation` namespace. Each top-level key maps to a
 
 **Root files** (`locales/<lang>/<key>.json`):
 
-| Namespace | File | Example keys |
-|---|---|---|
-| `common` | `common.json` | `common.view`, `common.edit`, `common.loading`, `common.close`, `common.copied` |
-| `nav` | `nav.json` | `nav.home`, `nav.designSystem`, `nav.settings` |
-| `errors` | `errors.json` | `errors.somethingWentWrong`, `errors.tryAgain`, `errors.pageLoadError` |
-| `languageSelector` | `languageSelector.json` | `languageSelector.label`, `languageSelector.ptBR` |
-| `themeToggle` | `themeToggle.json` | `themeToggle.switchToLight`, `themeToggle.darkMode` |
+| Namespace          | File                    | Example keys                                                                    |
+| ------------------ | ----------------------- | ------------------------------------------------------------------------------- |
+| `common`           | `common.json`           | `common.view`, `common.edit`, `common.loading`, `common.close`, `common.copied` |
+| `nav`              | `nav.json`              | `nav.home`, `nav.designSystem`, `nav.settings`                                  |
+| `errors`           | `errors.json`           | `errors.somethingWentWrong`, `errors.tryAgain`, `errors.pageLoadError`          |
+| `languageSelector` | `languageSelector.json` | `languageSelector.label`, `languageSelector.ptBR`                               |
+| `themeToggle`      | `themeToggle.json`      | `themeToggle.switchToLight`, `themeToggle.darkMode`                             |
 
 **Page files** (`locales/<lang>/pages/<key>.json`):
 
-| Namespace | File | Example keys |
-|---|---|---|
-| `home` | `pages/home.json` | `home.welcome`, `home.subtitle`, `home.templateCliTitle` |
-| `templates` | `pages/templates.json` | `templates.title`, `templates.alerts.infoTitle`, `templates.forms.firstName` |
-| `login` | `pages/login.json` | `login.heading`, `login.submit`, `login.forgotPassword` |
-| `resetPassword` | `pages/resetPassword.json` | `resetPassword.heading`, `resetPassword.errorMismatch` |
-| `verifyEmail` | `pages/verifyEmail.json` | `verifyEmail.heading`, `verifyEmail.resend` |
-| `loginTemplate` | `pages/loginTemplate.json` | `loginTemplate.title`, `loginTemplate.submit` |
-| `formTemplate` | `pages/formTemplate.json` | `formTemplate.title`, `formTemplate.save`, `formTemplate.errors.fullNameRequired` |
-| `dashboardTemplate` | `pages/dashboardTemplate.json` | `dashboardTemplate.title`, `dashboardTemplate.stats.totalRevenue` |
-| `crudTemplate` | `pages/crudTemplate.json` | `crudTemplate.title`, `crudTemplate.actions.editProfile` |
+| Namespace           | File                           | Example keys                                                                      |
+| ------------------- | ------------------------------ | --------------------------------------------------------------------------------- |
+| `home`              | `pages/home.json`              | `home.welcome`, `home.subtitle`, `home.templateCliTitle`                          |
+| `templates`         | `pages/templates.json`         | `templates.title`, `templates.alerts.infoTitle`, `templates.forms.firstName`      |
+| `login`             | `pages/login.json`             | `login.heading`, `login.submit`, `login.forgotPassword`                           |
+| `resetPassword`     | `pages/resetPassword.json`     | `resetPassword.heading`, `resetPassword.errorMismatch`                            |
+| `verifyEmail`       | `pages/verifyEmail.json`       | `verifyEmail.heading`, `verifyEmail.resend`                                       |
+| `loginTemplate`     | `pages/loginTemplate.json`     | `loginTemplate.title`, `loginTemplate.submit`                                     |
+| `formTemplate`      | `pages/formTemplate.json`      | `formTemplate.title`, `formTemplate.save`, `formTemplate.errors.fullNameRequired` |
+| `dashboardTemplate` | `pages/dashboardTemplate.json` | `dashboardTemplate.title`, `dashboardTemplate.stats.totalRevenue`                 |
+| `crudTemplate`      | `pages/crudTemplate.json`      | `crudTemplate.title`, `crudTemplate.actions.editProfile`                          |
 
 **Component files** (`locales/<lang>/components/<key>.json`):
 
-| Namespace | File | Example keys |
-|---|---|---|
-| `assistant` | `components/assistant.json` | `assistant.title`, `assistant.inputPlaceholder`, `assistant.tabs.chat`, `assistant.feedbackDialog.title` |
-| `sidebar` | `components/sidebar.json` | `sidebar.collapse`, `sidebar.logout`, `sidebar.moreOptions` |
-| `media` | `components/media.json` | `media.play`, `media.pause`, `media.downloadAudio`, `media.floatingMode` |
-| `projectCard` | `components/projectCard.json` | `projectCard.progress`, `projectCard.status.active` |
-| `profileCard` | `components/profileCard.json` | `profileCard.status.online`, `profileCard.status.busy` |
-| `notificationCard` | `components/notificationCard.json` | `notificationCard.title`, `notificationCard.markAllRead` |
-| `activityCard` | `components/activityCard.json` | `activityCard.title`, `activityCard.type.create` |
-| `stats` | `components/stats.json` | `stats.totalUsers`, `stats.last30Days` |
-| `team` | `components/team.json` | `team.name`, `team.roles.Developer`, `team.showing` |
+| Namespace          | File                               | Example keys                                                                                             |
+| ------------------ | ---------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `assistant`        | `components/assistant.json`        | `assistant.title`, `assistant.inputPlaceholder`, `assistant.tabs.chat`, `assistant.feedbackDialog.title` |
+| `sidebar`          | `components/sidebar.json`          | `sidebar.collapse`, `sidebar.logout`, `sidebar.moreOptions`                                              |
+| `media`            | `components/media.json`            | `media.play`, `media.pause`, `media.downloadAudio`, `media.floatingMode`                                 |
+| `projectCard`      | `components/projectCard.json`      | `projectCard.progress`, `projectCard.status.active`                                                      |
+| `profileCard`      | `components/profileCard.json`      | `profileCard.status.online`, `profileCard.status.busy`                                                   |
+| `notificationCard` | `components/notificationCard.json` | `notificationCard.title`, `notificationCard.markAllRead`                                                 |
+| `activityCard`     | `components/activityCard.json`     | `activityCard.title`, `activityCard.type.create`                                                         |
+| `stats`            | `components/stats.json`            | `stats.totalUsers`, `stats.last30Days`                                                                   |
+| `team`             | `components/team.json`             | `team.name`, `team.roles.Developer`, `team.showing`                                                      |
 
 ---
 
@@ -237,11 +235,13 @@ Mock data fetch functions use `i18n.t()` (the instance, not the hook) so they re
 import i18n from '../../../i18n';
 
 export async function fetchFeatureCards(): Promise<FeatureCard[]> {
-  return [{
-    id: 'template-cli',
-    title: i18n.t('home.templateCliTitle'),       // ← translated at query time
-    description: i18n.t('home.templateCliDescription'),
-  }];
+  return [
+    {
+      id: 'template-cli',
+      title: i18n.t('home.templateCliTitle'), // ← translated at query time
+      description: i18n.t('home.templateCliDescription'),
+    },
+  ];
 }
 ```
 
@@ -264,6 +264,7 @@ export function useFeatureCards() {
 ```
 
 **Why this works:**
+
 - Switching from `pt-BR` → `en` changes the queryKey to `['home', 'feature-cards', 'en']`
 - React Query finds no cache entry for this key → triggers an immediate refetch
 - `fetchFeatureCards()` runs again → `i18n.t()` now returns English strings
@@ -278,9 +279,7 @@ When you need static fallback data while a query loads, use **factory functions*
 ```ts
 // ✅ Correct — evaluated at call time, always returns current language
 export function getMockRichSuggestions(): Suggestion[] {
-  return [
-    { id: 'rich-1', text: i18n.t('assistant.richSuggestions.viewPerformance') },
-  ];
+  return [{ id: 'rich-1', text: i18n.t('assistant.richSuggestions.viewPerformance') }];
 }
 
 // ❌ Wrong — i18n.t() runs once at module load, frozen in initial language
@@ -312,11 +311,13 @@ $ npx xertica-ui init my-app
 ```
 
 Pick **all three** (default), **two**, or **just one**:
+
 - **All three** — the CLI omits the `availableLanguages` prop entirely (the library default already matches).
 - **Two or one** — the CLI injects the explicit `availableLanguages` array into `src/app/App.tsx`.
 - **Just one (monolingual)** — additionally, the `LanguageSelector` auto-hides because there is nothing to switch between. A header banner comment in `App.tsx` documents this.
 
 The CLI also:
+
 - Copies **only** the locale **folders** for the selected languages into `src/locales/` (no orphan files). Each language is a directory tree with split JSON files.
 - Generates `src/i18n.ts` with `import.meta.glob` calls for exactly those languages — Vite auto-discovers all JSON files in the folder at build time.
 - Persists the selection in `src/locales/.languages.json` so the `update` command can preserve it.
@@ -341,6 +342,7 @@ Current languages: Português (BR), English
 ```
 
 The command:
+
 1. Computes the add/remove diff and shows it to you.
 2. Copies the newly-added locale **folders** from `node_modules/xertica-ui/templates/src/locales/<lang>/`.
 3. Removes the **folders** of unselected languages from your project (also removes any legacy flat `<lang>.json` files if upgrading from pre-2.2.0).
@@ -358,7 +360,7 @@ import { XerticaProvider } from 'xertica-ui';
 
 <XerticaProvider>
   {/* pt-BR, en, es are all available — selector shows all three */}
-</XerticaProvider>
+</XerticaProvider>;
 ```
 
 ### Monolingual — single language, no selector
@@ -390,7 +392,7 @@ import fr from './locales/fr.json';
   ]}
 >
   {/* French now appears in the selector; its strings are registered automatically */}
-</XerticaProvider>
+</XerticaProvider>;
 ```
 
 The provider calls `i18n.addResourceBundle()` on mount for any entry that carries `resources`.
@@ -414,10 +416,12 @@ registerLanguageResource('fr', fr);
 Just omit them from `availableLanguages`. The translation bundles registered in `src/i18n.ts` remain loaded (they're cheap) but they're invisible to the UI:
 
 ```tsx
-<XerticaProvider availableLanguages={[
-  { code: 'pt-BR', label: 'Português' },
-  { code: 'en',    label: 'English' },
-]}>
+<XerticaProvider
+  availableLanguages={[
+    { code: 'pt-BR', label: 'Português' },
+    { code: 'en', label: 'English' },
+  ]}
+>
   {/* Only Portuguese and English appear — Spanish is hidden */}
 </XerticaProvider>
 ```
@@ -451,10 +455,10 @@ interface LanguageDefinition {
 
 ```ts
 const {
-  language,             // current locale code
-  setLanguage,          // change locale + persist + invalidate React Query
-  availableLanguages,   // LanguageDefinition[] currently configured
-  isMonolingual,        // true when availableLanguages.length === 1
+  language, // current locale code
+  setLanguage, // change locale + persist + invalidate React Query
+  availableLanguages, // LanguageDefinition[] currently configured
+  isMonolingual, // true when availableLanguages.length === 1
 } = useLanguage();
 ```