analytica-frontend-lib 1.0.13 → 1.0.15

package/README.md

@@ -14,6 +14,27 @@ Instale a biblioteca em seu projeto com o comando:
 yarn add analytica-frontend-lib
 ```
 
+### Importe os componentes
+
+Para usar os componentes, basta importá-los no seu projeto:
+
+```tsx
+import { Text } from 'analytica-frontend-lib'
+
+const MyComponent = () => {
+  return <Text>Olá mundo!</Text>
+}
+```
+
+### Importando Estilos CSS
+
+Para usar os estilos e variáveis CSS da lib, importe o arquivo de estilos:
+
+```tsx
+// No seu arquivo layout.tsx (Next.js) ou main.tsx (Vite)
+import 'analytica-frontend-lib/styles.css';
+```
+
 ---
 
 ## Etapas para criar um novo componente
@@ -33,6 +54,10 @@ yarn add analytica-frontend-lib
 - Os componentes devem ser totalmente compatíveis com Next.js versão 15+.
 - Testes unitários são obrigatórios, com coverage mínimo de 80%.
 - Siga o princípio da responsabilidade única (`single responsibility`): construa componentes compostos por componentes menores.
+- No arquivo `package.json` da biblioteca temos:
+  - `peerDependencies`: Framework core (React, Next.js)
+  - `dependencies`: Bibliotecas específicas usadas pelos componentes
+  - `devDependencies`: Ferramentas de build, testes, linting
 
 ## Ladle
 

package/dist/index.css

@@ -1551,4 +1551,4 @@
     }
   }
 }
-/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */

package/dist/index.d.mts

@@ -197,4 +197,82 @@ declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTa
 declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
 
-export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+interface DropdownMenuProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const DropdownMenu: ({ children, open, onOpenChange }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuLabel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLFieldSetElement>>;
+declare const MenuContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+    size?: "small" | "medium";
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    disabled?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NavButton component for Analytica Ensino platforms
+ *
+ * Um botão de navegação com ícone e texto para navegação principal.
+ * Ideal para menus de navegação, sidebar, tabs de navegação, etc.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param label - O texto/label a ser exibido
+ * @param selected - Estado de seleção do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado para navegação
+ *
+ * @example
+ * ```tsx
+ * <NavButton
+ *   icon={<HomeIcon />}
+ *   label="Início"
+ *   selected={false}
+ *   onClick={() => navigate('/')}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para foco programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * const handleFocus = () => {
+ *   buttonRef.current?.focus();
+ * };
+ *
+ * <NavButton
+ *   ref={buttonRef}
+ *   icon={<HomeIcon />}
+ *   label="Dashboard"
+ *   selected={isActive}
+ *   onClick={() => setActiveTab('dashboard')}
+ * />
+ * ```
+ */
+declare const NavButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Texto/label a ser exibido ao lado do ícone */
+    label: string;
+    /** Estado de seleção do botão */
+    selected?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, DropdownMenu, DropdownMenuTrigger, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.d.ts

@@ -197,4 +197,82 @@ declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTa
 declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
 
-export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+interface DropdownMenuProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const DropdownMenu: ({ children, open, onOpenChange }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuLabel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLFieldSetElement>>;
+declare const MenuContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+    size?: "small" | "medium";
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    disabled?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NavButton component for Analytica Ensino platforms
+ *
+ * Um botão de navegação com ícone e texto para navegação principal.
+ * Ideal para menus de navegação, sidebar, tabs de navegação, etc.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param label - O texto/label a ser exibido
+ * @param selected - Estado de seleção do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado para navegação
+ *
+ * @example
+ * ```tsx
+ * <NavButton
+ *   icon={<HomeIcon />}
+ *   label="Início"
+ *   selected={false}
+ *   onClick={() => navigate('/')}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para foco programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * const handleFocus = () => {
+ *   buttonRef.current?.focus();
+ * };
+ *
+ * <NavButton
+ *   ref={buttonRef}
+ *   icon={<HomeIcon />}
+ *   label="Dashboard"
+ *   selected={isActive}
+ *   onClick={() => setActiveTab('dashboard')}
+ * />
+ * ```
+ */
+declare const NavButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Texto/label a ser exibido ao lado do ícone */
+    label: string;
+    /** Estado de seleção do botão */
+    selected?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, DropdownMenu, DropdownMenuTrigger, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.js

@@ -21,7 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
   IconRoundedButton: () => IconRoundedButton,
+  MenuContent: () => MenuContent,
+  MenuItem: () => MenuItem,
+  MenuLabel: () => MenuLabel,
+  MenuSeparator: () => MenuSeparator,
+  NavButton: () => NavButton,
   SelectionButton: () => SelectionButton,
   Table: () => Table,
   TableBody: () => TableBody,
@@ -340,10 +347,266 @@ var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref)
   }
 ));
 TableCaption.displayName = "TableCaption";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropdownMenuContext = (0, import_react3.createContext)(
+  void 0
+);
+var DropdownMenu = ({ children, open, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = (0, import_react3.useState)(false);
+  const isControlled = open !== void 0;
+  const currentOpen = isControlled ? open : internalOpen;
+  const setOpen = (0, import_react3.useCallback)(
+    (newOpen) => {
+      if (onOpenChange) onOpenChange(newOpen);
+      if (!isControlled) setInternalOpen(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const menuRef = (0, import_react3.useRef)(null);
+  const handleEscape = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    if (currentOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [currentOpen]);
+  const value = (0, import_react3.useMemo)(
+    () => ({ open: currentOpen, setOpen }),
+    [currentOpen, setOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", ref: menuRef, children }) });
+};
+var DropdownMenuTrigger = (0, import_react3.forwardRef)(({ className, children, onClick, ...props }, ref) => {
+  const context = (0, import_react3.useContext)(DropdownMenuContext);
+  if (!context)
+    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
+  const { open, setOpen } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      ref,
+      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen(!open);
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MenuLabel = (0, import_react3.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "fieldset",
+  {
+    ref,
+    role: "group",
+    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+    ...props
+  }
+));
+MenuLabel.displayName = "MenuLabel";
+var MenuContent = (0, import_react3.forwardRef)(
+  ({
+    className,
+    align = "start",
+    side = "bottom",
+    sideOffset = 4,
+    children,
+    ...props
+  }, ref) => {
+    const { open } = (0, import_react3.useContext)(DropdownMenuContext);
+    const [isVisible, setIsVisible] = (0, import_react3.useState)(open);
+    (0, import_react3.useEffect)(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = (0, import_react3.forwardRef)(
+  ({
+    className,
+    inset,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    ...props
+  }, ref) => {
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        className: `
+          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${inset && "pl-8"}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          iconLeft,
+          children,
+          iconRight
+        ]
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "div",
+  {
+    ref,
+    className: `my-1 h-px bg-border-200 ${className}`,
+    ...props
+  }
+));
+MenuSeparator.displayName = "MenuSeparator";
+
+// src/components/NavButton/NavButton.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NavButton = (0, import_react4.forwardRef)(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-center",
+      "gap-0.5",
+      "px-12",
+      "py-1",
+      "rounded-sm",
+      "cursor-pointer",
+      "text-text-950",
+      "text-xs",
+      "font-medium",
+      "hover:text-text",
+      "hover:bg-primary-600",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap", children: label })
+        ]
+      }
+    );
+  }
+);
+NavButton.displayName = "NavButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  DropdownMenu,
+  DropdownMenuTrigger,
   IconRoundedButton,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  NavButton,
   SelectionButton,
   Table,
   TableBody,

