analytica-frontend-lib 1.2.14 → 1.2.16

package/dist/Table/TablePagination/index.js

@@ -0,0 +1,153 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Table/TablePagination.tsx
+var TablePagination_exports = {};
+__export(TablePagination_exports, {
+  default: () => TablePagination_default
+});
+module.exports = __toCommonJS(TablePagination_exports);
+var import_phosphor_react = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Table/TablePagination.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TablePagination = ({
+  totalItems,
+  currentPage,
+  totalPages,
+  itemsPerPage,
+  itemsPerPageOptions = [10, 20, 50, 100],
+  onPageChange,
+  onItemsPerPageChange,
+  itemLabel = "itens",
+  className,
+  ...props
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handleItemsPerPageChange = (e) => {
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(Number(e.target.value));
+    }
+  };
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
+        "sm:justify-between",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
+          startItem,
+          " de ",
+          totalItems,
+          " ",
+          itemLabel
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
+          onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "select",
+              {
+                value: itemsPerPage,
+                onChange: handleItemsPerPageChange,
+                className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
+                "aria-label": "Items por p\xE1gina",
+                children: itemsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: option, children: [
+                  option,
+                  " itens"
+                ] }, option))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_phosphor_react.CaretDown,
+              {
+                size: 14,
+                weight: "regular",
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
+            "P\xE1gina ",
+            currentPage,
+            " de ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              onClick: handlePrevious,
+              disabled: isFirstPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "P\xE1gina anterior",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              onClick: handleNext,
+              disabled: isLastPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "Pr\xF3xima p\xE1gina",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+TablePagination.displayName = "TablePagination";
+var TablePagination_default = TablePagination;
+//# sourceMappingURL=index.js.map

package/dist/Table/TablePagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/TablePagination.tsx","../../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes, ChangeEvent } from 'react';\nimport { CaretLeft, CaretRight, CaretDown } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\nexport interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Total number of items\n   */\n  totalItems: number;\n  /**\n   * Current page (1-based)\n   */\n  currentPage: number;\n  /**\n   * Total number of pages\n   */\n  totalPages: number;\n  /**\n   * Items per page\n   */\n  itemsPerPage: number;\n  /**\n   * Available options for items per page\n   * @default [10, 20, 50, 100]\n   */\n  itemsPerPageOptions?: number[];\n  /**\n   * Callback when page changes\n   */\n  onPageChange: (page: number) => void;\n  /**\n   * Callback when items per page changes\n   */\n  onItemsPerPageChange?: (itemsPerPage: number) => void;\n  /**\n   * Customizable label for items (e.g., \"escolas\", \"alunos\", \"atividades\")\n   * @default \"itens\"\n   */\n  itemLabel?: string;\n}\n\n/**\n * Table pagination component with navigation controls and items per page selector\n *\n * @example\n * ```tsx\n * import { TablePagination } from 'analytica-frontend-lib';\n *\n * <TablePagination\n *   totalItems={1000}\n *   currentPage={1}\n *   totalPages={10}\n *   itemsPerPage={10}\n *   itemsPerPageOptions={[10, 20, 50, 100]}\n *   onPageChange={(page) => setCurrentPage(page)}\n *   onItemsPerPageChange={(items) => setItemsPerPage(items)}\n *   itemLabel=\"escolas\"\n * />\n * ```\n */\nconst TablePagination = ({\n  totalItems,\n  currentPage,\n  totalPages,\n  itemsPerPage,\n  itemsPerPageOptions = [10, 20, 50, 100],\n  onPageChange,\n  onItemsPerPageChange,\n  itemLabel = 'itens',\n  className,\n  ...props\n}: TablePaginationProps) => {\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n\n  const handlePrevious = () => {\n    if (currentPage > 1) {\n      onPageChange(currentPage - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (currentPage < totalPages) {\n      onPageChange(currentPage + 1);\n    }\n  };\n\n  const handleItemsPerPageChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    if (onItemsPerPageChange) {\n      onItemsPerPageChange(Number(e.target.value));\n    }\n  };\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4',\n        'sm:justify-between',\n        className\n      )}\n      {...props}\n    >\n      {/* Items count - isolado à esquerda no desktop */}\n      <span className=\"font-normal text-xs leading-[14px] text-text-800\">\n        {startItem} de {totalItems} {itemLabel}\n      </span>\n\n      {/* Grupo direita: selector + page info + botões */}\n      <div className=\"flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start\">\n        {/* Items per page selector */}\n        {onItemsPerPageChange && (\n          <div className=\"relative\">\n            <select\n              value={itemsPerPage}\n              onChange={handleItemsPerPageChange}\n              className=\"w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900\"\n              aria-label=\"Items por página\"\n            >\n              {itemsPerPageOptions.map((option) => (\n                <option key={option} value={option}>\n                  {option} itens\n                </option>\n              ))}\n            </select>\n            <CaretDown\n              size={14}\n              weight=\"regular\"\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none\"\n            />\n          </div>\n        )}\n\n        {/* Page info */}\n        <span className=\"font-normal text-xs leading-[14px] text-text-950\">\n          Página {currentPage} de {totalPages}\n        </span>\n\n        {/* Previous button */}\n        <button\n          onClick={handlePrevious}\n          disabled={isFirstPage}\n          className={cn(\n            'flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all',\n            isFirstPage\n              ? 'opacity-50 cursor-not-allowed'\n              : 'hover:bg-primary-950/10 cursor-pointer'\n          )}\n          aria-label=\"Página anterior\"\n        >\n          <CaretLeft size={12} weight=\"bold\" className=\"text-primary-950\" />\n          <span className=\"font-medium text-xs leading-[14px] text-primary-950\">\n            Anterior\n          </span>\n        </button>\n\n        {/* Next button */}\n        <button\n          onClick={handleNext}\n          disabled={isLastPage}\n          className={cn(\n            'flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all',\n            isLastPage\n              ? 'opacity-50 cursor-not-allowed'\n              : 'hover:bg-primary-950/10 cursor-pointer'\n          )}\n          aria-label=\"Próxima página\"\n        >\n          <span className=\"font-medium text-xs leading-[14px] text-primary-950\">\n            Próxima\n          </span>\n          <CaretRight size={12} weight=\"bold\" className=\"text-primary-950\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nTablePagination.displayName = 'TablePagination';\n\nexport default TablePagination;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAiD;;;ACDjD,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADoGM;AA7CN,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB,CAAC,IAAI,IAAI,IAAI,GAAG;AAAA,EACtC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,aAAa,cAAc,KAAK,eAAe;AAErD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,cAAc,GAAG;AACnB,mBAAa,cAAc,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,cAAc,YAAY;AAC5B,mBAAa,cAAc,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,2BAA2B,CAAC,MAAsC;AACtE,QAAI,sBAAsB;AACxB,2BAAqB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM,cAAc,gBAAgB;AACpC,QAAM,aAAa,gBAAgB;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAGJ;AAAA,qDAAC,UAAK,WAAU,oDACb;AAAA;AAAA,UAAU;AAAA,UAAK;AAAA,UAAW;AAAA,UAAE;AAAA,WAC/B;AAAA,QAGA,6CAAC,SAAI,WAAU,6FAEZ;AAAA,kCACC,6CAAC,SAAI,WAAU,YACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,WAAU;AAAA,gBACV,cAAW;AAAA,gBAEV,8BAAoB,IAAI,CAAC,WACxB,6CAAC,YAAoB,OAAO,QACzB;AAAA;AAAA,kBAAO;AAAA,qBADG,MAEb,CACD;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,WAAU;AAAA;AAAA,YACZ;AAAA,aACF;AAAA,UAIF,6CAAC,UAAK,WAAU,oDAAmD;AAAA;AAAA,YACzD;AAAA,YAAY;AAAA,YAAK;AAAA,aAC3B;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,cACI,kCACA;AAAA,cACN;AAAA,cACA,cAAW;AAAA,cAEX;AAAA,4DAAC,mCAAU,MAAM,IAAI,QAAO,QAAO,WAAU,oBAAmB;AAAA,gBAChE,4CAAC,UAAK,WAAU,uDAAsD,sBAEtE;AAAA;AAAA;AAAA,UACF;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,aACI,kCACA;AAAA,cACN;AAAA,cACA,cAAW;AAAA,cAEX;AAAA,4DAAC,UAAK,WAAU,uDAAsD,wBAEtE;AAAA,gBACA,4CAAC,oCAAW,MAAM,IAAI,QAAO,QAAO,WAAU,oBAAmB;AAAA;AAAA;AAAA,UACnE;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;","names":[]}

package/dist/Table/TablePagination/index.mjs

@@ -0,0 +1,132 @@
+// src/components/Table/TablePagination.tsx
+import { CaretLeft, CaretRight, CaretDown } from "phosphor-react";
+
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Table/TablePagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TablePagination = ({
+  totalItems,
+  currentPage,
+  totalPages,
+  itemsPerPage,
+  itemsPerPageOptions = [10, 20, 50, 100],
+  onPageChange,
+  onItemsPerPageChange,
+  itemLabel = "itens",
+  className,
+  ...props
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handleItemsPerPageChange = (e) => {
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(Number(e.target.value));
+    }
+  };
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
+        "sm:justify-between",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
+          startItem,
+          " de ",
+          totalItems,
+          " ",
+          itemLabel
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
+          onItemsPerPageChange && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: itemsPerPage,
+                onChange: handleItemsPerPageChange,
+                className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
+                "aria-label": "Items por p\xE1gina",
+                children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxs("option", { value: option, children: [
+                  option,
+                  " itens"
+                ] }, option))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CaretDown,
+              {
+                size: 14,
+                weight: "regular",
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
+            "P\xE1gina ",
+            currentPage,
+            " de ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handlePrevious,
+              disabled: isFirstPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "P\xE1gina anterior",
+              children: [
+                /* @__PURE__ */ jsx(CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleNext,
+              disabled: isLastPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "Pr\xF3xima p\xE1gina",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
+                /* @__PURE__ */ jsx(CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+TablePagination.displayName = "TablePagination";
+var TablePagination_default = TablePagination;
+export {
+  TablePagination_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Table/TablePagination/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/TablePagination.tsx","../../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes, ChangeEvent } from 'react';\nimport { CaretLeft, CaretRight, CaretDown } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\nexport interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Total number of items\n   */\n  totalItems: number;\n  /**\n   * Current page (1-based)\n   */\n  currentPage: number;\n  /**\n   * Total number of pages\n   */\n  totalPages: number;\n  /**\n   * Items per page\n   */\n  itemsPerPage: number;\n  /**\n   * Available options for items per page\n   * @default [10, 20, 50, 100]\n   */\n  itemsPerPageOptions?: number[];\n  /**\n   * Callback when page changes\n   */\n  onPageChange: (page: number) => void;\n  /**\n   * Callback when items per page changes\n   */\n  onItemsPerPageChange?: (itemsPerPage: number) => void;\n  /**\n   * Customizable label for items (e.g., \"escolas\", \"alunos\", \"atividades\")\n   * @default \"itens\"\n   */\n  itemLabel?: string;\n}\n\n/**\n * Table pagination component with navigation controls and items per page selector\n *\n * @example\n * ```tsx\n * import { TablePagination } from 'analytica-frontend-lib';\n *\n * <TablePagination\n *   totalItems={1000}\n *   currentPage={1}\n *   totalPages={10}\n *   itemsPerPage={10}\n *   itemsPerPageOptions={[10, 20, 50, 100]}\n *   onPageChange={(page) => setCurrentPage(page)}\n *   onItemsPerPageChange={(items) => setItemsPerPage(items)}\n *   itemLabel=\"escolas\"\n * />\n * ```\n */\nconst TablePagination = ({\n  totalItems,\n  currentPage,\n  totalPages,\n  itemsPerPage,\n  itemsPerPageOptions = [10, 20, 50, 100],\n  onPageChange,\n  onItemsPerPageChange,\n  itemLabel = 'itens',\n  className,\n  ...props\n}: TablePaginationProps) => {\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n\n  const handlePrevious = () => {\n    if (currentPage > 1) {\n      onPageChange(currentPage - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (currentPage < totalPages) {\n      onPageChange(currentPage + 1);\n    }\n  };\n\n  const handleItemsPerPageChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    if (onItemsPerPageChange) {\n      onItemsPerPageChange(Number(e.target.value));\n    }\n  };\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4',\n        'sm:justify-between',\n        className\n      )}\n      {...props}\n    >\n      {/* Items count - isolado à esquerda no desktop */}\n      <span className=\"font-normal text-xs leading-[14px] text-text-800\">\n        {startItem} de {totalItems} {itemLabel}\n      </span>\n\n      {/* Grupo direita: selector + page info + botões */}\n      <div className=\"flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start\">\n        {/* Items per page selector */}\n        {onItemsPerPageChange && (\n          <div className=\"relative\">\n            <select\n              value={itemsPerPage}\n              onChange={handleItemsPerPageChange}\n              className=\"w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900\"\n              aria-label=\"Items por página\"\n            >\n              {itemsPerPageOptions.map((option) => (\n                <option key={option} value={option}>\n                  {option} itens\n                </option>\n              ))}\n            </select>\n            <CaretDown\n              size={14}\n              weight=\"regular\"\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none\"\n            />\n          </div>\n        )}\n\n        {/* Page info */}\n        <span className=\"font-normal text-xs leading-[14px] text-text-950\">\n          Página {currentPage} de {totalPages}\n        </span>\n\n        {/* Previous button */}\n        <button\n          onClick={handlePrevious}\n          disabled={isFirstPage}\n          className={cn(\n            'flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all',\n            isFirstPage\n              ? 'opacity-50 cursor-not-allowed'\n              : 'hover:bg-primary-950/10 cursor-pointer'\n          )}\n          aria-label=\"Página anterior\"\n        >\n          <CaretLeft size={12} weight=\"bold\" className=\"text-primary-950\" />\n          <span className=\"font-medium text-xs leading-[14px] text-primary-950\">\n            Anterior\n          </span>\n        </button>\n\n        {/* Next button */}\n        <button\n          onClick={handleNext}\n          disabled={isLastPage}\n          className={cn(\n            'flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all',\n            isLastPage\n              ? 'opacity-50 cursor-not-allowed'\n              : 'hover:bg-primary-950/10 cursor-pointer'\n          )}\n          aria-label=\"Próxima página\"\n        >\n          <span className=\"font-medium text-xs leading-[14px] text-primary-950\">\n            Próxima\n          </span>\n          <CaretRight size={12} weight=\"bold\" className=\"text-primary-950\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nTablePagination.displayName = 'TablePagination';\n\nexport default TablePagination;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n"],"mappings":";AACA,SAAS,WAAW,YAAY,iBAAiB;;;ACDjD,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADoGM,SASM,KATN;AA7CN,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB,CAAC,IAAI,IAAI,IAAI,GAAG;AAAA,EACtC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,aAAa,cAAc,KAAK,eAAe;AAErD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,cAAc,GAAG;AACnB,mBAAa,cAAc,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,cAAc,YAAY;AAC5B,mBAAa,cAAc,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,2BAA2B,CAAC,MAAsC;AACtE,QAAI,sBAAsB;AACxB,2BAAqB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM,cAAc,gBAAgB;AACpC,QAAM,aAAa,gBAAgB;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAGJ;AAAA,6BAAC,UAAK,WAAU,oDACb;AAAA;AAAA,UAAU;AAAA,UAAK;AAAA,UAAW;AAAA,UAAE;AAAA,WAC/B;AAAA,QAGA,qBAAC,SAAI,WAAU,6FAEZ;AAAA,kCACC,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,WAAU;AAAA,gBACV,cAAW;AAAA,gBAEV,8BAAoB,IAAI,CAAC,WACxB,qBAAC,YAAoB,OAAO,QACzB;AAAA;AAAA,kBAAO;AAAA,qBADG,MAEb,CACD;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,WAAU;AAAA;AAAA,YACZ;AAAA,aACF;AAAA,UAIF,qBAAC,UAAK,WAAU,oDAAmD;AAAA;AAAA,YACzD;AAAA,YAAY;AAAA,YAAK;AAAA,aAC3B;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,cACI,kCACA;AAAA,cACN;AAAA,cACA,cAAW;AAAA,cAEX;AAAA,oCAAC,aAAU,MAAM,IAAI,QAAO,QAAO,WAAU,oBAAmB;AAAA,gBAChE,oBAAC,UAAK,WAAU,uDAAsD,sBAEtE;AAAA;AAAA;AAAA,UACF;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,aACI,kCACA;AAAA,cACN;AAAA,cACA,cAAW;AAAA,cAEX;AAAA,oCAAC,UAAK,WAAU,uDAAsD,wBAEtE;AAAA,gBACA,oBAAC,cAAW,MAAM,IAAI,QAAO,QAAO,WAAU,oBAAmB;AAAA;AAAA;AAAA,UACnE;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;","names":[]}

package/dist/Table/index.d.mts

@@ -1,5 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+export { default as TablePagination, TablePaginationProps } from './TablePagination/index.mjs';
+import 'react/jsx-runtime';
 
 type TableVariant = 'default' | 'borderless';
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';

package/dist/Table/index.d.ts

@@ -1,5 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+export { default as TablePagination, TablePaginationProps } from './TablePagination/index.js';
+import 'react/jsx-runtime';
 
 type TableVariant = 'default' | 'borderless';
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';

package/dist/Table/index.js

@@ -26,6 +26,7 @@ __export(Table_exports, {
   TableFooter: () => TableFooter,
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
+  TablePagination: () => TablePagination_default,
   TableRow: () => TableRow,
   default: () => Table_default,
   useTableSort: () => useTableSort
@@ -41,7 +42,7 @@ function cn(...inputs) {
 }
 
 // src/components/Table/Table.tsx
-var import_phosphor_react = require("phosphor-react");
+var import_phosphor_react2 = require("phosphor-react");
 
 // src/components/Text/Text.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -181,8 +182,128 @@ var Button = ({
 };
 var Button_default = Button;
 
-// src/components/Table/Table.tsx
+// src/components/Table/TablePagination.tsx
+var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var TablePagination = ({
+  totalItems,
+  currentPage,
+  totalPages,
+  itemsPerPage,
+  itemsPerPageOptions = [10, 20, 50, 100],
+  onPageChange,
+  onItemsPerPageChange,
+  itemLabel = "itens",
+  className,
+  ...props
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handleItemsPerPageChange = (e) => {
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(Number(e.target.value));
+    }
+  };
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
+        "sm:justify-between",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
+          startItem,
+          " de ",
+          totalItems,
+          " ",
+          itemLabel
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
+          onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "select",
+              {
+                value: itemsPerPage,
+                onChange: handleItemsPerPageChange,
+                className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
+                "aria-label": "Items por p\xE1gina",
+                children: itemsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: option, children: [
+                  option,
+                  " itens"
+                ] }, option))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_phosphor_react.CaretDown,
+              {
+                size: 14,
+                weight: "regular",
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
+            "P\xE1gina ",
+            currentPage,
+            " de ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              onClick: handlePrevious,
+              disabled: isFirstPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "P\xE1gina anterior",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react.CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              onClick: handleNext,
+              disabled: isLastPage,
+              className: cn(
+                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
+                isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
+              ),
+              "aria-label": "Pr\xF3xima p\xE1gina",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react.CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+TablePagination.displayName = "TablePagination";
+var TablePagination_default = TablePagination;
+
+// src/components/Table/Table.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function useTableSort(data, options = {}) {
   const { syncWithUrl = false } = options;
   const getInitialState = () => {
@@ -299,7 +420,7 @@ var Table = (0, import_react.forwardRef)(
     const showNoSearchResult = hasSearchTerm && isTableBodyEmpty;
     const showEmptyState = !hasSearchTerm && isTableBodyEmpty;
     if (showNoSearchResult) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: cn(
@@ -307,7 +428,7 @@ var Table = (0, import_react.forwardRef)(
             variant === "default" && "border border-border-200 rounded-xl"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "table",
               {
                 ref,
@@ -324,16 +445,16 @@ var Table = (0, import_react.forwardRef)(
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-8 flex justify-center", children: noSearchResultImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "py-8 flex justify-center", children: noSearchResultImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               NoSearchResult_default,
               {
                 image: noSearchResultImage,
                 title: noSearchResultTitle,
                 description: noSearchResultDescription
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: noSearchResultTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-500 text-sm", children: noSearchResultDescription })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: noSearchResultTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-500 text-sm", children: noSearchResultDescription })
             ] }) })
           ]
         }
@@ -342,9 +463,9 @@ var Table = (0, import_react.forwardRef)(
     const modifiedChildren = import_react.Children.map(children, (child) => {
       if ((0, import_react.isValidElement)(child) && child.type === TableBody && showEmptyState) {
         return (0, import_react.cloneElement)(child, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableRow, { variant, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableCell, { colSpan: columnCount, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-600 text-base font-normal", children: emptyStateMessage }),
-            onEmptyStateButtonClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableRow, { variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableCell, { colSpan: columnCount, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-600 text-base font-normal", children: emptyStateMessage }),
+            onEmptyStateButtonClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Button_default,
               {
                 variant: "solid",
@@ -359,14 +480,14 @@ var Table = (0, import_react.forwardRef)(
       }
       return child;
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         className: cn(
           "relative w-full overflow-x-auto",
           variant === "default" && "border border-border-200 rounded-xl"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "table",
           {
             ref,
@@ -378,7 +499,7 @@ var Table = (0, import_react.forwardRef)(
             children: [
               !import_react.Children.toArray(children).some(
                 (child) => (0, import_react.isValidElement)(child) && child.type === TableCaption
-              ) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("caption", { className: "sr-only", children: "My Table" }),
+              ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("caption", { className: "sr-only", children: "My Table" }),
               modifiedChildren
             ]
           }
@@ -388,7 +509,7 @@ var Table = (0, import_react.forwardRef)(
   }
 );
 Table.displayName = "Table";
-var TableHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var TableHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "thead",
   {
     ref,
@@ -398,7 +519,7 @@ var TableHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) =>
 ));
 TableHeader.displayName = "TableHeader";
 var TableBody = (0, import_react.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "tbody",
     {
       ref,
@@ -409,7 +530,7 @@ var TableBody = (0, import_react.forwardRef)(
 );
 TableBody.displayName = "TableBody";
 var TableFooter = (0, import_react.forwardRef)(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "tfoot",
     {
       ref,
@@ -449,7 +570,7 @@ var TableRow = (0, import_react.forwardRef)(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "tr",
       {
         ref,
@@ -481,7 +602,7 @@ var TableHead = (0, import_react.forwardRef)(
         onSort();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "th",
       {
         ref,
@@ -492,11 +613,11 @@ var TableHead = (0, import_react.forwardRef)(
         ),
         onClick: handleClick,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
           children,
-          sortable && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
-            sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
-            sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
+          sortable && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col", children: [
+            sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
+            sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
           ] })
         ] })
       }
@@ -504,7 +625,7 @@ var TableHead = (0, import_react.forwardRef)(
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var TableCell = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "td",
   {
     ref,
@@ -516,7 +637,7 @@ var TableCell = (0, import_react.forwardRef)(({ className, ...props }, ref) => /
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var TableCaption = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "caption",
   {
     ref,
@@ -537,6 +658,7 @@ var Table_default = Table;
   TableFooter,
   TableHead,
   TableHeader,
+  TablePagination,
   TableRow,
   useTableSort
 });