@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/table/table-pagination.js

@@ -1,15 +1,17 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import * as U from "react";
-import { Root as X, Trigger as Z, Value as J, Icon as q, Portal as K, Content as Q, Viewport as Y, Group as ee, Label as te, Item as oe, ItemIndicator as ne, ItemText as re } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
-import { mergeClasses as ie, SLOT_ATTR as ae, shorthands as i } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as se } from "../../styles/make-styles.js";
-import { accentA3 as z, leadingSm as m, textSm as u, grayA11 as k, fontWeightSemibold as ce, leadingXs as le, textXs as ge, body as de, accent8 as pe, grayA4 as x, grayA3 as g, spacingElement1 as he, spacingGroup1 as R, accent11 as C, trackingNormal as me, accentA8 as ue, spacingElement2 as ve, radiusMd as fe, grayA6 as we, radiusLg as W, spacingElement3 as ke } from "../../tokens/index.js";
-import { useAppearanceAttributes as xe } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as Ce } from "../density-provider/density-provider.js";
-import { calculatePagination as Pe, getPageNumbers as ye, clampPage as Ie } from "../../lib/pagination.js";
-import { TooltipProvider as Ne, Tooltip as Le, TooltipTrigger as Se, TooltipContent as Te } from "../tooltip/tooltip.js";
-import { Button as l } from "../button/button.js";
-const Be = (o) => /* @__PURE__ */ a(
+import * as Z from "react";
+import { Root as U, Trigger as J, Value as Y, Icon as q, Portal as K, Content as Q, Viewport as ee, Group as te, Label as oe, Item as ne, ItemIndicator as re, ItemText as ie } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
+import { mergeClasses as ae, SLOT_ATTR as se, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as ce } from "../../styles/make-styles.js";
+import { boxModel as c, nativeControl as le } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as ge } from "../../styles/overlay-layer.js";
+import { accentA3 as E, leadingSm as u, textSm as v, grayA11 as x, fontWeightSemibold as de, leadingXs as pe, textXs as he, body as me, accent8 as ue, grayA4 as C, grayA3 as d, spacingElement1 as ve, spacingGroup1 as R, accent11 as P, trackingNormal as fe, accentA8 as we, spacingElement2 as ke, radiusMd as xe, grayA6 as Ce, radiusLg as W, spacingElement3 as Pe } from "../../tokens/index.js";
+import { useAppearanceAttributes as ye } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as Ie } from "../density-provider/density-provider.js";
+import { calculatePagination as Ne, getPageNumbers as Le, clampPage as Se } from "../../lib/pagination.js";
+import { TooltipProvider as Te, Tooltip as Be, TooltipTrigger as be, TooltipContent as Ae } from "../tooltip/tooltip.js";
+import { Button as g } from "../button/button.js";
+const je = (o) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -27,7 +29,7 @@ const Be = (o) => /* @__PURE__ */ a(
       /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
     ]
   }
-), be = (o) => /* @__PURE__ */ t(
+), ze = (o) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -42,7 +44,7 @@ const Be = (o) => /* @__PURE__ */ a(
     ...o,
     children: /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
   }
-), Ae = (o) => /* @__PURE__ */ t(
+), Ee = (o) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -57,7 +59,7 @@ const Be = (o) => /* @__PURE__ */ a(
     ...o,
     children: /* @__PURE__ */ t("path", { d: "m9 18 6-6-6-6" })
   }
-), je = (o) => /* @__PURE__ */ a(
+), Re = (o) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -75,7 +77,7 @@ const Be = (o) => /* @__PURE__ */ a(
       /* @__PURE__ */ t("path", { d: "M18 6v12" })
     ]
   }
-), ze = (o) => /* @__PURE__ */ t(
+), We = (o) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -90,7 +92,7 @@ const Be = (o) => /* @__PURE__ */ a(
     ...o,
     children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6" })
   }
-), Re = (o) => /* @__PURE__ */ t(
+), $e = (o) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -105,30 +107,31 @@ const Be = (o) => /* @__PURE__ */ a(
     ...o,
     children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" })
   }
