@luminix/mui-cms 1.0.0 → 1.2.0

package/docs/componentes.md

@@ -33,6 +33,24 @@ import { Link } from '@luminix/mui-cms';
 
 ---
 
+## LogoutButton
+
+Botão de logout exibido no rodapé do menu lateral. Pode ser importado diretamente quando precisar ser usado fora do contexto do Drawer padrão.
+
+```tsx
+import { LogoutButton } from '@luminix/mui-cms';
+
+<LogoutButton collapsed={false} />
+```
+
+| Prop | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `collapsed` | `boolean` | `false` | Quando `true`, exibe apenas o ícone (modo recolhido do drawer) com um Tooltip |
+
+O comportamento padrão ao clicar é chamar `auth().logout()` do `@luminix/core`. Veja [Extensibilidade](extensibilidade.md#logoutbutton) para formas de customização.
+
+---
+
 ## Providers de contexto
 
 Os providers a seguir são usados internamente pelas views e componentes da biblioteca. Em cenários avançados, você pode usá-los para acessar os contextos em componentes customizados.
@@ -116,6 +134,7 @@ O `CmsServiceProvider` registra um mapa de componentes acessível via `Cms.getCo
 | `Layout.AppBar` | Barra superior |
 | `Layout.AppLogo` | Logo no drawer |
 | `Layout.Drawer` | Menu lateral |
+| `Layout.Drawer.LogoutButton` | Botão de logout no rodapé do drawer |
 | `Layout.SearchBar` | Campo de busca |
 | `Layout.BackButton` | Botão voltar |
 | `ModelIndex.Filter` | Painel de filtros avançados |

package/docs/configuracao.md

@@ -29,7 +29,50 @@ Para sobrescrever, passe seu próprio objeto:
 />
 ```
 
-O modo escuro (`dark`) é ativado automaticamente quando o sistema operacional do usuário preferir `prefers-color-scheme: dark`.
+O modo de cor padrão é `auto`: segue automaticamente a preferência do sistema operacional (`prefers-color-scheme: dark`).
+
+### colorScheme
+
+Use a prop `colorScheme` para controlar o modo de cor:
+
+| Valor | Comportamento |
+|-------|--------------|
+| `'auto'` (padrão) | Segue a preferência do sistema operacional |
+| `'light'` | Sempre usa o tema claro |
+| `'dark'` | Sempre usa o tema escuro |
+
+```tsx
+// sempre claro
+<LuminixCms colorScheme="light" />
+
+// sempre escuro
+<LuminixCms colorScheme="dark" />
+
+// automático (padrão — mantém o comportamento anterior)
+<LuminixCms colorScheme="auto" />
+```
+
+### darkTheme
+
+Quando `colorScheme="auto"`, use `darkTheme` para fornecer um objeto de tema distinto para o modo escuro. O `theme` continuará sendo o tema claro.
+
+```tsx
+<LuminixCms
+    colorScheme="auto"
+    theme={{
+        palette: {
+            primary: { main: '#1d9798' },
+        },
+    }}
+    darkTheme={{
+        palette: {
+            primary: { main: '#90caf9' },
+        },
+    }}
+/>
+```
+
+> **Nota:** `darkTheme` só tem efeito quando `colorScheme="auto"`. Para `colorScheme="dark"`, passe diretamente o tema desejado via `theme`.
 
 ### themeArgs
 

package/docs/extensibilidade.md

@@ -116,6 +116,51 @@ Cms.reducer('cmsRoutes', (routes, components) => {
 
 > Adicionar a rota fora de `routes[0].children` (ex.: `[...routes, { path: '...' }]`) faz a página renderizar sem o Layout do painel.
 
+### LogoutButton
+
+O botão de logout no rodapé do drawer pode ser personalizado de duas formas:
+
+**1. Apenas o comportamento ao clicar** — via `Cms.logoutUsing()` no `boot()` do seu `ServiceProvider`:
+
+```ts
+class AppServiceProvider extends ServiceProvider {
+    boot() {
+        Cms.logoutUsing(() => {
+            // lógica de logout customizada
+            window.location.href = '/login';
+        });
+    }
+}
+```
+
+**2. Aparência e comportamento completos** — substituindo o componente `'Layout.Drawer.LogoutButton'`:
+
+```tsx
+import React from 'react';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { ExitToApp } from '@mui/icons-material';
+import type { LogoutButtonProps } from '@luminix/mui-cms';
+
+const MeuLogout: React.FC<LogoutButtonProps> = ({ collapsed }) => (
+    <ListItem disablePadding>
+        <ListItemButton onClick={() => { /* minha lógica */ }}>
+            <ListItemIcon><ExitToApp /></ListItemIcon>
+            {!collapsed && <ListItemText primary="Sair do sistema" />}
+        </ListItemButton>
+    </ListItem>
+);
+
+// No boot() do seu ServiceProvider:
+Cms.reducer('componentMap', (map) => ({
+    ...map,
+    'Layout.Drawer.LogoutButton': MeuLogout,
+}));
+```
+
+O componente recebe a prop `collapsed: boolean` — `true` quando o drawer está recolhido no modo desktop.
+
+---
+
 ### wireModelFormProps
 
 Personaliza o formulário de modelo:

package/docs/facades.md

@@ -44,6 +44,18 @@ Retorna as ações de instância (por linha) disponíveis.
 
 Retorna as ações estáticas (nível de listagem, ex.: "Criar novo").
 
+#### `Cms.logoutUsing(callback: () => void): void`
+
+Registra um callback customizado para o botão de logout do menu lateral. Substitui o comportamento padrão de `auth().logout()`.
+
+```ts
+Cms.logoutUsing(() => {
+    window.location.href = '/login';
+});
+```
+
+Deve ser chamado no `boot()` de um `ServiceProvider`. Veja mais em [Extensibilidade — LogoutButton](extensibilidade.md#logoutbutton).
+
 ### Redutores disponíveis
 
 | Redutor | Assinatura | Uso |

package/docs/tipos.md

@@ -115,6 +115,16 @@ type CmsConfig = {
 };
 ```
 
+### LogoutButtonProps
+
+Props recebidas pelo componente `Layout.Drawer.LogoutButton`. Relevante ao substituir o componente via redutor `componentMap`.
+
+```ts
+type LogoutButtonProps = {
+    collapsed?: boolean; // true quando o drawer está recolhido no desktop
+};
+```
+
 ---
 
 ## Componente LuminixCms

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@luminix/mui-cms",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "bundle/mui-cms.js",
   "module": "dist/mui-cms.js",
   "types": "types/index.d.ts",
+  "repository": {
+    "url": "git+https://github.com/luminix-cms/js-mui-cms"
+  },
   "scripts": {
     "dev": "vite --port=3333 --config=vite.config.dev.ts",
     "build": "npm run build:bundle && npm run build:dist",
@@ -14,8 +17,7 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest",
-    "publish:beta": "npm run build && npm publish --tag beta"
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.0",

package/types/components/Layout/Drawer/LogoutButton.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { LogoutButtonProps } from '../../../types/PropTypes';
+declare const LogoutButton: React.FunctionComponent<LogoutButtonProps>;
+export default LogoutButton;

package/types/dist.d.ts

@@ -2,6 +2,7 @@ import { default as CmsServiceProvider } from './providers/CmsServiceProvider';
 import { default as i18NextServiceProvider } from './providers/i18NextServiceProvider';
 import { default as LuminixCms } from './components/LuminixCms';
 import { default as Link } from './components/Link';
+import { default as LogoutButton } from './components/Layout/Drawer/LogoutButton';
 import { default as DialogProvider } from './components/providers/DialogProvider';
 import { default as LayoutProvider } from './components/providers/LayoutProvider';
 import { default as ModelProvider } from './components/providers/ModelProvider';
@@ -26,6 +27,7 @@ import { default as useTable } from './hooks/useTable';
 import { default as Cms } from './facades/Cms';
 import { default as Icon } from './facades/Icon';
 import { default as Filter } from './facades/Filter';
-export { CmsServiceProvider, i18NextServiceProvider, LuminixCms, Link, Cms, Filter, Icon, useActionEvent, useBackButton, useCurrentModel, useDialog, useDisplaceNotifications, useHandleError, useHasSearch, useIsDesktopMode, useLayoutConfig, useMenu, useNotify, usePageTitle, useSearch, useSelection, useSetPageTitle, useTable, DialogProvider, LayoutProvider, ModelProvider, NotificationProvider, TableProvider, };
+export { CmsServiceProvider, i18NextServiceProvider, LuminixCms, Link, LogoutButton, Cms, Filter, Icon, useActionEvent, useBackButton, useCurrentModel, useDialog, useDisplaceNotifications, useHandleError, useHasSearch, useIsDesktopMode, useLayoutConfig, useMenu, useNotify, usePageTitle, useSearch, useSelection, useSetPageTitle, useTable, DialogProvider, LayoutProvider, ModelProvider, NotificationProvider, TableProvider, };
 export type { RouteObject, } from './types/Reducers';
+export type { LogoutButtonProps, } from './types/PropTypes';
 export type { InstanceAction, StaticAction, MassAction, ActionCallbackEvent, InstanceActionCallbackEvent, MassActionCallbackEvent, Column, } from './types/Table';

package/types/services/CmsService.d.ts

@@ -7,11 +7,14 @@ import { StaticAction, MassAction } from '../types/Table';
 export declare class CmsService {
     [key: string]: any;
     private components;
+    private logoutCallback;
     booted(): void;
     getComponents(): Record<string, React.ComponentType<any>>;
     getComponent(name: string): React.ComponentType<any>;
     getRoutes(): RouteObject[];
     getMenuItems(): MenuItem[];
+    logoutUsing(callback: () => void): void;
+    getLogoutCallback(): () => void;
     getModelFormProps(item: ModelType): ModelFormProps;
     getMassActions(ModelClass: typeof ModelType, currentTab: string): MassAction[];
     getInstanceActions(ModelClass: typeof ModelType, currentTab: string): StaticAction[];

package/types/types/PropTypes.d.ts

@@ -5,9 +5,13 @@ import { DrawerProps as MuiDrawerProps, AppBarProps as MuiAppBarProps, BoxProps,
 import { ListTypeMap } from '@mui/material/List';
 import { DefaultComponentProps } from '@mui/material/OverridableComponent';
 import { MenuItem } from './Menu';
+export type ColorScheme = 'auto' | 'light' | 'dark';
 export type LuminixCmsProps = Partial<LuminixProviderProps> & {
     theme?: ThemeOptions;
+    /** Only applied when `colorScheme="auto"` and the OS prefers dark mode. */
+    darkTheme?: ThemeOptions;
     themeArgs?: object[];
+    colorScheme?: ColorScheme;
 };
 export type LayoutProps = BoxProps & {
     slotProps?: {
@@ -91,6 +95,9 @@ export type BreadcrumbsProps = BreadcrumbsOwnProps & {
         href?: string;
     }[];
 };
+export type LogoutButtonProps = {
+    collapsed?: boolean;
+};
 export type InputOption = {
     key: string;
     label: string;