kitunga-web 0.1.85 → 0.1.87

package/dist/features/inputs/components/Inputs/NumberInput.module.css

@@ -129,7 +129,7 @@
 .lg .textInput {
   height: 45px;
   font-size: 1rem;
-  padding: var(--spacing-md);
+  padding: 0 var(--spacing-md);
 }
 
 .lg .leadingGroup {

package/dist/features/inputs/components/Inputs/TextInput.module.css

@@ -152,7 +152,12 @@
 .lg .textInput {
   height: 45px;
   font-size: 1rem;
-  padding: var(--spacing-md);
+  padding: 0 var(--spacing-md);
+}
+
+/* lg + leftIcon: preservar padding-left do hasLeftIcon */
+.lg.hasLeftIcon .textInput {
+  padding-left: 2.8rem;
 }
 
 .lg .clearButton {

package/dist/features/inputs/components/Inputs/TextareaInput.module.css

@@ -120,6 +120,11 @@
   min-height: 120px;
 }
 
+/* lg + leftIcon: preservar padding-left do hasLeftIcon */
+.lg.hasLeftIcon .textArea {
+  padding-left: 2.5rem;
+}
+
 .lg .clearButton {
   width: 28px;
   height: 28px;

package/dist/features/overlays/components/dropdowns/DropdownMenu.d.ts

@@ -1,11 +1,15 @@
 export interface DropdownMenuItem {
     id: string;
-    label: string;
+    label?: string;
     icon?: React.ReactNode;
     description?: string;
     suffix?: string;
     destructive?: boolean;
     active?: boolean;
+    /** Border-divider personalizado por item. */
+    divider?: 'top' | 'bottom' | 'both' | 'none';
+    /** Item totalmente personalizado — substitui o conteúdo visual. */
+    customRender?: React.ReactNode;
 }
 export interface DropdownMenuProps {
     isOpen: boolean;
@@ -13,6 +17,15 @@ export interface DropdownMenuProps {
     triggerRef?: React.RefObject<HTMLElement | null>;
     items: DropdownMenuItem[];
     onSelect?: (itemId: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    width?: number;
+    placementVertical?: 'top' | 'bottom' | 'auto';
+    placementHorizontal?: 'left' | 'right' | 'auto';
+    bordered?: boolean;
+    placementOffset?: number;
+    /** Container dentro do qual o dropdown deve ficar. Se não definido, usa o viewport. */
+    boundaryRef?: React.RefObject<HTMLElement | null>;
+    className?: string;
 }
-export default function DropdownMenu({ isOpen, onClose, triggerRef, items, onSelect, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default function DropdownMenu({ isOpen, onClose, triggerRef, items, onSelect, size, width, placementVertical, placementHorizontal, bordered, placementOffset, boundaryRef, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/features/overlays/components/dropdowns/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/features/overlays/components/dropdowns/DropdownMenu.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAQ,GACT,EAAE,iBAAiB,kDAgDnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/features/overlays/components/dropdowns/DropdownMenu.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uFAAuF;IACvF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAW,EACX,KAAW,EACX,iBAA4B,EAC5B,mBAA6B,EAC7B,QAAe,EACf,eAAmB,EACnB,WAAW,EACX,SAAc,GACf,EAAE,iBAAiB,kDA0OnB"}

package/dist/features/overlays/components/dropdowns/DropdownMenu.js

@@ -1,34 +1,206 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styles from './DropdownMenu.module.css';
 import SharedMenuItem from '../../../navigation/components/Menu/SharedMenuItem';
-export default function DropdownMenu({ isOpen, onClose, triggerRef, items, onSelect, }) {
+export default function DropdownMenu({ isOpen, onClose, triggerRef, items, onSelect, size = 'md', width = 220, placementVertical = 'bottom', placementHorizontal = 'right', bordered = true, placementOffset = 8, boundaryRef, className = '', }) {
     const dropdownRef = useRef(null);
+    const [coords, setCoords] = useState(null);
+    // Se ainda não temos coords, o dropdown renderiza escondido para medir a altura.
+    const measuring = !coords;
+    // Boundary: se boundaryRef for definido, usa o rect do container.
+    // Senão procura o primeiro ancestral do trigger com overflow e usa esse.
+    // Senão usa o viewport.
+    const getBoundary = () => {
+        if (boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current) {
+            const b = boundaryRef.current.getBoundingClientRect();
+            return { top: b.top, bottom: b.bottom, left: b.left, right: b.right };
+        }
+        // Procurar ancestral do trigger com overflow.
+        if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+            let parent = triggerRef.current.parentElement;
+            while (parent) {
+                const style = window.getComputedStyle(parent);
+                const overflow = style.overflow + ' ' + style.overflowY + ' ' + style.overflowX;
+                if (/(auto|scroll|hidden|clip)/.test(overflow)) {
+                    const b = parent.getBoundingClientRect();
+                    return { top: b.top, bottom: b.bottom, left: b.left, right: b.right };
+                }
+                parent = parent.parentElement;
+            }
+        }
+        return { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
+    };
+    // Resolver auto: decidir direção com base no espaço disponível dentro do boundary.
+    const resolveVertical = (rect) => {
+        var _a, _b;
+        if (placementVertical !== 'auto')
+            return placementVertical;
+        const boundary = getBoundary();
+        const dropdownHeight = (_b = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 300;
+        const spaceBelow = boundary.bottom - rect.bottom;
+        const spaceAbove = rect.top - boundary.top;
+        if (spaceBelow >= dropdownHeight + placementOffset)
+            return 'bottom';
+        if (spaceAbove >= dropdownHeight + placementOffset)
+            return 'top';
+        return spaceBelow > spaceAbove ? 'bottom' : 'top';
+    };
+    const resolveHorizontal = (rect, dropdownWidth) => {
+        if (placementHorizontal !== 'auto')
+            return placementHorizontal;
+        const boundary = getBoundary();
+        const spaceRight = boundary.right - rect.right;
+        const spaceLeft = rect.left - boundary.left;
+        if (spaceRight >= dropdownWidth + placementOffset)
+            return 'left';
+        if (spaceLeft >= dropdownWidth + placementOffset)
+            return 'right';
+        return spaceRight > spaceLeft ? 'left' : 'right';
+    };
+    const calcCoords = () => {
+        if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current))
+            return null;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const dropdownWidth = width;
+        const vDir = resolveVertical(rect);
+        const hDir = resolveHorizontal(rect, dropdownWidth);
+        let top = null;
+        let bottom = null;
+        if (vDir === 'top') {
+            bottom = window.innerHeight - rect.top + placementOffset;
+        }
+        else {
+            top = rect.bottom + placementOffset;
+        }
+        let left;
+        if (hDir === 'left') {
+            left = rect.left;
+        }
+        else {
+            left = rect.right - dropdownWidth;
+        }
+        // Garantir que não sai do viewport horizontal.
+        if (left < 8)
+            left = 8;
+        if (left + dropdownWidth > window.innerWidth - 8) {
+            left = window.innerWidth - dropdownWidth - 8;
+        }
+        return { top, bottom, left };
+    };
+    // Calcular posição a partir do trigger.
+    // Primeiro render: coords é null, dropdown renderiza escondido para medir altura.
+    // Segundo render: com a altura medida, calcula coords finais.
+    useLayoutEffect(() => {
+        if (!isOpen) {
+            setCoords(null);
+            return;
+        }
+        setCoords(calcCoords());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen, triggerRef, size, width, placementVertical, placementHorizontal, placementOffset, boundaryRef, measuring]);
+    // Fechar ao clicar fora.
     useEffect(() => {
         if (!isOpen)
             return;
         const handleClick = (event) => {
             var _a, _b;
             const target = event.target;
-            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
                 return;
-            }
-            if ((_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)) {
+            if ((_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
                 return;
-            }
             onClose();
         };
         document.addEventListener('mousedown', handleClick);
         return () => document.removeEventListener('mousedown', handleClick);
     }, [isOpen, onClose, triggerRef]);
-    if (!isOpen) {
+    // Reposicionar no scroll e resize — directamente via ref, sem re-render.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const updatePosition = () => {
+            if (!dropdownRef.current || !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current))
+                return;
+            const newCoords = calcCoords();
+            if (!newCoords)
+                return;
+            if (newCoords.top !== null) {
+                dropdownRef.current.style.top = `${newCoords.top}px`;
+                dropdownRef.current.style.bottom = 'auto';
+            }
+            else if (newCoords.bottom !== null) {
+                dropdownRef.current.style.bottom = `${newCoords.bottom}px`;
+                dropdownRef.current.style.top = 'auto';
+            }
+            dropdownRef.current.style.left = `${newCoords.left}px`;
+        };
+        // Usar requestAnimationFrame para suavizar sem lag.
+        let rafId = null;
+        const onScroll = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(updatePosition);
+        };
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen, triggerRef, size, width, placementVertical, placementHorizontal, placementOffset, boundaryRef]);
+    if (!isOpen)
         return null;
-    }
     const handleItemClick = (itemId) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemId);
         onClose();
     };
-    return (_jsx("div", { className: styles.dropdown, ref: dropdownRef, children: _jsx("ul", { className: styles.menuList, children: items.map((item) => (_jsx(SharedMenuItem, { label: item.label, leftIcon: item.icon, description: item.description, suffix: item.suffix, active: item.active, destructive: item.destructive, onClick: () => handleItemClick(item.id) }, item.id))) }) }));
+    const dropdownStyle = {
+        position: 'fixed',
+        width: `${width}px`,
+    };
+    if (measuring) {
+        // Renderizar fora do viewport para medir a altura sem ser visível.
+        dropdownStyle.left = -9999;
+        dropdownStyle.top = 0;
+        dropdownStyle.visibility = 'hidden';
+    }
+    else {
+        dropdownStyle.left = coords.left;
+        if (coords.top !== null) {
+            dropdownStyle.top = coords.top;
+            dropdownStyle.bottom = 'auto';
+        }
+        else if (coords.bottom !== null) {
+            dropdownStyle.bottom = coords.bottom;
+            dropdownStyle.top = 'auto';
+        }
+    }
+    const dropdownClasses = [
+        styles.dropdown,
+        styles[size],
+        !bordered ? styles.noBorder : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { className: dropdownClasses, ref: dropdownRef, style: dropdownStyle, children: _jsx("div", { className: styles.menuList, children: items.map((item) => {
+                var _a;
+                const dividerClasses = [
+                    item.divider === 'top' || item.divider === 'both' ? styles.dividerTop : '',
+                    item.divider === 'bottom' || item.divider === 'both' ? styles.dividerBottom : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                // Item totalmente personalizado.
+                if (item.customRender) {
+                    return (_jsx("div", { className: `${styles.customItem} ${dividerClasses}`.trim(), onClick: () => handleItemClick(item.id), children: _jsx("div", { className: styles.customContent, children: item.customRender }) }, item.id));
+                }
+                // Item normal com SharedMenuItem (já renderiza <li> internamente).
+                return (_jsx("div", { className: dividerClasses.trim() || undefined, children: _jsx(SharedMenuItem, { label: (_a = item.label) !== null && _a !== void 0 ? _a : '', leftIcon: item.icon, description: item.description, suffix: item.suffix, active: item.active, destructive: item.destructive, size: size, onClick: () => handleItemClick(item.id), isExpanded: true }) }, item.id));
+            }) }) }));
 }
 //# sourceMappingURL=DropdownMenu.js.map

package/dist/features/overlays/components/dropdowns/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../../src/features/overlays/components/dropdowns/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAoBlF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAQ,GACU;IAClB,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;;YACxC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAc,CAAC;YACpC,IAAI,MAAA,WAAW,CAAC,OAAO,0CAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC1C,OAAO;YACT,CAAC;YACD,IAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,0CAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC1C,OAAO;YACT,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAElC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,eAAe,GAAG,CAAC,MAAc,EAAE,EAAE;QACzC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,CAAC;QACnB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAW,YAC/C,aAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC3B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,cAAc,IAEb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAPlC,IAAI,CAAC,EAAE,CAQZ,CACH,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../../src/features/overlays/components/dropdowns/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/features/overlays/components/dropdowns/DropdownMenu.module.css

@@ -1,23 +1,114 @@
 .dropdown {
-  position: absolute;
-  width: 220px;
+  position: fixed;
   background-color: var(--bg-primary);
   border: 1px solid var(--border-divider);
   border-radius: var(--radius-sm);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   z-index: 1500;
-  top: calc(100% + var(--spacing-sm));
-  right: 0;
+  animation: dropdownFadeIn 0.2s ease-out;
+  overflow: hidden;
 }
 
+.noBorder {
+  border: none;
+}
 
-
+/* Tamanhos — width é controlado pela prop width, não pelo size.
+   Size afecta apenas padding, font e spacing dos items. */
 .menuList {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   list-style: none;
-  gap: 6px;
+}
+
+.sm .menuList {
+  padding: var(--spacing-sm);
+}
+
+.md .menuList {
   padding: var(--spacing-sm-large);
-}
+}
+
+.lg .menuList {
+  padding: var(--spacing-md);
+}
+
+/* Dividers — vão de canto a canto, respeitando o radius via overflow:hidden. */
+.sm .dividerTop,
+.sm .dividerBottom {
+  margin-left: calc(-1 * var(--spacing-sm));
+  margin-right: calc(-1 * var(--spacing-sm));
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+
+.md .dividerTop,
+.md .dividerBottom {
+  margin-left: calc(-1 * var(--spacing-sm-large));
+  margin-right: calc(-1 * var(--spacing-sm-large));
+  padding-left: var(--spacing-sm-large);
+  padding-right: var(--spacing-sm-large);
+}
+
+.lg .dividerTop,
+.lg .dividerBottom {
+  margin-left: calc(-1 * var(--spacing-md));
+  margin-right: calc(-1 * var(--spacing-md));
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.dividerTop {
+  border-top: 1px solid var(--border-divider);
+  padding-top: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+}
+
+.dividerBottom {
+  border-bottom: 1px solid var(--border-divider);
+  padding-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Item personalizado — o <li> não tem border-radius.
+   O border do divider pertence ao dropdown, não ao item.
+   O conteúdo interno tem o seu próprio radius para hover. */
+.customItem {
+  cursor: pointer;
+}
+
+.customContent {
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s ease;
+}
+
+.customItem:hover .customContent {
+  background-color: var(--bg-secondary);
+}
+
+/* Padding do customContent acompanha o size do SharedMenuItem */
+.sm .customContent {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.md .customContent {
+  padding: 0 12px;
+}
+
+.lg .customContent {
+  padding: var(--spacing-md);
+}
+
+/* Animação */
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitunga-web",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "private": false,
   "type": "module",
   "repository": {