@sarunyu/system-one 4.9.34 → 4.9.35

package/dist/index.cjs

@@ -6158,6 +6158,207 @@ function Breadcrumb({ items, className }) {
     ] }, index2);
   }) });
 }
+function PaginationBanner({
+  count: count2,
+  activeIndex,
+  onIndexChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-1", className),
+      role: "tablist",
+      "aria-label": "Slide indicators",
+      children: Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": i === activeIndex,
+          "aria-label": `Slide ${i + 1}`,
+          onClick: () => onIndexChange == null ? void 0 : onIndexChange(i),
+          className: cn(
+            "h-1.5 rounded-[12px] transition-all duration-200",
+            i === activeIndex ? "w-8 bg-bg-brand" : "w-1.5 bg-black/10 hover:bg-black/20"
+          )
+        },
+        i
+      ))
+    }
+  );
+}
+function PaginationCarousel({
+  progress,
+  trackWidth = 40,
+  className
+}) {
+  const clamped = Math.min(1, Math.max(0, progress));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center", className),
+      role: "progressbar",
+      "aria-valuenow": Math.round(clamped * 100),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10",
+          style: { width: trackWidth },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-full rounded-[12px] bg-bg-brand transition-all duration-200",
+              style: { width: Math.round(clamped * trackWidth) }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function buildPageItems(total) {
+  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
+  return [1, 2, 3, "...", total];
+}
+function buildHiddenPages(total) {
+  if (total <= 5) return [];
+  return Array.from({ length: total - 4 }, (_, i) => i + 4);
+}
+function Pagination({
+  totalPages,
+  currentPage,
+  onPageChange,
+  className
+}) {
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const ellipsisRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!dropdownOpen) return;
+    function handleOutside(e) {
+      var _a;
+      if (!((_a = containerRef.current) == null ? void 0 : _a.contains(e.target))) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [dropdownOpen]);
+  const pageItems = buildPageItems(totalPages);
+  const hiddenPages = buildHiddenPages(totalPages);
+  const goTo = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange == null ? void 0 : onPageChange(page);
+      setDropdownOpen(false);
+    }
+  };
+  const cell = "flex h-8 w-[39px] shrink-0 items-center justify-center text-sm leading-5 transition-colors select-none";
+  const divider = "border-l border-border";
+  const ellipsisLeft = ellipsisRef.current ? ellipsisRef.current.offsetLeft + ellipsisRef.current.offsetWidth / 2 : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex w-fit", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        "aria-label": "Pagination",
+        className: "inline-flex w-fit overflow-hidden rounded-lg border border-border",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous page",
+              disabled: currentPage <= 1,
+              onClick: () => goTo(currentPage - 1),
+              className: cn(
+                cell,
+                "bg-bg-default text-icon-default hover:bg-bg-default-hover disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, weight: "regular" })
+            }
+          ),
+          pageItems.map(
+            (item, idx) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref: ellipsisRef,
+                type: "button",
+                "aria-label": "More pages",
+                "aria-expanded": dropdownOpen,
+                "aria-haspopup": "listbox",
+                onClick: () => setDropdownOpen((v) => !v),
+                className: cn(
+                  cell,
+                  divider,
+                  "bg-bg-default text-text-default cursor-pointer hover:bg-bg-default-hover"
+                ),
+                children: "..."
+              },
+              `ellipsis-${idx}`
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Page ${item}`,
+                "aria-current": item === currentPage ? "page" : void 0,
+                onClick: () => goTo(item),
+                className: cn(
+                  cell,
+                  divider,
+                  "cursor-pointer",
+                  item === currentPage ? "bg-bg-brand font-bold text-text-default-white" : "bg-bg-default font-normal text-text-default hover:bg-bg-default-hover"
+                ),
+                children: item
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Next page",
+              disabled: currentPage >= totalPages,
+              onClick: () => goTo(currentPage + 1),
+              className: cn(
+                cell,
+                divider,
+                "bg-bg-default text-icon-default hover:bg-bg-default-hover disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, weight: "regular" })
+            }
+          )
+        ]
+      }
+    ),
+    dropdownOpen && hiddenPages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Select page",
+        className: "absolute bottom-full mb-1 z-50 flex w-[39px] flex-col overflow-y-auto rounded-lg border border-border bg-bg-default shadow-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        style: { left: ellipsisLeft, transform: "translateX(-50%)", maxHeight: 160 },
+        children: hiddenPages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": page === currentPage,
+            onClick: () => goTo(page),
+            className: cn(
+              "flex h-8 w-full shrink-0 cursor-pointer items-center justify-center text-sm leading-5 transition-colors select-none",
+              page === currentPage ? "bg-bg-brand font-bold text-text-default-white" : "bg-bg-default font-normal text-text-default hover:bg-bg-default-hover"
+            ),
+            children: page
+          },
+          page
+        ))
+      }
+    )
+  ] });
+}
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -9585,6 +9786,9 @@ const index = {
   Avatar,
   AvatarStack,
   Breadcrumb,
+  Pagination,
+  PaginationBanner,
+  PaginationCarousel,
   Tooltip,
   Popover,
   cn,
@@ -9607,6 +9811,9 @@ exports.Input = Input;
 exports.Modal = Modal;
 exports.Notification = Notification;
 exports.OptionList = OptionList;
+exports.Pagination = Pagination;
+exports.PaginationBanner = PaginationBanner;
+exports.PaginationCarousel = PaginationCarousel;
 exports.Popover = Popover;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;