@pipelinesolucoes/menu 1.0.0-beta.0

package/dist/components/drawer/DesktopDrawer.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import MuiDrawer from '@mui/material/Drawer';
+import MuiAppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Avatar, CircularProgress } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { LogoutIcon } from './LogoutIcon';
+import IconDrawerTrigger from './IconDrawerTrigger';
+import UserAvatarMenu from './UserAvatarMenu';
+const drawerWidth = 240;
+const openedMixin = (theme) => ({
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+    overflowX: 'hidden',
+});
+const closedMixin = (theme) => ({
+    transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: 'hidden',
+    width: `calc(${theme.spacing(7)} + 1px)`,
+    [theme.breakpoints.up('sm')]: {
+        width: `calc(${theme.spacing(8)} + 1px)`,
+    },
+});
+const DrawerHeader = styled('div')(({ theme }) => (Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: theme.spacing(0, 1) }, theme.mixins.toolbar)));
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => !['open', 'background'].includes(prop),
+})(({ theme, open, background }) => (Object.assign({ background, zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }) }, (open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+}))));
+const Drawer = styled(MuiDrawer, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ theme, open }) => (Object.assign({ width: drawerWidth, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box' }, (open
+    ? Object.assign(Object.assign({}, openedMixin(theme)), { '& .MuiDrawer-paper': openedMixin(theme) }) : Object.assign(Object.assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': closedMixin(theme) })))));
+const ToolbarContent = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'end',
+    width: '100%',
+    gap: '20px',
+}));
+const LoadingOverlay = styled('div', {
+    shouldForwardProp: (prop) => !['overlayBackground', 'overlayColor'].includes(prop),
+})(({ overlayBackground, overlayColor, theme }) => ({
+    position: 'fixed',
+    inset: 0,
+    zIndex: theme.zIndex.modal + 1,
+    backgroundColor: overlayBackground || 'rgba(0, 0, 0, 0.4)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'auto',
+    color: overlayColor || '#ffffff',
+}));
+/**
+ * Layout desktop responsável por exibir:
+ * - AppBar com botão de menu e informações do usuário;
+ * - Drawer lateral (mini/expandido) com itens de navegação;
+ * - Conteúdo principal à direita.
+ *
+ * Também suporta um estado de carregamento (`loading`) que exibe um overlay
+ * escurecido com um spinner centralizado, desabilitando a interação com a página.
+ *
+ * @param {string} backgroundHeader Cor de fundo do AppBar.
+ * @param {string} backgroundMenuAvatar Cor de fundo do menu Avatar.
+ * @param {string} colorItemMenu Cor do ícone do menu e dos itens de menu.
+ * @param {string} colorItemMenuSelected Cor do item de menu selecionado.
+ * @param {number | string | null} idUsuarioLogado Id do usuário logado.
+ * @param {string} nomeUsuarioLogado Nome do usuário logado.
+ * @param {string} emailUsuario Email do usuário logado.
+ * @param {Array<any>} menuItems Itens exibidos no Drawer.
+ * @param {Array<any>} avatarMenuItems Itens exibidos no menu do avatar.
+ * @param {string} profileImage URL final da imagem de avatar já tratada.
+ * @param {number} selectedIndex Índice do item selecionado.
+ * @param {(index: number) => void} onChangeIndex Callback chamado ao alterar o item selecionado.
+ * @param {() => void} [onUnauthenticated] Callback chamado se não tiver usuário logado.
+ * @param {React.ReactNode} [toolbarContent] Conteúdos genéricos exibidos na barra de ferramentas (texto, ícones, imagens etc.).
+ * @param {boolean} [loading=false] Indica se o overlay de loading deve ser exibido sobre toda a tela.
+ * @param {string} [loadingBackgroundColor='rgba(0, 0, 0, 0.4)'] Cor de fundo do overlay de loading.
+ * @param {number} [loadingSpinnerSize=48] Tamanho do spinner de loading.
+ * @param {string} [loadingMessage] Texto opcional exibido abaixo do spinner de loading.
+ * @param {string} [loadingColor='#ffffff'] Cor do spinner e do texto da mensagem de loading.
+ *
+ * Exibido apenas em `md` ou acima.
+ *
+ * @example
+ * ```tsx
+ * import DesktopDrawer from '@/components/DesktopDrawer';
+ *
+ * const Example = () => {
+ *   return (
+ *     <DesktopDrawer
+ *       backgroundHeader="#ffffff"
+ *       backgroundMenuAvatar="#f5f5f5"
+ *       colorItemMenu="#000000"
+ *       colorItemMenuSelected="#1976d2"
+ *       idUsuarioLogado={1}
+ *       nomeUsuarioLogado="John Doe"
+ *       emailUsuario="john.doe@email.com"
+ *       profileImage="/images/default-avatar.png"
+ *       menuItems={menuItems}
+ *       avatarMenuItems={avatarMenuItems}
+ *       selectedIndex={0}
+ *       onChangeIndex={(index) => console.log(index)}
+ *       loading={true}
+ *       loadingBackgroundColor="rgba(0, 0, 0, 0.6)"
+ *       loadingSpinnerSize={64}
+ *       loadingMessage="Carregando dados..."
+ *       loadingColor="#ffffff"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const DesktopDrawer = ({ endPointLogout, backgroundHeader, backgroundMenuAvatar, colorItemMenu, colorItemMenuSelected, idUsuarioLogado, nomeUsuarioLogado, emailUsuario, profileImage, menuItems, avatarMenuItems, selectedIndex, onChangeIndex, onUnauthenticated, toolbarContent, loading, loadingBackgroundColor, loadingSpinnerSize, loadingMessage, loadingColor, }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+    //garante que só chamamos onUnauthenticated uma única vez
+    const hasFiredUnauth = React.useRef(false);
+    React.useEffect(() => {
+        // só dispara quando já terminou o loading
+        if (!hasFiredUnauth.current &&
+            loading === false &&
+            idUsuarioLogado === null) {
+            hasFiredUnauth.current = true;
+            onUnauthenticated === null || onUnauthenticated === void 0 ? void 0 : onUnauthenticated();
+        }
+    }, [loading, idUsuarioLogado]);
+    if (loading === false && idUsuarioLogado === null) {
+        // enquanto o pai decide o que fazer (redirect, etc.), você não renderiza nada
+        return null;
+    }
+    const handleDrawerOpen = () => setOpen(true);
+    const handleDrawerClose = () => setOpen(false);
+    const [, setErrorMsg] = React.useState(null);
+    const handleClickLogout = async () => {
+        setErrorMsg(null);
+        try {
+            window.location.href = endPointLogout;
+        }
+        catch (e) {
+            setErrorMsg('Ocorreu um erro no logout.');
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(AppBar, { position: "fixed", open: open, background: backgroundHeader, children: _jsxs(Toolbar, { children: [_jsx(IconButton, { "aria-label": "open drawer", onClick: handleDrawerOpen, edge: "start", sx: [
+                                        { marginRight: 5, color: colorItemMenu },
+                                        open && { display: 'none' },
+                                    ], children: _jsx(MenuIcon, {}) }), _jsxs(ToolbarContent, { children: [toolbarContent && toolbarContent, _jsx(IconDrawerTrigger, { background: backgroundMenuAvatar, icon: _jsx(Avatar, { src: profileImage, alt: `foto do perfil de ${nomeUsuarioLogado}`, sx: { width: 48, height: 48, cursor: 'pointer' } }), children: _jsx(UserAvatarMenu, { userName: nomeUsuarioLogado, userEmail: emailUsuario, menuItems: avatarMenuItems, endPointLogout: endPointLogout }) })] })] }) }), _jsxs(Drawer, { variant: "permanent", open: open, children: [_jsx(DrawerHeader, { children: _jsx(IconButton, { onClick: handleDrawerClose, children: theme.direction === 'rtl' ? _jsx(ChevronRightIcon, {}) : _jsx(ChevronLeftIcon, {}) }) }), _jsx(Divider, {}), _jsxs(List, { children: [menuItems.map((item, index) => (_jsx(ListItem, { disablePadding: true, sx: { display: 'block' }, children: _jsxs(ListItemButton, { selected: selectedIndex === index, onClick: () => onChangeIndex(index), sx: {
+                                                minHeight: 48,
+                                                px: 2.5,
+                                                justifyContent: open ? 'initial' : 'center',
+                                            }, children: [_jsx(ListItemIcon, { sx: {
+                                                        minWidth: 0,
+                                                        justifyContent: 'center',
+                                                        mr: open ? 3 : 'auto',
+                                                    }, children: item.icon }), _jsx(ListItemText, { primary: item.text, sx: { opacity: open ? 1 : 0 } })] }) }, item.text))), _jsx(Box, { height: "24px" }), _jsx(ListItem, { disablePadding: true, sx: { display: 'block' }, children: _jsxs(ListItemButton, { onClick: handleClickLogout, sx: {
+                                                minHeight: 48,
+                                                px: 2.5,
+                                                justifyContent: open ? 'initial' : 'center',
+                                            }, children: [_jsx(ListItemIcon, { sx: {
+                                                        minWidth: 0,
+                                                        justifyContent: 'center',
+                                                        mr: open ? 3 : 'auto',
+                                                        color: colorItemMenu,
+                                                    }, children: _jsx(LogoutIcon, {}) }), _jsx(ListItemText, { primary: "Sair", sx: { opacity: open ? 1 : 0 } })] }) }, "logout")] })] }), _jsxs(Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [_jsx(DrawerHeader, {}), (_b = (_a = menuItems[selectedIndex]) === null || _a === void 0 ? void 0 : _a.component) !== null && _b !== void 0 ? _b : (_jsx(Typography, { children: "Selecione um item do menu." }))] })] }), loading && (_jsxs(LoadingOverlay, { overlayBackground: loadingBackgroundColor, overlayColor: loadingColor, children: [_jsx(CircularProgress, { size: loadingSpinnerSize, sx: { color: loadingColor, mb: loadingMessage ? 2 : 0 } }), loadingMessage && (_jsx(Typography, { sx: { mt: 2, color: loadingColor }, children: loadingMessage }))] }))] }));
+};
+DesktopDrawer.displayName = 'DesktopDrawer';
+export default DesktopDrawer;
+//# sourceMappingURL=DesktopDrawer.js.map

package/dist/components/drawer/DesktopDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopDrawer.js","sourceRoot":"","sources":["../../../src/components/drawer/DesktopDrawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer/DrawerResponsive.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { DrawerProps } from '@/types/Drawer';
+/**
+ * DrawerResponsive é um layout de navegação responsivo que:
+ * - Em telas pequenas (xs/sm) usa o `MobileMiniDrawerLayout` (header + bottom navigation);
+ * - Em telas médias ou maiores (md+) usa o `DesktopMiniDrawerLayout` (AppBar + Drawer).
+ *
+ * @param {string} backgroundHeader Cor de fundo do AppBar.
+ * @param {string} backgroundMenuAvatar Cor de fundo do menu Avatar.
+ * @param {string} colorItemMenu Cor do ícone do menu e dos itens de menu.
+ * @param {string} colorItemMenuSelected Cor do item de menu selecionado.
+ * @param {number | string | null} idUsuarioLogado Id do usuário logado.
+ * @param {string} nomeUsuarioLogado Nome do usuário logado.
+ * @param {string} emailUsuario Email do usuário logado.
+ * @param {Array<any>} menuItems Itens exibidos no Drawer.
+ * @param {Array<any>} avatarMenuItems Itens exibidos no menu do avatar.
+ * @param {string} profileImage URL final da imagem de avatar já tratada.
+ * @param {number} selectedIndex Índice do item selecionado.
+ * @param {(index: number) => void} onChangeIndex Callback chamado ao alterar o item selecionado.
+ * @param {() => void} [onUnauthenticated] Callback chamado se não tiver usuário logado.
+ * @param {React.ReactNode} [toolbarContent] Conteúdos genéricos exibidos na barra de ferramentas (texto, ícones, imagens etc.).
+ * @param {boolean} [loading=false] Indica se o overlay de loading deve ser exibido sobre toda a tela.
+ * @param {string} [loadingBackgroundColor='rgba(0, 0, 0, 0.4)'] Cor de fundo do overlay de loading.
+ * @param {number} [loadingSpinnerSize=48] Tamanho do spinner de loading.
+ * @param {string} [loadingMessage] Texto opcional exibido abaixo do spinner de loading.
+ * @param {string} [loadingColor='#ffffff'] Cor do spinner e do texto da mensagem de loading.
+ * @param {() => void} [onChangeIndex] Callback chamado quando o item de menu selecionado é alterado.
+ *
+ *
+ * Exemplo de uso:
+ * ```tsx
+ * <MiniDrawer
+ *   backgroundHeader="#ffffff"
+ *   colorMenuHamburguer="#000000"
+ *   nomeUsuarioLogado="John Doe"
+ *   menuItems={[
+ *     { text: 'Home', icon: <HomeIcon />, component: <HomePage /> },
+ *     { text: 'Configurações', icon: <SettingsIcon />, component: <SettingsPage /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * ``` Como implementar o evento onChangeIndex
+ *    const Page = () => {
+ *    const [abaAtual, setAbaAtual] = React.useState(0);
+ *    const handleMenuIndexChange = (index: number) => {
+ *      setAbaAtual(index);
+ *      // Aqui você decide o que carregar:
+ *      switch (index) {
+ *        case 0:
+ *          // carregar dados da aba "Dashboard"
+ *          // fetchDashboard();
+ *          break;
+ *        case 1:
+ *          // carregar dados da aba "Consultas"
+ *          // fetchConsultas();
+ *          break;
+ *        case 2:
+ *          // carregar dados da aba "Financeiro"
+ *          // fetchFinanceiro();
+ *          break;
+ *        // etc...
+ *      }
+ *    };
+ *    return (
+ *      <DrawerResponsive
+ *        // ...outras props
+ *        onMenuIndexChange={handleMenuIndexChange}
+ *      />
+ *    );
+ *  };
+ */
+declare const DrawerResponsive: React.FC<DrawerProps>;
+export default DrawerResponsive;

package/dist/components/drawer/DrawerResponsive.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import MobileDrawer from './MobileDrawer';
+import DesktopDrawer from './DesktopDrawer';
+import { useMediaQuery, useTheme } from '@mui/material';
+/**
+ * DrawerResponsive é um layout de navegação responsivo que:
+ * - Em telas pequenas (xs/sm) usa o `MobileMiniDrawerLayout` (header + bottom navigation);
+ * - Em telas médias ou maiores (md+) usa o `DesktopMiniDrawerLayout` (AppBar + Drawer).
+ *
+ * @param {string} backgroundHeader Cor de fundo do AppBar.
+ * @param {string} backgroundMenuAvatar Cor de fundo do menu Avatar.
+ * @param {string} colorItemMenu Cor do ícone do menu e dos itens de menu.
+ * @param {string} colorItemMenuSelected Cor do item de menu selecionado.
+ * @param {number | string | null} idUsuarioLogado Id do usuário logado.
+ * @param {string} nomeUsuarioLogado Nome do usuário logado.
+ * @param {string} emailUsuario Email do usuário logado.
+ * @param {Array<any>} menuItems Itens exibidos no Drawer.
+ * @param {Array<any>} avatarMenuItems Itens exibidos no menu do avatar.
+ * @param {string} profileImage URL final da imagem de avatar já tratada.
+ * @param {number} selectedIndex Índice do item selecionado.
+ * @param {(index: number) => void} onChangeIndex Callback chamado ao alterar o item selecionado.
+ * @param {() => void} [onUnauthenticated] Callback chamado se não tiver usuário logado.
+ * @param {React.ReactNode} [toolbarContent] Conteúdos genéricos exibidos na barra de ferramentas (texto, ícones, imagens etc.).
+ * @param {boolean} [loading=false] Indica se o overlay de loading deve ser exibido sobre toda a tela.
+ * @param {string} [loadingBackgroundColor='rgba(0, 0, 0, 0.4)'] Cor de fundo do overlay de loading.
+ * @param {number} [loadingSpinnerSize=48] Tamanho do spinner de loading.
+ * @param {string} [loadingMessage] Texto opcional exibido abaixo do spinner de loading.
+ * @param {string} [loadingColor='#ffffff'] Cor do spinner e do texto da mensagem de loading.
+ * @param {() => void} [onChangeIndex] Callback chamado quando o item de menu selecionado é alterado.
+ *
+ *
+ * Exemplo de uso:
+ * ```tsx
+ * <MiniDrawer
+ *   backgroundHeader="#ffffff"
+ *   colorMenuHamburguer="#000000"
+ *   nomeUsuarioLogado="John Doe"
+ *   menuItems={[
+ *     { text: 'Home', icon: <HomeIcon />, component: <HomePage /> },
+ *     { text: 'Configurações', icon: <SettingsIcon />, component: <SettingsPage /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * ``` Como implementar o evento onChangeIndex
+ *    const Page = () => {
+ *    const [abaAtual, setAbaAtual] = React.useState(0);
+ *    const handleMenuIndexChange = (index: number) => {
+ *      setAbaAtual(index);
+ *      // Aqui você decide o que carregar:
+ *      switch (index) {
+ *        case 0:
+ *          // carregar dados da aba "Dashboard"
+ *          // fetchDashboard();
+ *          break;
+ *        case 1:
+ *          // carregar dados da aba "Consultas"
+ *          // fetchConsultas();
+ *          break;
+ *        case 2:
+ *          // carregar dados da aba "Financeiro"
+ *          // fetchFinanceiro();
+ *          break;
+ *        // etc...
+ *      }
+ *    };
+ *    return (
+ *      <DrawerResponsive
+ *        // ...outras props
+ *        onMenuIndexChange={handleMenuIndexChange}
+ *      />
+ *    );
+ *  };
+ */
+const DrawerResponsive = ({ endPointLogout, backgroundHeader, backgroundMenuAvatar, colorItemMenu, colorItemMenuSelected, idUsuarioLogado, nomeUsuarioLogado, profileImage, emailUsuario, menuItems, avatarMenuItems, onUnauthenticated, toolbarContent, loading = false, loadingBackgroundColor = 'rgba(0, 0, 0, 0.4)', loadingSpinnerSize = 48, loadingMessage, loadingColor = '#ffffff', onChangeIndex, }) => {
+    const defaultAvatar = '/nofoto.jpg';
+    const avatarSrc = profileImage && profileImage.trim() !== '' ? profileImage : defaultAvatar;
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const handleChangeIndex = (index) => {
+        setSelectedIndex(index);
+        onChangeIndex === null || onChangeIndex === void 0 ? void 0 : onChangeIndex(index);
+    };
+    const theme = useTheme();
+    const xs = useMediaQuery(theme.breakpoints.down("sm"));
+    const sm = useMediaQuery(theme.breakpoints.between("sm", "md"));
+    if (xs || sm) {
+        return (_jsx(MobileDrawer, { endPointLogout: endPointLogout, backgroundHeader: backgroundHeader, backgroundMenuAvatar: backgroundMenuAvatar, colorItemMenu: colorItemMenu, colorItemMenuSelected: colorItemMenuSelected, nomeUsuarioLogado: nomeUsuarioLogado, profileImage: avatarSrc, idUsuarioLogado: idUsuarioLogado, emailUsuario: emailUsuario, menuItems: menuItems, avatarMenuItems: avatarMenuItems, selectedIndex: selectedIndex, onChangeIndex: handleChangeIndex, onUnauthenticated: onUnauthenticated, toolbarContent: toolbarContent, loading: loading, loadingBackgroundColor: loadingBackgroundColor, loadingSpinnerSize: loadingSpinnerSize, loadingMessage: loadingMessage, loadingColor: loadingColor }));
+    }
+    else {
+        return (_jsx(DesktopDrawer, { endPointLogout: endPointLogout, backgroundHeader: backgroundHeader, backgroundMenuAvatar: backgroundMenuAvatar, colorItemMenu: colorItemMenu, colorItemMenuSelected: colorItemMenuSelected, idUsuarioLogado: idUsuarioLogado, nomeUsuarioLogado: nomeUsuarioLogado, profileImage: avatarSrc, emailUsuario: emailUsuario, menuItems: menuItems, avatarMenuItems: avatarMenuItems, selectedIndex: selectedIndex, onChangeIndex: handleChangeIndex, onUnauthenticated: onUnauthenticated, toolbarContent: toolbarContent, loading: loading, loadingBackgroundColor: loadingBackgroundColor, loadingSpinnerSize: loadingSpinnerSize, loadingMessage: loadingMessage, loadingColor: loadingColor }));
+    }
+};
+DrawerResponsive.displayName = 'DrawerResponsive';
+export default DrawerResponsive;
+//# sourceMappingURL=DrawerResponsive.js.map

package/dist/components/drawer/DrawerResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResponsive.js","sourceRoot":"","sources":["../../../src/components/drawer/DrawerResponsive.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer/IconDrawerTrigger.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+export interface IconDrawerTriggerProps {
+    icon: React.ReactNode;
+    children: React.ReactNode;
+    /** @default 320 */
+    width?: string | number;
+    /** @default '100%' */
+    height?: string | number;
+    /** @default 16 */
+    padding?: string | number;
+    /** @default 0 */
+    margin?: string | number;
+    /** @default '#ffffff' */
+    background?: string;
+    /** @default 'inherit' */
+    color?: string;
+    /** @default 0 */
+    borderRadius?: string | number;
+    /** @default 'none' */
+    boxShadow?: string;
+    /** @default 'Open panel' */
+    ariaLabel?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Componente que renderiza um botão de ícone (IconButton) do Material UI
+ * e, ao clicar, abre um Menu ancorado ao botão, com conteúdo customizável via children.
+ * Ao clicar novamente no ícone, o Menu é fechado (comportamento de toggle).
+ *
+ * A prop `icon` aceita tanto:
+ * - um ícone do Material UI (`<AccountCircleIcon />`, `<MenuIcon />`, etc.)
+ * - quanto um componente de avatar, como `<Avatar />` do MUI.
+ *
+ * @param {React.ReactNode} icon Ícone ou avatar a ser exibido dentro do botão que abre/fecha o menu. Obrigatório.
+ * @param {React.ReactNode} children Conteúdo que será exibido dentro do menu ao clicar no ícone. Obrigatório.
+ * @param {string | number} [width=320] Largura do container interno do menu.
+ * @param {string | number} [height='100%'] Altura do container interno do menu.
+ * @param {string | number} [padding=16] Espaçamento interno do container interno do menu.
+ * @param {string | number} [margin=0] Margem externa do container interno do menu.
+ * @param {string} [background='#ffffff'] Cor de fundo do container interno do menu.
+ * @param {string} [color='inherit'] Cor do texto dentro do container interno do menu.
+ * @param {string | number} [borderRadius=0] Raio da borda do container interno do menu.
+ * @param {string} [boxShadow='none'] Sombra do container interno do menu.
+ * @param {(open: boolean) => void} [onOpenChange] Callback disparado sempre que o estado de aberto/fechado muda.
+ * @param {string} [ariaLabel='Open panel'] Rótulo de acessibilidade para o botão do ícone.
+ *
+ * @example
+ * ```tsx
+ * import { IconDrawerTrigger } from '@/components/IconDrawerTrigger';
+ * import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+ * import Avatar from '@mui/material/Avatar';
+ *
+ * const Example = () => {
+ *   return (
+ *     <>
+ *       Exemplo com ícone do Material UI
+ *       <IconDrawerTrigger
+ *         icon={<AccountCircleIcon />}
+ *         position="right"
+ *         ariaLabel="Abrir menu do usuário"
+ *         width={360}
+ *         padding="24px"
+ *         background="#f5f5f5"
+ *         borderRadius="12px"
+ *         boxShadow="0 4px 12px rgba(0, 0, 0, 0.1)"
+ *         onOpenChange={(open) => console.log('Menu aberto?', open)}
+ *       >
+ *         <div>Conteúdo com ícone de usuário.</div>
+ *       </IconDrawerTrigger>
+ *
+ *       Exemplo com Avatar do Material UI
+ *       <IconDrawerTrigger
+ *         icon={<Avatar alt="Usuário" src="/static/images/avatar/1.jpg" />}
+ *         position="left"
+ *         ariaLabel="Abrir painel do avatar"
+ *       >
+ *         <div>Conteúdo relacionado ao avatar (perfil, configurações, etc.).</div>
+ *       </IconDrawerTrigger>
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+declare const IconDrawerTrigger: React.FC<IconDrawerTriggerProps>;
+export default IconDrawerTrigger;

package/dist/components/drawer/IconDrawerTrigger.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// IconDrawerTrigger.tsx
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import Box from '@mui/material/Box';
+const StyledMenuContent = styled(Box, {
+    shouldForwardProp: (prop) => ![
+        'width',
+        'height',
+        'padding',
+        'margin',
+        'background',
+        'color',
+        'borderRadius',
+        'boxShadow',
+    ].includes(prop),
+})(({ width, height, padding, margin, background, color, borderRadius, boxShadow }) => ({
+    width: width !== null && width !== void 0 ? width : 320,
+    height: height !== null && height !== void 0 ? height : '100%',
+    padding: padding !== null && padding !== void 0 ? padding : 16,
+    margin: margin !== null && margin !== void 0 ? margin : 0,
+    background: background !== null && background !== void 0 ? background : '#ffffff',
+    color: color !== null && color !== void 0 ? color : 'inherit',
+    borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0,
+    boxShadow: boxShadow !== null && boxShadow !== void 0 ? boxShadow : 'none',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+}));
+/**
+ * Componente que renderiza um botão de ícone (IconButton) do Material UI
+ * e, ao clicar, abre um Menu ancorado ao botão, com conteúdo customizável via children.
+ * Ao clicar novamente no ícone, o Menu é fechado (comportamento de toggle).
+ *
+ * A prop `icon` aceita tanto:
+ * - um ícone do Material UI (`<AccountCircleIcon />`, `<MenuIcon />`, etc.)
+ * - quanto um componente de avatar, como `<Avatar />` do MUI.
+ *
+ * @param {React.ReactNode} icon Ícone ou avatar a ser exibido dentro do botão que abre/fecha o menu. Obrigatório.
+ * @param {React.ReactNode} children Conteúdo que será exibido dentro do menu ao clicar no ícone. Obrigatório.
+ * @param {string | number} [width=320] Largura do container interno do menu.
+ * @param {string | number} [height='100%'] Altura do container interno do menu.
+ * @param {string | number} [padding=16] Espaçamento interno do container interno do menu.
+ * @param {string | number} [margin=0] Margem externa do container interno do menu.
+ * @param {string} [background='#ffffff'] Cor de fundo do container interno do menu.
+ * @param {string} [color='inherit'] Cor do texto dentro do container interno do menu.
+ * @param {string | number} [borderRadius=0] Raio da borda do container interno do menu.
+ * @param {string} [boxShadow='none'] Sombra do container interno do menu.
+ * @param {(open: boolean) => void} [onOpenChange] Callback disparado sempre que o estado de aberto/fechado muda.
+ * @param {string} [ariaLabel='Open panel'] Rótulo de acessibilidade para o botão do ícone.
+ *
+ * @example
+ * ```tsx
+ * import { IconDrawerTrigger } from '@/components/IconDrawerTrigger';
+ * import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+ * import Avatar from '@mui/material/Avatar';
+ *
+ * const Example = () => {
+ *   return (
+ *     <>
+ *       Exemplo com ícone do Material UI
+ *       <IconDrawerTrigger
+ *         icon={<AccountCircleIcon />}
+ *         position="right"
+ *         ariaLabel="Abrir menu do usuário"
+ *         width={360}
+ *         padding="24px"
+ *         background="#f5f5f5"
+ *         borderRadius="12px"
+ *         boxShadow="0 4px 12px rgba(0, 0, 0, 0.1)"
+ *         onOpenChange={(open) => console.log('Menu aberto?', open)}
+ *       >
+ *         <div>Conteúdo com ícone de usuário.</div>
+ *       </IconDrawerTrigger>
+ *
+ *       Exemplo com Avatar do Material UI
+ *       <IconDrawerTrigger
+ *         icon={<Avatar alt="Usuário" src="/static/images/avatar/1.jpg" />}
+ *         position="left"
+ *         ariaLabel="Abrir painel do avatar"
+ *       >
+ *         <div>Conteúdo relacionado ao avatar (perfil, configurações, etc.).</div>
+ *       </IconDrawerTrigger>
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+const IconDrawerTrigger = ({ icon, children, width, height, padding, margin, background, color, borderRadius, boxShadow, onOpenChange, ariaLabel = 'Open panel', }) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleChangeOpen = (nextOpen, newAnchorEl = null) => {
+        if (nextOpen) {
+            setAnchorEl(newAnchorEl);
+        }
+        else {
+            setAnchorEl(null);
+        }
+        if (onOpenChange) {
+            onOpenChange(nextOpen);
+        }
+    };
+    const handleOpen = (event) => {
+        handleChangeOpen(true, event.currentTarget);
+    };
+    const handleClose = () => handleChangeOpen(false);
+    const handleToggle = (event) => {
+        if (open) {
+            handleClose();
+        }
+        else {
+            handleOpen(event);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": ariaLabel, onClick: handleToggle, size: "large", children: icon }), _jsx(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, slotProps: {
+                    paper: {
+                        elevation: 4,
+                        sx: {
+                            mt: 1.5,
+                            minWidth: 220,
+                            borderRadius: '12px',
+                            background: background,
+                        },
+                    },
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, keepMounted: true, children: _jsx(StyledMenuContent, { width: width, height: height, padding: padding, margin: margin, background: background, color: color, borderRadius: borderRadius, boxShadow: boxShadow, children: children }) })] }));
+};
+IconDrawerTrigger.displayName = 'IconDrawerTrigger';
+export default IconDrawerTrigger;
+//# sourceMappingURL=IconDrawerTrigger.js.map

package/dist/components/drawer/IconDrawerTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDrawerTrigger.js","sourceRoot":"","sources":["../../../src/components/drawer/IconDrawerTrigger.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer/LogoutIcon.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Ícone de logout estilizado para o Drawer.
+ */
+export declare const LogoutIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").SVGProps<SVGSVGElement>, "className" | "style" | "classes" | "children" | "sx" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/drawer/LogoutIcon.js

@@ -0,0 +1,10 @@
+import { styled } from "@mui/material";
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+/**
+ * Ícone de logout estilizado para o Drawer.
+ */
+export const LogoutIcon = styled(ExitToAppIcon)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '24px',
+}));
+//# sourceMappingURL=LogoutIcon.js.map

package/dist/components/drawer/LogoutIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutIcon.js","sourceRoot":"","sources":["../../../src/components/drawer/LogoutIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;IACjC,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC,CAAC"}