-), We = [10, 25, 50, 100], Ee = se({
+), Oe = [10, 25, 50, 100], _e = ce({
   root: {
+    ...c,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: R,
-    ...i.paddingBlock(ke),
-    fontSize: u,
-    lineHeight: m
+    ...i.paddingBlock(Pe),
+    fontSize: v,
+    lineHeight: u
   },
   left: {
     display: "flex",
     alignItems: "center",
-    gap: ve
+    gap: ke
   },
   navButton: {
-    backgroundColor: g,
-    color: C,
+    backgroundColor: d,
+    color: P,
     ":hover": {
-      backgroundColor: x
+      backgroundColor: C
     },
     ":disabled": {
-      backgroundColor: g,
-      color: ue,
+      backgroundColor: d,
+      color: we,
       pointerEvents: "none"
     }
   },
@@ -137,56 +140,58 @@ const Be = (o) => /* @__PURE__ */ a(
   },
   pageButtonInactive: {
     backgroundColor: "transparent",
-    color: C,
+    color: P,
     ":hover": {
-      backgroundColor: g
+      backgroundColor: d
     },
     ":active": {
-      backgroundColor: x
+      backgroundColor: C
     }
   },
   ellipsisButton: {
-    letterSpacing: me,
+    letterSpacing: fe,
     backgroundColor: "transparent",
-    color: C,
+    color: P,
     ":hover": {
-      backgroundColor: g
+      backgroundColor: d
     }
   },
   right: {
+    ...c,
     display: "flex",
     alignItems: "center",
     gap: R,
     paddingRight: "0.125rem"
   },
   range: {
-    fontSize: u,
-    lineHeight: m,
-    color: k,
+    fontSize: v,
+    lineHeight: u,
+    color: x,
     fontVariantNumeric: "tabular-nums"
   },
   selectTrigger: {
+    ...le,
     display: "flex",
     height: "2rem",
     width: "auto",
     minWidth: "4rem",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: he,
+    gap: ve,
     ...i.borderRadius(W),
-    backgroundColor: g,
+    backgroundColor: d,
     ...i.paddingInline("0.75rem"),
-    fontSize: u,
-    lineHeight: m,
+    fontSize: v,
+    lineHeight: u,
     cursor: "pointer",
     ...i.borderWidth(0),
     ":hover": {
-      backgroundColor: x
+      backgroundColor: C
     },
     ":focus": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: pe,
+      outlineColor: ue,
       outlineOffset: "2px"
     },
     ":disabled": {
@@ -197,46 +202,51 @@ const Be = (o) => /* @__PURE__ */ a(
   selectIcon: {
     display: "flex",
     alignItems: "center",
-    color: k
+    color: x
   },
   selectContent: {
+    ...c,
     position: "relative",
-    zIndex: 50,
+    zIndex: ge,
     ...i.overflow("hidden"),
     ...i.borderRadius(W),
-    ...i.border("1px", "solid", we),
-    backgroundColor: de,
+    ...i.border("1px", "solid", Ce),
+    backgroundColor: me,
     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
   },
   selectViewport: {
+    ...c,
     ...i.padding("0.25rem")
   },
   selectLabel: {
+    ...c,
     ...i.padding("0.375rem", "0.5rem"),
-    fontSize: ge,
-    lineHeight: le,
-    fontWeight: ce,
-    color: k
+    fontSize: he,
+    lineHeight: pe,
+    fontWeight: de,
+    color: x
   },
   selectItem: {
+    ...c,
     position: "relative",
     display: "flex",
     cursor: "pointer",
     userSelect: "none",
     alignItems: "center",
-    ...i.borderRadius(fe),
+    ...i.borderRadius(xe),
     ...i.padding("0.375rem", "0.5rem", "0.375rem", "2rem"),
-    fontSize: u,
-    lineHeight: m,
+    fontSize: v,
+    lineHeight: u,
     outlineStyle: "none",
     ":focus": {
-      backgroundColor: z
+      backgroundColor: E
     },
     "&[data-state='checked']": {
-      backgroundColor: z
+      backgroundColor: E
     }
   },
   selectItemIndicator: {
+    ...c,
     position: "absolute",
     left: "0.5rem",
     display: "flex",
@@ -245,7 +255,7 @@ const Be = (o) => /* @__PURE__ */ a(
     alignItems: "center",
     justifyContent: "center"
   }
-}), $e = {
+}), De = {
   navigation: "Pagination",
   firstPage: "First page",
   previousPage: "Previous page",
@@ -254,128 +264,128 @@ const Be = (o) => /* @__PURE__ */ a(
   goToPage: (o) => `Page ${o}`,
   jumpToPage: (o) => `Jump to page ${o}`,
   pageSizeSelector: (o) => `Rows per page: ${o}`
-}, Ze = U.forwardRef(function({
-  page: P,
-  totalItems: d,
-  pageSize: v,
-  onPageChange: c,
-  onPageSizeChange: E,
-  pageSizeOptions: $ = We,
-  siblingCount: O = 2,
+}, Qe = Z.forwardRef(function({
+  page: y,
+  totalItems: p,
+  pageSize: f,
+  onPageChange: l,
+  onPageSizeChange: $,
+  pageSizeOptions: O = Oe,
+  siblingCount: _ = 2,
   disabled: s = !1,
   labels: D,
   className: V,
-  ..._
-}, F) {
-  var T;
-  const e = { ...$e, ...D }, n = Ee(), y = Ce(), H = xe(), { totalPages: f, start: I, end: N, isFirstPage: L, isLastPage: S } = Pe({
-    page: P,
-    pageSize: v,
-    totalItems: d
-  }), p = Ie(P, f), G = ye(p, f, O), M = (r) => {
-    const h = parseInt(r, 10);
-    isNaN(h) || E(h);
+  ...F
+}, H) {
+  var B;
+  const e = { ...De, ...D }, n = _e(), I = Ie(), M = ye(), { totalPages: w, start: N, end: L, isFirstPage: S, isLastPage: T } = Ne({
+    page: y,
+    pageSize: f,
+    totalItems: p
+  }), h = Se(y, w), G = Le(h, w, _), X = (r) => {
+    const m = parseInt(r, 10);
+    isNaN(m) || $(m);
   };
-  return d === 0 ? null : /* @__PURE__ */ t(Ne, { children: /* @__PURE__ */ a(
+  return p === 0 ? null : /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ a(
     "div",
     {
-      ref: F,
+      ref: H,
       "data-slot": "table-pagination",
-      [ae]: "table-pagination",
+      [se]: "table-pagination",
       "data-fs-element": "TablePagination",
       role: "navigation",
       "aria-label": e == null ? void 0 : e.navigation,
-      className: ie(n.root, V),
-      ..._,
+      className: ae(n.root, V),
+      ...F,
       children: [
         /* @__PURE__ */ a("div", { className: n.left, children: [
           /* @__PURE__ */ t(
-            l,
+            g,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || L,
-              onClick: () => c(1),
+              disabled: s || S,
+              onClick: () => l(1),
               "aria-label": e == null ? void 0 : e.firstPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(Be, {})
+              children: /* @__PURE__ */ t(je, {})
             }
           ),
           /* @__PURE__ */ t(
-            l,
+            g,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || L,
-              onClick: () => c(p - 1),
+              disabled: s || S,
+              onClick: () => l(h - 1),
               "aria-label": e == null ? void 0 : e.previousPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(be, {})
+              children: /* @__PURE__ */ t(ze, {})
             }
           ),
-          G.map((r, h) => {
-            var b, A, j;
-            const B = r.type === "ellipsis" ? `ellipsis-${h}-${r.targetPage}` : `page-${r.page}`;
+          G.map((r, m) => {
+            var A, j, z;
+            const b = r.type === "ellipsis" ? `ellipsis-${m}-${r.targetPage}` : `page-${r.page}`;
             if (r.type === "ellipsis")
-              return /* @__PURE__ */ a(Le, { children: [
-                /* @__PURE__ */ t(Se, { asChild: !0, children: /* @__PURE__ */ t(
-                  l,
+              return /* @__PURE__ */ a(Be, { children: [
+                /* @__PURE__ */ t(be, { asChild: !0, children: /* @__PURE__ */ t(
+                  g,
                   {
                     variant: "tertiary",
                     size: "icon-sm",
                     shape: "normal",
                     disabled: s,
-                    onClick: () => c(r.targetPage),
-                    "aria-label": (b = e == null ? void 0 : e.jumpToPage) == null ? void 0 : b.call(e, r.targetPage),
+                    onClick: () => l(r.targetPage),
+                    "aria-label": (A = e == null ? void 0 : e.jumpToPage) == null ? void 0 : A.call(e, r.targetPage),
                     className: n.ellipsisButton,
                     children: "..."
                   }
                 ) }),
-                /* @__PURE__ */ t(Te, { children: (A = e == null ? void 0 : e.jumpToPage) == null ? void 0 : A.call(e, r.targetPage) })
-              ] }, B);
-            const w = r.page === p;
+                /* @__PURE__ */ t(Ae, { children: (j = e == null ? void 0 : e.jumpToPage) == null ? void 0 : j.call(e, r.targetPage) })
+              ] }, b);
+            const k = r.page === h;
             return /* @__PURE__ */ t(
-              l,
+              g,
               {
-                variant: w ? "secondary" : "tertiary",
+                variant: k ? "secondary" : "tertiary",
                 size: "icon-sm",
                 shape: "normal",
                 disabled: s,
-                onClick: () => c(r.page),
-                "aria-label": (j = e == null ? void 0 : e.goToPage) == null ? void 0 : j.call(e, r.page),
-                "aria-current": w ? "page" : void 0,
-                className: w ? n.pageButtonActive : n.pageButtonInactive,
+                onClick: () => l(r.page),
+                "aria-label": (z = e == null ? void 0 : e.goToPage) == null ? void 0 : z.call(e, r.page),
+                "aria-current": k ? "page" : void 0,
+                className: k ? n.pageButtonActive : n.pageButtonInactive,
                 children: r.page
               },
-              B
+              b
             );
           }),
           /* @__PURE__ */ t(
-            l,
+            g,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || S,
-              onClick: () => c(p + 1),
+              disabled: s || T,
+              onClick: () => l(h + 1),
               "aria-label": e == null ? void 0 : e.nextPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(Ae, {})
+              children: /* @__PURE__ */ t(Ee, {})
             }
           ),
           /* @__PURE__ */ t(
-            l,
+            g,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || S,
-              onClick: () => c(f),
+              disabled: s || T,
+              onClick: () => l(w),
               "aria-label": e == null ? void 0 : e.lastPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(je, {})
+              children: /* @__PURE__ */ t(Re, {})
             }
           )
         ] }),
@@ -386,24 +396,24 @@ const Be = (o) => /* @__PURE__ */ a(
               "data-slot": "table-pagination-range",
               className: n.range,
               "aria-live": "polite",
-              children: e != null && e.rangeDisplay ? e.rangeDisplay(I, N, d) : `${I}-${N} / ${d}`
+              children: e != null && e.rangeDisplay ? e.rangeDisplay(N, L, p) : `${N}-${L} / ${p}`
             }
           ),
           /* @__PURE__ */ a(
-            X,
+            U,
             {
-              value: String(v),
-              onValueChange: M,
+              value: String(f),
+              onValueChange: X,
               disabled: s,
               children: [
                 /* @__PURE__ */ a(
-                  Z,
+                  J,
                   {
                     className: n.selectTrigger,
-                    "aria-label": (T = e == null ? void 0 : e.pageSizeSelector) == null ? void 0 : T.call(e, v),
+                    "aria-label": (B = e == null ? void 0 : e.pageSizeSelector) == null ? void 0 : B.call(e, f),
                     children: [
-                      /* @__PURE__ */ t(J, {}),
-                      /* @__PURE__ */ t(q, { className: n.selectIcon, children: /* @__PURE__ */ t(ze, {}) })
+                      /* @__PURE__ */ t(Y, {}),
+                      /* @__PURE__ */ t(q, { className: n.selectIcon, children: /* @__PURE__ */ t(We, {}) })
                     ]
                   }
                 ),
@@ -411,20 +421,20 @@ const Be = (o) => /* @__PURE__ */ a(
                   Q,
                   {
                     className: n.selectContent,
-                    ...y !== void 0 ? { "data-density": y } : {},
-                    ...H,
+                    ...I !== void 0 ? { "data-density": I } : {},
+                    ...M,
                     position: "popper",
                     sideOffset: 4,
-                    children: /* @__PURE__ */ t(Y, { className: n.selectViewport, children: /* @__PURE__ */ a(ee, { children: [
-                      (e == null ? void 0 : e.resultsPerPage) && /* @__PURE__ */ t(te, { className: n.selectLabel, children: e.resultsPerPage }),
-                      $.map((r) => /* @__PURE__ */ a(
-                        oe,
+                    children: /* @__PURE__ */ t(ee, { className: n.selectViewport, children: /* @__PURE__ */ a(te, { children: [
+                      (e == null ? void 0 : e.resultsPerPage) && /* @__PURE__ */ t(oe, { className: n.selectLabel, children: e.resultsPerPage }),
+                      O.map((r) => /* @__PURE__ */ a(
+                        ne,
                         {
                           value: String(r),
                           className: n.selectItem,
                           children: [
-                            /* @__PURE__ */ t("span", { className: n.selectItemIndicator, children: /* @__PURE__ */ t(ne, { children: /* @__PURE__ */ t(Re, { style: { width: 16, height: 16 } }) }) }),
-                            /* @__PURE__ */ t(re, { children: r })
+                            /* @__PURE__ */ t("span", { className: n.selectItemIndicator, children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t($e, { style: { width: 16, height: 16 } }) }) }),
+                            /* @__PURE__ */ t(ie, { children: r })
                           ]
                         },
                         r
@@ -441,6 +451,6 @@ const Be = (o) => /* @__PURE__ */ a(
   ) });
 });
 export {
-  Ze as TablePagination
+  Qe as TablePagination
 };
 //# sourceMappingURL=table-pagination.js.map