@aspprev/versi-ds 0.4.6 → 0.4.8

package/dist/{chunk-5LJGBVPA.js → chunk-3UXUAX5K.js}

@@ -862,10 +862,34 @@ import cs2 from "classnames";
 
 // src/components/pagination/components/PageButtons.tsx
 import cs from "classnames";
+
+// src/components/pagination/pagination-styles.ts
+var PAGINATION_SIZE_CLASSES = {
+  normal: {
+    itemHeight: "box-border h-7 min-h-7",
+    pageWidth: "w-8",
+    controlWidth: "w-24",
+    controlPadding: "px-2",
+    text: "text-sm",
+    gap: "gap-1.5"
+  },
+  small: {
+    itemHeight: "box-border h-6 min-h-6",
+    pageWidth: "w-6",
+    controlWidth: "w-20",
+    controlPadding: "px-1.5",
+    text: "text-xs",
+    gap: "gap-1"
+  }
+};
+var PAGINATION_ITEM_HEIGHT_CLASS = PAGINATION_SIZE_CLASSES.normal.itemHeight;
+
+// src/components/pagination/components/PageButtons.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
 function PageButtons(props) {
-  const { currentPage, totalResults, perPage, onClick } = props;
-  const pages = totalResults > 10 ? Math.ceil(totalResults / perPage) : 1;
+  const { currentPage, totalResults, perPage, onClick, size } = props;
+  const pages = Math.max(1, Math.ceil(totalResults / perPage));
+  const sizeClasses = PAGINATION_SIZE_CLASSES[size];
   let pagesAfter = pages - currentPage > 2 ? 2 : pages - currentPage;
   let pagesBefore = currentPage > 2 ? 2 : currentPage === 2 ? 1 : 0;
   let buttonsBefore = [];
@@ -879,8 +903,13 @@ function PageButtons(props) {
           type: "button",
           "aria-label": `P\xE1gina ${page}`,
           className: cs(
-            "flex h-7 w-8 items-center justify-center rounded border border-border-default",
-            "cursor-pointer bg-surface-card text-sm text-content-primary hover:bg-surface-muted",
+            sizeClasses.itemHeight,
+            "flex",
+            sizeClasses.pageWidth,
+            "items-center justify-center rounded border border-border-default",
+            "cursor-pointer bg-surface-card",
+            sizeClasses.text,
+            "text-content-primary hover:bg-surface-muted",
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
           ),
           onClick: () => onClick(page),
@@ -900,8 +929,13 @@ function PageButtons(props) {
           type: "button",
           "aria-label": `P\xE1gina ${page}`,
           className: cs(
-            "flex h-7 w-8 items-center justify-center rounded border border-border-default",
-            "cursor-pointer bg-surface-card text-sm text-content-primary hover:bg-surface-muted",
+            sizeClasses.itemHeight,
+            "flex",
+            sizeClasses.pageWidth,
+            "items-center justify-center rounded border border-border-default",
+            "cursor-pointer bg-surface-card",
+            sizeClasses.text,
+            "text-content-primary hover:bg-surface-muted",
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
           ),
           onClick: () => onClick(page),
@@ -921,8 +955,13 @@ function PageButtons(props) {
         "aria-current": "page",
         disabled: true,
         className: cs(
-          "flex h-7 w-8 items-center justify-center rounded border border-selection-border",
-          "cursor-default bg-selection-background text-sm text-selection-content"
+          sizeClasses.itemHeight,
+          "flex",
+          sizeClasses.pageWidth,
+          "items-center justify-center rounded border border-selection-border",
+          "cursor-default bg-selection-background",
+          sizeClasses.text,
+          "text-selection-content"
         ),
         children: currentPage
       },
@@ -936,7 +975,17 @@ var PageButtons_default = PageButtons;
 // src/components/pagination/PaginationView.tsx
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function PaginationView(props) {
-  const { currentPage, totalResults, perPage, onClick } = props;
+  const {
+    currentPage,
+    totalResults,
+    perPage,
+    onClick,
+    size = "normal",
+    variant = "default"
+  } = props;
+  const totalPages = Math.max(1, Math.ceil(totalResults / perPage));
+  const sizeClasses = PAGINATION_SIZE_CLASSES[size];
+  const controlWidth = variant === "arrows" ? sizeClasses.pageWidth : sizeClasses.controlWidth;
   return /* @__PURE__ */ jsxs9(
     "nav",
     {
@@ -954,20 +1003,25 @@ function PaginationView(props) {
           totalResults,
           " resultados"
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-stretch gap-1.5", children: [
+        /* @__PURE__ */ jsxs9("div", { className: cs2("flex items-stretch", sizeClasses.gap), children: [
           currentPage > 1 && /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
+              "aria-label": "Ir para a p\xE1gina anterior",
               className: cs2(
-                "h-7 w-24 rounded-sm border border-border-default",
-                "flex items-center justify-center gap-1 text-content-primary text-sm",
+                sizeClasses.itemHeight,
+                controlWidth,
+                sizeClasses.controlPadding,
+                "rounded-sm border border-border-default",
+                "flex items-center justify-center gap-1 text-content-primary",
+                sizeClasses.text,
                 "cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
               ),
               onClick: () => onClick(currentPage - 1),
               children: [
-                /* @__PURE__ */ jsx17(MdChevronLeft, { size: 10, "aria-hidden": "true", focusable: "false" }),
-                "Anterior"
+                /* @__PURE__ */ jsx17(MdChevronLeft, { size: size === "small" ? 9 : 10, "aria-hidden": "true", focusable: "false" }),
+                variant === "default" && "Anterior"
               ]
             }
           ),
@@ -977,22 +1031,28 @@ function PaginationView(props) {
               currentPage,
               totalResults,
               perPage,
-              onClick
+              onClick,
+              size
             }
           ),
-          currentPage < Math.ceil(totalResults / 10) && /* @__PURE__ */ jsxs9(
+          currentPage < totalPages && /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
+              "aria-label": "Ir para a pr\xF3xima p\xE1gina",
               className: cs2(
-                "h-7 w-24 rounded-sm border border-border-default",
-                "flex items-center justify-center gap-1 text-content-primary text-sm",
+                sizeClasses.itemHeight,
+                controlWidth,
+                sizeClasses.controlPadding,
+                "rounded-sm border border-border-default",
+                "flex items-center justify-center gap-1 text-content-primary",
+                sizeClasses.text,
                 "cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
               ),
               onClick: () => onClick(currentPage + 1),
               children: [
-                "Pr\xF3xima",
-                /* @__PURE__ */ jsx17(MdChevronRight, { size: 10, "aria-hidden": "true", focusable: "false" })
+                variant === "default" && "Pr\xF3xima",
+                /* @__PURE__ */ jsx17(MdChevronRight, { size: size === "small" ? 9 : 10, "aria-hidden": "true", focusable: "false" })
               ]
             }
           )
@@ -1589,7 +1649,7 @@ function PageTabsHeader({
           "nav",
           {
             "aria-label": title,
-            className: "flex w-full min-w-0 max-w-full flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
+            className: "flex w-auto flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
             children: /* @__PURE__ */ jsx24("div", { role: "tablist", className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
               const Icon = tab.icon;
               const isActive = activeTab === tab.id;
@@ -2461,6 +2521,7 @@ function TableView({
   };
   const isNarrowContainer = tableWidth !== void 0 && tableWidth < 640;
   const paginationVariant = isNarrowContainer ? "arrows" : pagination?.variant ?? "default";
+  const paginationSizeClasses = PAGINATION_SIZE_CLASSES[pagination?.size ?? "normal"];
   const isAdaptiveCompact = overflowMode === "adaptive" && tableWidth !== void 0 && tableWidth < adaptiveBreakpoint;
   const overflowClass = overflowMode === "scroll" ? "overflow-x-auto" : "overflow-x-hidden";
   const resolvedScrollAreaMaxHeight = stickyHeader ? scrollAreaMaxHeight ?? "calc(100dvh - 240px)" : scrollAreaMaxHeight;
@@ -2590,7 +2651,7 @@ function TableView({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs18("div", { className: `flex items-center ${paginationSizeClasses.gap}`, children: [
             /* @__PURE__ */ jsxs18(
               "button",
               {
@@ -2598,7 +2659,7 @@ function TableView({
                 onClick: pagination.onPrevious,
                 disabled: pagination.currentPage === 1,
                 "aria-label": "Ir para a p\xE1gina anterior",
-                className: `inline-flex min-h-11 min-w-11 items-center justify-center gap-1 rounded border border-border-default px-2 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50 ${paginationVariant === "arrows" ? "min-w-6 tablet:min-w-7" : ""}`,
+                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : paginationSizeClasses.controlWidth} items-center justify-center gap-1 rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
                 children: [
                   /* @__PURE__ */ jsx33(MdKeyboardArrowLeft, { className: "h-3 w-3 text-content-muted" }),
                   paginationVariant !== "arrows" && "Anterior"
@@ -2610,7 +2671,7 @@ function TableView({
               {
                 "aria-live": "polite",
                 "aria-atomic": "true",
-                className: "inline-flex h-6 min-w-6 items-center justify-center rounded border border-selection-border bg-selection-background px-1.5 text-sm font-bold leading-none text-selection-content tablet:h-7 tablet:min-w-7",
+                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationSizeClasses.pageWidth} items-center justify-center rounded border border-selection-border bg-selection-background ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} font-bold leading-none text-selection-content`,
                 children: pagination.currentPage
               }
             ),
@@ -2621,7 +2682,7 @@ function TableView({
                 onClick: pagination.onNext,
                 disabled: pagination.currentPage === pagination.totalPages,
                 "aria-label": "Ir para a pr\xF3xima p\xE1gina",
-                className: `inline-flex min-h-11 min-w-11 items-center justify-center gap-1 rounded border border-border-default px-2 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50 ${paginationVariant === "arrows" ? "min-w-6 tablet:min-w-7" : ""}`,
+                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : paginationSizeClasses.controlWidth} items-center justify-center gap-1 rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
                 children: [
                   paginationVariant !== "arrows" && "Pr\xF3xima",
                   /* @__PURE__ */ jsx33(MdKeyboardArrowRight, { className: "h-3 w-3 text-content-muted" })
@@ -2657,6 +2718,7 @@ function Table(props) {
     totalWidthUnits,
     showRowDivider = false,
     enableRowHover = false,
+    paginationSize = "normal",
     paginationVariant = "default",
     expandable,
     overflowMode,
@@ -2916,6 +2978,7 @@ function Table(props) {
     totalItems: internalPagination.totalItems,
     startItem: internalPagination.startItem,
     endItem: internalPagination.endItem,
+    size: paginationSize,
     variant: paginationVariant,
     onPrevious: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
     onNext: () => setCurrentPage(
@@ -2923,6 +2986,7 @@ function Table(props) {
     )
   } : pagination ? {
     ...pagination,
+    size: pagination.size ?? "normal",
     variant: pagination.variant ?? "default"
   } : pagination;
   const resolvedShowPagination = data ? Boolean(
@@ -3148,7 +3212,7 @@ function MobileCardTable({
             onClick: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
             disabled: pagination.currentPage === 1,
             "aria-label": "Ir para a p\xE1gina anterior",
-            className: "inline-flex h-7 items-center justify-center gap-1 rounded border border-border-default px-3 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:opacity-50",
+            className: `${PAGINATION_ITEM_HEIGHT_CLASS} inline-flex items-center justify-center gap-1 rounded border border-border-default px-3 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:opacity-50`,
             children: [
               /* @__PURE__ */ jsx35(MdKeyboardArrowLeft2, { className: "h-3 w-3 text-content-muted" }),
               "Anterior"
@@ -3160,7 +3224,7 @@ function MobileCardTable({
           {
             "aria-live": "polite",
             "aria-atomic": "true",
-            className: "inline-flex h-7 min-w-7 items-center justify-center rounded border border-selection-border bg-selection-background px-2 text-sm font-bold leading-none text-selection-content",
+            className: `${PAGINATION_ITEM_HEIGHT_CLASS} inline-flex min-w-7 items-center justify-center rounded border border-selection-border bg-selection-background px-2 text-sm font-bold leading-none text-selection-content`,
             children: pagination.currentPage
           }
         ),
@@ -3173,7 +3237,7 @@ function MobileCardTable({
             ),
             disabled: pagination.currentPage === pagination.totalPages,
             "aria-label": "Ir para a pr\xF3xima p\xE1gina",
-            className: "inline-flex h-7 items-center justify-center gap-1 rounded border border-border-default px-3 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:opacity-50",
+            className: `${PAGINATION_ITEM_HEIGHT_CLASS} inline-flex items-center justify-center gap-1 rounded border border-border-default px-3 text-sm leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:opacity-50`,
             children: [
               "Pr\xF3ximo",
               /* @__PURE__ */ jsx35(MdKeyboardArrowRight2, { className: "h-3 w-3 text-content-muted" })
@@ -3277,4 +3341,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-5LJGBVPA.js.map
+//# sourceMappingURL=chunk-3UXUAX5K.js.map