analytica-frontend-lib 1.0.9 → 1.0.11

package/dist/index.css

@@ -22,7 +22,6 @@
       "Courier New",
       monospace;
     --spacing: 0.25rem;
-    --container-2xs: 18rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -49,6 +48,8 @@
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
     --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-400: #525252;
@@ -58,7 +59,9 @@
     --color-primary-800: #0d0d0d;
     --color-primary-950: #080808;
     --color-text: #fefeff;
+    --color-text-600: #737373;
     --color-text-700: #525252;
+    --color-text-800: #404040;
     --color-text-900: #262627;
     --color-text-950: #171717;
     --color-background: #ffffff;
@@ -66,6 +69,8 @@
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
     --color-border-50: #f3f3f3;
+    --color-border-100: #e6e6e6;
+    --color-border-200: #dddcdb;
     --color-success-300: #66b584;
     --color-success-400: #489766;
     --color-success-500: #348352;
@@ -76,7 +81,9 @@
     --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
+    --color-indicator-error: #b91c1c;
     --font-weight-hairline: 100;
     --text-2xs: 0.625rem;
     --text-2xs--line-height: calc(1 / 0.625);
@@ -284,18 +291,38 @@
   }
 }
 @layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .relative {
+    position: relative;
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -317,8 +344,8 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .w-2xs {
-    width: var(--container-2xs);
+  .h-10 {
+    height: calc(var(--spacing) * 10);
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
@@ -329,9 +356,18 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-full {
+    width: 100%;
+  }
+  .caption-bottom {
+    caption-side: bottom;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -365,6 +401,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -375,18 +414,42 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
   .border-border-50 {
     border-color: var(--color-border-50);
   }
+  .border-border-100 {
+    border-color: var(--color-border-100);
+  }
+  .border-border-200 {
+    border-color: var(--color-border-200);
+  }
   .border-error-300 {
     border-color: var(--color-error-300);
   }
   .border-error-500 {
     border-color: var(--color-error-500);
   }
+  .border-indicator-error {
+    border-color: var(--color-indicator-error);
+  }
+  .border-indicator-primary {
+    border-color: var(--color-indicator-primary);
+  }
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
@@ -399,6 +462,9 @@
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-background-50 {
+    background-color: var(--color-background-50);
+  }
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
@@ -411,6 +477,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -444,6 +513,15 @@
   .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -532,15 +610,36 @@
   .text-text {
     color: var(--color-text);
   }
+  .text-text-600 {
+    color: var(--color-text-600);
+  }
   .text-text-700 {
     color: var(--color-text-700);
   }
+  .text-text-800 {
+    color: var(--color-text-800);
+  }
   .text-text-900 {
     color: var(--color-text-900);
   }
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-soft-shadow-1 {
     --tw-shadow: 0px 0px 10px var(--tw-shadow-color, rgba(38, 38, 38, 0.1));
     box-shadow:
@@ -550,10 +649,41 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ring-primary-950 {
+    --tw-ring-color: var(--color-primary-950);
+  }
+  .ring-offset-0 {
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .transition-colors {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .hover\:border-error-400 {
     &:hover {
       @media (hover: hover) {
@@ -874,6 +1004,37 @@
       opacity: 50%;
     }
   }
+  .\[\&_tr\:first-child\]\:border-0 {
+    & tr:first-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&_tr\:last-child\]\:border-0 {
+    & tr:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
+    &:has([role=checkbox]) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
+  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
+    & > [role=checkbox] {
+      --tw-translate-y: 2px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    & > tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
 }
 @layer base {
   [data-theme=dark] {
@@ -1217,6 +1378,9 @@
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -1245,6 +1409,9 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
     }
   }
 }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
 
 /**
  * Button component props interface
@@ -78,13 +78,14 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
 /**
  * SelectionButton component for Analytica Ensino platforms
  *
- * Um botão com ícone e texto para ações e navegação.
- * Ideal para filtros, tags, categorias, etc.
+ * Um botão com ícone e texto para ações e navegação com estado de seleção.
+ * Ideal para filtros, tags, categorias, seleção de tipos, 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
@@ -94,7 +95,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
  * <SelectionButton
  *   icon={<TagIcon />}
  *   label="Categoria"
- *   onClick={() => handleAction()}
+ *   selected={false}
+ *   onClick={() => handleSelection()}
  * />
  * ```
  *
@@ -111,7 +113,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
  *   ref={buttonRef}
  *   icon={<TagIcon />}
  *   label="Categoria"
- *   onClick={() => handleAction()}
+ *   selected={isSelected}
+ *   onClick={() => setSelected(!isSelected)}
  * />
  * ```
  */
@@ -120,6 +123,8 @@ declare const SelectionButton: react.ForwardRefExoticComponent<{
     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>>;
@@ -179,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, IconRoundedButton, SelectionButton, Text };
+type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    state?: TableRowState;
+}
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
 
 /**
  * Button component props interface
@@ -78,13 +78,14 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
 /**
  * SelectionButton component for Analytica Ensino platforms
  *
- * Um botão com ícone e texto para ações e navegação.
- * Ideal para filtros, tags, categorias, etc.
+ * Um botão com ícone e texto para ações e navegação com estado de seleção.
+ * Ideal para filtros, tags, categorias, seleção de tipos, 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
@@ -94,7 +95,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
  * <SelectionButton
  *   icon={<TagIcon />}
  *   label="Categoria"
- *   onClick={() => handleAction()}
+ *   selected={false}
+ *   onClick={() => handleSelection()}
  * />
  * ```
  *
@@ -111,7 +113,8 @@ declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconR
  *   ref={buttonRef}
  *   icon={<TagIcon />}
  *   label="Categoria"
- *   onClick={() => handleAction()}
+ *   selected={isSelected}
+ *   onClick={() => setSelected(!isSelected)}
  * />
  * ```
  */
@@ -120,6 +123,8 @@ declare const SelectionButton: react.ForwardRefExoticComponent<{
     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>>;
@@ -179,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, IconRoundedButton, SelectionButton, Text };
+type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    state?: TableRowState;
+}
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+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 };

package/dist/index.js

@@ -23,6 +23,14 @@ __export(index_exports, {
   Button: () => Button,
   IconRoundedButton: () => IconRoundedButton,
   SelectionButton: () => SelectionButton,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
   Text: () => Text
 });
 module.exports = __toCommonJS(index_exports);
@@ -128,50 +136,55 @@ var IconRoundedButton = ({
 // src/components/SelectionButton/SelectionButton.tsx
 var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var SelectionButton = (0, import_react.forwardRef)(({ icon, label, className = "", disabled, ...props }, ref) => {
-  const baseClasses = [
-    "inline-flex",
-    "items-center",
-    "justify-start",
-    "gap-2",
-    "p-4",
-    "rounded-xl",
-    "cursor-pointer",
-    "border",
-    "border-border-50",
-    "bg-background",
-    "text-sm",
-    "text-text-700",
-    "font-bold",
-    "shadow-soft-shadow-1",
-    "hover:bg-background-100",
-    "focus-visible:outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-indicator-info",
-    "focus-visible:ring-offset-0",
-    "focus-visible:shadow-none",
-    "active:ring-2",
-    "active:ring-primary-950",
-    "active:ring-offset-0",
-    "active:shadow-none",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed"
-  ].join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: `${baseClasses} ${className}`,
-      disabled,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
-      ]
-    }
-  );
-});
+var SelectionButton = (0, import_react.forwardRef)(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
 SelectionButton.displayName = "SelectionButton";
 
 // src/components/Text/Text.tsx
@@ -229,10 +242,116 @@ var Text = ({
     }
   );
 };
+
+// src/components/Table/Table.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Table = (0, import_react2.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
+};
+var TableRow = (0, import_react2.forwardRef)(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   IconRoundedButton,
   SelectionButton,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   Text
 });

package/dist/index.mjs

@@ -99,50 +99,55 @@ var IconRoundedButton = ({
 // src/components/SelectionButton/SelectionButton.tsx
 import { forwardRef } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SelectionButton = forwardRef(({ icon, label, className = "", disabled, ...props }, ref) => {
-  const baseClasses = [
-    "inline-flex",
-    "items-center",
-    "justify-start",
-    "gap-2",
-    "p-4",
-    "rounded-xl",
-    "cursor-pointer",
-    "border",
-    "border-border-50",
-    "bg-background",
-    "text-sm",
-    "text-text-700",
-    "font-bold",
-    "shadow-soft-shadow-1",
-    "hover:bg-background-100",
-    "focus-visible:outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-indicator-info",
-    "focus-visible:ring-offset-0",
-    "focus-visible:shadow-none",
-    "active:ring-2",
-    "active:ring-primary-950",
-    "active:ring-offset-0",
-    "active:shadow-none",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed"
-  ].join(" ");
-  return /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: `${baseClasses} ${className}`,
-      disabled,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
-        /* @__PURE__ */ jsx3("span", { children: label })
-      ]
-    }
-  );
-});
+var SelectionButton = forwardRef(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ jsx3("span", { children: label })
+        ]
+      }
+    );
+  }
+);
 SelectionButton.displayName = "SelectionButton";
 
 // src/components/Text/Text.tsx
@@ -200,9 +205,115 @@ var Text = ({
     }
   );
 };
+
+// src/components/Table/Table.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Table = forwardRef2(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs3(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
+};
+var TableRow = forwardRef2(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 export {
   Button,
   IconRoundedButton,
   SelectionButton,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   Text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",