analytica-frontend-lib 1.0.14 → 1.0.16

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

@@ -5,6 +5,7 @@
   :root,
   :host {
     --font-sans:
+      "Roboto",
       ui-sans-serif,
       system-ui,
       sans-serif,
@@ -26,6 +27,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -49,12 +52,14 @@
     --font-weight-black: 900;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary-50: #999999;
+    --color-primary-100: #808080;
     --color-primary-400: #525252;
     --color-primary-500: #333333;
     --color-primary-600: #292929;
@@ -310,6 +315,9 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
@@ -331,6 +339,24 @@
   .z-50 {
     z-index: 50;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -343,6 +369,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -352,6 +381,9 @@
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -388,6 +420,9 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-full {
     width: 100%;
   }
@@ -452,6 +487,9 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -510,6 +548,9 @@
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .\!bg-primary-50 {
+    background-color: var(--color-primary-50) !important;
+  }
   .bg-background {
     background-color: var(--color-background);
   }
@@ -621,6 +662,10 @@
     font-size: var(--text-6xl);
     line-height: var(--tw-leading, var(--text-6xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -676,6 +721,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .\!text-primary-950 {
+    color: var(--color-primary-950) !important;
+  }
   .text-error-500 {
     color: var(--color-error-500);
   }
@@ -709,6 +757,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .italic {
+    font-style: italic;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -825,6 +876,13 @@
       }
     }
   }
+  .hover\:\!bg-primary-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-100) !important;
+      }
+    }
+  }
   .hover\:bg-background-50 {
     &:hover {
       @media (hover: hover) {
@@ -1551,4 +1609,4 @@
     }
   }
 }
-/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */

package/dist/index.d.mts

@@ -275,4 +275,77 @@ declare const NavButton: react.ForwardRefExoticComponent<{
     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 };
+/**
+ * IconButton component props interface
+ */
+type IconButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: 'sm' | 'md';
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconButton component for Analytica Ensino platforms
+ *
+ * Um botão compacto apenas com ícone, ideal para menus dropdown,
+ * barras de ferramentas e ações secundárias.
+ * Oferece dois tamanhos com estilo consistente.
+ * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
+ * 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 size - Tamanho do botão (sm, md)
+ * @param active - Estado ativo/selecionado do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button compacto estilizado apenas com ícone
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<MoreVerticalIcon />}
+ *   size="sm"
+ *   onClick={() => openMenu()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
+ * <IconButton
+ *   icon={<BoldIcon />}
+ *   active={isBold}
+ *   onClick={toggleBold}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para controle programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * <IconButton
+ *   ref={buttonRef}
+ *   icon={<EditIcon />}
+ *   size="md"
+ *   onClick={() => startEditing()}
+ * />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: "sm" | "md";
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.d.ts

@@ -275,4 +275,77 @@ declare const NavButton: react.ForwardRefExoticComponent<{
     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 };
+/**
+ * IconButton component props interface
+ */
+type IconButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: 'sm' | 'md';
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconButton component for Analytica Ensino platforms
+ *
+ * Um botão compacto apenas com ícone, ideal para menus dropdown,
+ * barras de ferramentas e ações secundárias.
+ * Oferece dois tamanhos com estilo consistente.
+ * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
+ * 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 size - Tamanho do botão (sm, md)
+ * @param active - Estado ativo/selecionado do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button compacto estilizado apenas com ícone
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<MoreVerticalIcon />}
+ *   size="sm"
+ *   onClick={() => openMenu()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
+ * <IconButton
+ *   icon={<BoldIcon />}
+ *   active={isBold}
+ *   onClick={toggleBold}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para controle programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * <IconButton
+ *   ref={buttonRef}
+ *   icon={<EditIcon />}
+ *   size="md"
+ *   onClick={() => startEditing()}
+ * />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: "sm" | "md";
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   Button: () => Button,
   DropdownMenu: () => DropdownMenu,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  IconButton: () => IconButton,
   IconRoundedButton: () => IconRoundedButton,
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
@@ -596,11 +597,64 @@ var NavButton = (0, import_react4.forwardRef)(
   }
 );
 NavButton.displayName = "NavButton";
+
+// src/components/IconButton/IconButton.tsx
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconButton = (0, import_react5.forwardRef)(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "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 sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   DropdownMenu,
   DropdownMenuTrigger,
+  IconButton,
   IconRoundedButton,
   MenuContent,
   MenuItem,

package/dist/index.mjs

@@ -561,10 +561,63 @@ var NavButton = forwardRef4(
   }
 );
 NavButton.displayName = "NavButton";
+
+// src/components/IconButton/IconButton.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconButton = forwardRef5(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "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 sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ jsx8(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx8("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 export {
   Button,
   DropdownMenu,
   DropdownMenuTrigger,
+  IconButton,
   IconRoundedButton,
   MenuContent,
   MenuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "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",