package/dist/index.mjs

@@ -303,9 +303,274 @@ var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 TableCaption.displayName = "TableCaption";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import {
+  createContext,
+  useState,
+  useCallback,
+  useContext,
+  forwardRef as forwardRef3,
+  useEffect,
+  useRef,
+  useMemo
+} from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DropdownMenuContext = createContext(
+  void 0
+);
+var DropdownMenu = ({ children, open, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const currentOpen = isControlled ? open : internalOpen;
+  const setOpen = useCallback(
+    (newOpen) => {
+      if (onOpenChange) onOpenChange(newOpen);
+      if (!isControlled) setInternalOpen(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const menuRef = useRef(null);
+  const handleEscape = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (currentOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [currentOpen]);
+  const value = useMemo(
+    () => ({ open: currentOpen, setOpen }),
+    [currentOpen, setOpen]
+  );
+  return /* @__PURE__ */ jsx6(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx6("div", { className: "relative", ref: menuRef, children }) });
+};
+var DropdownMenuTrigger = forwardRef3(({ className, children, onClick, ...props }, ref) => {
+  const context = useContext(DropdownMenuContext);
+  if (!context)
+    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
+  const { open, setOpen } = context;
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      ref,
+      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen(!open);
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "fieldset",
+  {
+    ref,
+    role: "group",
+    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+    ...props
+  }
+));
+MenuLabel.displayName = "MenuLabel";
+var MenuContent = forwardRef3(
+  ({
+    className,
+    align = "start",
+    side = "bottom",
+    sideOffset = 4,
+    children,
+    ...props
+  }, ref) => {
+    const { open } = useContext(DropdownMenuContext);
+    const [isVisible, setIsVisible] = useState(open);
+    useEffect(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
+    };
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = forwardRef3(
+  ({
+    className,
+    inset,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    ...props
+  }, ref) => {
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        className: `
+          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${inset && "pl-8"}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          iconLeft,
+          children,
+          iconRight
+        ]
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ref,
+    className: `my-1 h-px bg-border-200 ${className}`,
+    ...props
+  }
+));
+MenuSeparator.displayName = "MenuSeparator";
+
+// src/components/NavButton/NavButton.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var NavButton = forwardRef4(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-center",
+      "gap-0.5",
+      "px-12",
+      "py-1",
+      "rounded-sm",
+      "cursor-pointer",
+      "text-text-950",
+      "text-xs",
+      "font-medium",
+      "hover:text-text",
+      "hover:bg-primary-600",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: label })
+        ]
+      }
+    );
+  }
+);
+NavButton.displayName = "NavButton";
 export {
   Button,
+  DropdownMenu,
+  DropdownMenuTrigger,
   IconRoundedButton,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  NavButton,
   SelectionButton,
   Table,
   TableBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",
@@ -12,7 +12,8 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./styles.css": "./dist/index.css"
   },
   "scripts": {
     "lint": "npx eslint \"{src,app}/**/*.{js,jsx,ts,tsx}\" --fix",
@@ -47,11 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "next": ">=15.0.0",
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
-  },
   "author": "Analytica Ensino LTDA",
   "license": "MIT",
   "repository": {
@@ -62,10 +58,13 @@
   "bugs": {
     "url": "https://github.com/analytica-ensino/analytica-frontend-lib/issues"
   },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
   "dependencies": {
-    "phosphor-react": "^1.4.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "phosphor-react": "^1.4.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -95,6 +94,8 @@
     "polished": "^4.3.1",
     "postcss": "^8.5.4",
     "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "sonarqube-scanner": "^4.3.0",
     "tailwindcss": "^4.1.8",
     "ts-jest": "^29.3.4",