@sytechui/pagination 2.2.27

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @sytechui/pagination
+
+The Pagination component allows you to display active page and navigate between multiple pages.
+
+Please refer to the [documentation](https://heroui.com/docs/components/pagination) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/pagination
+# or
+npm i @sytechui/pagination
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-5S65XA6Q.mjs

@@ -0,0 +1,82 @@
+"use client";
+
+// src/use-pagination-item.ts
+import { useMemo } from "react";
+import { handleLinkClick, useRouter } from "@react-aria/utils";
+import { dataAttr, chain, mergeProps } from "@sytechui/shared-utils";
+import { filterDOMProps, useDOMRef } from "@sytechui/react-utils";
+import { useHover, usePress } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import { cn } from "@sytechui/theme";
+function usePaginationItem(props) {
+  const {
+    as,
+    ref,
+    value,
+    children,
+    isActive,
+    isDisabled,
+    onPress,
+    onClick,
+    getAriaLabel,
+    className,
+    ...otherProps
+  } = props;
+  const isLink = !!(props == null ? void 0 : props.href);
+  const Component = as || isLink ? "a" : "li";
+  const shouldFilterDOMProps = typeof Component === "string";
+  const domRef = useDOMRef(ref);
+  const router = useRouter();
+  const ariaLabel = useMemo(
+    () => isActive ? `${getAriaLabel == null ? void 0 : getAriaLabel(value)} active` : getAriaLabel == null ? void 0 : getAriaLabel(value),
+    [value, isActive]
+  );
+  const { isPressed, pressProps } = usePress({
+    isDisabled,
+    onPress
+  });
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing({});
+  const { isHovered, hoverProps } = useHover({ isDisabled });
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-current": dataAttr(isActive),
+      "aria-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(isDisabled),
+      "data-active": dataAttr(isActive),
+      "data-focus": dataAttr(isFocused),
+      "data-hover": dataAttr(isHovered),
+      "data-pressed": dataAttr(isPressed),
+      "data-focus-visible": dataAttr(isFocusVisible),
+      ...mergeProps(
+        props2,
+        pressProps,
+        focusProps,
+        hoverProps,
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps
+        })
+      ),
+      className: cn(className, props2.className),
+      onClick: (e) => {
+        chain(pressProps == null ? void 0 : pressProps.onClick, onClick)(e);
+        handleLinkClick(e, router, props2.href, props2.routerOptions);
+      }
+    };
+  };
+  return {
+    Component,
+    children,
+    ariaLabel,
+    isFocused,
+    isFocusVisible,
+    getItemProps
+  };
+}
+
+export {
+  usePaginationItem
+};

package/dist/chunk-BIG4ST5P.mjs

@@ -0,0 +1,217 @@
+"use client";
+import {
+  pagination_cursor_default
+} from "./chunk-MA7OMMHX.mjs";
+import {
+  pagination_item_default
+} from "./chunk-BNRXGTRW.mjs";
+import {
+  usePagination
+} from "./chunk-RL6XUYZP.mjs";
+
+// src/pagination.tsx
+import { useCallback } from "react";
+import { useLocale } from "@react-aria/i18n";
+import { forwardRef } from "@sytechui/system";
+import { PaginationItemType } from "@sytechui/use-pagination";
+import { ChevronIcon, EllipsisIcon, ForwardIcon } from "@sytechui/shared-icons";
+import { dataAttr } from "@sytechui/shared-utils";
+import { cn } from "@sytechui/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var Pagination = forwardRef((props, ref) => {
+  const {
+    Component,
+    dotsJump,
+    slots,
+    classNames,
+    total,
+    range,
+    loop,
+    activePage,
+    disableCursorAnimation,
+    disableAnimation,
+    renderItem: renderItemProp,
+    onNext,
+    onPrevious,
+    setPage,
+    getItemAriaLabel,
+    getItemRef,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps
+  } = usePagination({ ...props, ref });
+  const { direction } = useLocale();
+  const isRTL = direction === "rtl";
+  const renderChevronIcon = useCallback(
+    (key) => {
+      if (key === PaginationItemType.PREV && !isRTL || key === PaginationItemType.NEXT && isRTL) {
+        return /* @__PURE__ */ jsx(ChevronIcon, {});
+      }
+      return /* @__PURE__ */ jsx(
+        ChevronIcon,
+        {
+          className: slots.chevronNext({
+            class: classNames == null ? void 0 : classNames.chevronNext
+          })
+        }
+      );
+    },
+    [slots, isRTL]
+  );
+  const renderPrevItem = useCallback(
+    (value) => {
+      return /* @__PURE__ */ jsx(
+        pagination_item_default,
+        {
+          className: slots.prev({
+            class: classNames == null ? void 0 : classNames.prev
+          }),
+          "data-slot": "prev",
+          getAriaLabel: getItemAriaLabel,
+          isDisabled: !loop && activePage === 1,
+          value,
+          onPress: onPrevious,
+          children: renderChevronIcon(PaginationItemType.PREV)
+        },
+        PaginationItemType.PREV
+      );
+    },
+    [slots, classNames, loop, activePage, isRTL, total, getItemAriaLabel, onPrevious]
+  );
+  const renderNextItem = useCallback(
+    (value) => {
+      return /* @__PURE__ */ jsx(
+        pagination_item_default,
+        {
+          className: slots.next({
+            class: cn(classNames == null ? void 0 : classNames.next)
+          }),
+          "data-slot": "next",
+          getAriaLabel: getItemAriaLabel,
+          isDisabled: !loop && activePage === total,
+          value,
+          onPress: onNext,
+          children: renderChevronIcon(PaginationItemType.NEXT)
+        },
+        PaginationItemType.NEXT
+      );
+    },
+    [slots, classNames, loop, activePage, isRTL, total, getItemAriaLabel, onNext]
+  );
+  const renderItem = useCallback(
+    (value, index) => {
+      const isBefore = index < range.indexOf(activePage);
+      if (renderItemProp && typeof renderItemProp === "function") {
+        let page = typeof value == "number" ? value : index;
+        if (value === PaginationItemType.NEXT) {
+          page = activePage + 1;
+        }
+        if (value === PaginationItemType.PREV) {
+          page = activePage - 1;
+        }
+        if (value === PaginationItemType.DOTS) {
+          page = isBefore ? activePage - dotsJump >= 1 ? activePage - dotsJump : 1 : activePage + dotsJump <= total ? activePage + dotsJump : total;
+        }
+        const itemChildren = {
+          [PaginationItemType.PREV]: renderChevronIcon(PaginationItemType.PREV),
+          [PaginationItemType.NEXT]: renderChevronIcon(PaginationItemType.NEXT),
+          [PaginationItemType.DOTS]: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(EllipsisIcon, { className: slots == null ? void 0 : slots.ellipsis({ class: classNames == null ? void 0 : classNames.ellipsis }) }),
+            /* @__PURE__ */ jsx(
+              ForwardIcon,
+              {
+                className: slots == null ? void 0 : slots.forwardIcon({ class: classNames == null ? void 0 : classNames.forwardIcon }),
+                "data-before": dataAttr(isBefore)
+              }
+            )
+          ] })
+        };
+        return renderItemProp({
+          value,
+          index,
+          key: `${value}-${index}`,
+          page,
+          total,
+          children: typeof value === "number" ? value : itemChildren[value],
+          activePage,
+          dotsJump,
+          isBefore,
+          isActive: value === activePage,
+          isPrevious: value === activePage - 1,
+          isNext: value === activePage + 1,
+          isFirst: value === 1,
+          isLast: value === total,
+          onNext,
+          onPrevious,
+          setPage,
+          onPress: () => setPage(page),
+          ref: typeof value === "number" ? (node) => getItemRef(node, value) : void 0,
+          className: slots.item({ class: classNames == null ? void 0 : classNames.item }),
+          getAriaLabel: getItemAriaLabel
+        });
+      }
+      if (value === PaginationItemType.PREV) {
+        return renderPrevItem(value);
+      }
+      if (value === PaginationItemType.NEXT) {
+        return renderNextItem(value);
+      }
+      if (value === PaginationItemType.DOTS) {
+        return /* @__PURE__ */ jsxs(
+          pagination_item_default,
+          {
+            className: slots.item({
+              class: cn(classNames == null ? void 0 : classNames.item, "group")
+            }),
+            "data-slot": "item",
+            getAriaLabel: getItemAriaLabel,
+            value,
+            onPress: () => isBefore ? setPage(activePage - dotsJump >= 1 ? activePage - dotsJump : 1) : setPage(activePage + dotsJump <= total ? activePage + dotsJump : total),
+            children: [
+              /* @__PURE__ */ jsx(EllipsisIcon, { className: slots == null ? void 0 : slots.ellipsis({ class: classNames == null ? void 0 : classNames.ellipsis }) }),
+              /* @__PURE__ */ jsx(
+                ForwardIcon,
+                {
+                  className: slots == null ? void 0 : slots.forwardIcon({ class: classNames == null ? void 0 : classNames.forwardIcon }),
+                  "data-before": dataAttr(isRTL ? !isBefore : isBefore)
+                }
+              )
+            ]
+          },
+          PaginationItemType.DOTS + isBefore
+        );
+      }
+      return /* @__PURE__ */ createElement(pagination_item_default, { ...getItemProps({ value }), key: value, getAriaLabel: getItemAriaLabel }, value);
+    },
+    [
+      isRTL,
+      activePage,
+      dotsJump,
+      getItemProps,
+      loop,
+      range,
+      renderItemProp,
+      slots,
+      classNames,
+      total,
+      getItemAriaLabel,
+      onNext,
+      onPrevious,
+      setPage,
+      renderPrevItem,
+      renderNextItem
+    ]
+  );
+  return /* @__PURE__ */ jsx(Component, { ...getBaseProps(), children: /* @__PURE__ */ jsxs("ul", { ...getWrapperProps(), children: [
+    !disableCursorAnimation && !disableAnimation && /* @__PURE__ */ jsx(pagination_cursor_default, { ...getCursorProps() }),
+    range.map(renderItem)
+  ] }) });
+});
+Pagination.displayName = "HeroUI.Pagination";
+var pagination_default = Pagination;
+
+export {
+  pagination_default
+};

package/dist/chunk-BNRXGTRW.mjs

@@ -0,0 +1,18 @@
+"use client";
+import {
+  usePaginationItem
+} from "./chunk-5S65XA6Q.mjs";
+
+// src/pagination-item.tsx
+import { forwardRef } from "@sytechui/system";
+import { jsx } from "react/jsx-runtime";
+var PaginationItem = forwardRef((props, ref) => {
+  const { Component, children, getItemProps } = usePaginationItem({ ...props, ref });
+  return /* @__PURE__ */ jsx(Component, { ...getItemProps(), children });
+});
+PaginationItem.displayName = "HeroUI.PaginationItem";
+var pagination_item_default = PaginationItem;
+
+export {
+  pagination_item_default
+};

package/dist/chunk-MA7OMMHX.mjs

@@ -0,0 +1,18 @@
+"use client";
+
+// src/pagination-cursor.tsx
+import { forwardRef } from "@sytechui/system";
+import { useDOMRef } from "@sytechui/react-utils";
+import { jsx } from "react/jsx-runtime";
+var PaginationCursor = forwardRef((props, ref) => {
+  const { as, activePage, ...otherProps } = props;
+  const Component = as || "span";
+  const domRef = useDOMRef(ref);
+  return /* @__PURE__ */ jsx(Component, { ref: domRef, "aria-hidden": true, ...otherProps, children: activePage });
+});
+PaginationCursor.displayName = "HeroUI.PaginationCursor";
+var pagination_cursor_default = PaginationCursor;
+
+export {
+  pagination_cursor_default
+};

package/dist/chunk-RL6XUYZP.mjs

@@ -0,0 +1,235 @@
+"use client";
+
+// src/use-pagination.ts
+import { objectToDeps } from "@sytechui/shared-utils";
+import { PaginationItemType } from "@sytechui/use-pagination";
+import { useEffect, useRef, useMemo } from "react";
+import { mapPropsVariants, useProviderContext } from "@sytechui/system";
+import { usePagination as useBasePagination } from "@sytechui/use-pagination";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { pagination, cn } from "@sytechui/theme";
+import { useDOMRef } from "@sytechui/react-utils";
+import { dataAttr } from "@sytechui/shared-utils";
+import { useIntersectionObserver } from "@sytechui/use-intersection-observer";
+var CURSOR_TRANSITION_TIMEOUT = 300;
+function usePagination(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = useProviderContext();
+  const [props, variantProps] = mapPropsVariants(originalProps, pagination.variantKeys);
+  const {
+    as,
+    ref,
+    classNames,
+    dotsJump = 5,
+    loop = false,
+    showControls = false,
+    total = 1,
+    initialPage = 1,
+    page,
+    siblings,
+    boundaries,
+    onChange,
+    className,
+    renderItem,
+    getItemAriaLabel: getItemAriaLabelProp,
+    ...otherProps
+  } = props;
+  const Component = as || "nav";
+  const domRef = useDOMRef(ref);
+  const cursorRef = useRef(null);
+  const itemsRef = useRef();
+  const cursorTimer = useRef();
+  const disableAnimation = (_b = (_a = originalProps == null ? void 0 : originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const disableCursorAnimation = (_d = (_c = originalProps == null ? void 0 : originalProps.disableCursorAnimation) != null ? _c : disableAnimation) != null ? _d : false;
+  function getItemsRefMap() {
+    if (!itemsRef.current) {
+      itemsRef.current = /* @__PURE__ */ new Map();
+    }
+    return itemsRef.current;
+  }
+  function getItemRef(node, value) {
+    const map = getItemsRefMap();
+    if (node) {
+      map.set(value, node);
+    } else {
+      map.delete(value);
+    }
+  }
+  function scrollTo(value, skipAnimation) {
+    const map = getItemsRefMap();
+    const node = map.get(value);
+    if (!node || !cursorRef.current) return;
+    cursorTimer.current && clearTimeout(cursorTimer.current);
+    scrollIntoView(node, {
+      scrollMode: "always",
+      behavior: "smooth",
+      block: "start",
+      inline: "start",
+      boundary: domRef.current
+    });
+    const { offsetLeft } = node;
+    if (skipAnimation) {
+      cursorRef.current.setAttribute("data-moving", "false");
+      cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+      return;
+    }
+    cursorRef.current.setAttribute("data-moving", "true");
+    cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`;
+    cursorTimer.current = setTimeout(() => {
+      if (cursorRef.current) {
+        cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+      }
+      cursorTimer.current = setTimeout(() => {
+        var _a2;
+        (_a2 = cursorRef.current) == null ? void 0 : _a2.setAttribute("data-moving", "false");
+        cursorTimer.current && clearTimeout(cursorTimer.current);
+      }, CURSOR_TRANSITION_TIMEOUT);
+    }, CURSOR_TRANSITION_TIMEOUT);
+  }
+  const { range, activePage, setPage, previous, next, first, last } = useBasePagination({
+    page,
+    total,
+    initialPage,
+    siblings,
+    boundaries,
+    showControls,
+    onChange
+  });
+  const [setRef, isVisible] = useIntersectionObserver();
+  useEffect(() => {
+    if (domRef.current) {
+      setRef(domRef.current);
+    }
+  }, [domRef.current]);
+  const activePageRef = useRef(activePage);
+  useEffect(() => {
+    if (activePage && !disableAnimation && isVisible) {
+      scrollTo(activePage, activePage === activePageRef.current);
+    }
+    activePageRef.current = activePage;
+  }, [
+    page,
+    activePage,
+    disableAnimation,
+    disableCursorAnimation,
+    isVisible,
+    originalProps.dotsJump,
+    originalProps.isCompact,
+    originalProps.showControls
+  ]);
+  const slots = useMemo(
+    () => pagination({
+      ...variantProps,
+      disableAnimation,
+      disableCursorAnimation
+    }),
+    [objectToDeps(variantProps), disableCursorAnimation, disableAnimation]
+  );
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
+  const onNext = () => {
+    if (loop && activePage === total) {
+      return first();
+    }
+    return next();
+  };
+  const onPrevious = () => {
+    if (loop && activePage === 1) {
+      return last();
+    }
+    return previous();
+  };
+  const getBaseProps = (props2 = {}) => {
+    return {
+      ...props2,
+      ref: domRef,
+      role: "navigation",
+      "aria-label": props2["aria-label"] || "pagination navigation",
+      "data-slot": "base",
+      "data-controls": dataAttr(showControls),
+      "data-loop": dataAttr(loop),
+      "data-dots-jump": dotsJump,
+      "data-total": total,
+      "data-active-page": activePage,
+      className: slots.base({ class: cn(baseStyles, props2 == null ? void 0 : props2.className) }),
+      ...otherProps
+    };
+  };
+  const getWrapperProps = (props2 = {}) => {
+    return {
+      ...props2,
+      "data-slot": "wrapper",
+      className: slots.wrapper({ class: cn(classNames == null ? void 0 : classNames.wrapper, props2 == null ? void 0 : props2.className) })
+    };
+  };
+  const getItemAriaLabel = (page2) => {
+    if (!page2) return;
+    if (getItemAriaLabelProp) {
+      return getItemAriaLabelProp(page2);
+    }
+    switch (page2) {
+      case PaginationItemType.DOTS:
+        return "dots element";
+      case PaginationItemType.PREV:
+        return "previous page button";
+      case PaginationItemType.NEXT:
+        return "next page button";
+      case "first":
+        return "first page button";
+      case "last":
+        return "last page button";
+      default:
+        return `pagination item ${page2}`;
+    }
+  };
+  const getItemProps = (props2 = {}) => {
+    return {
+      ...props2,
+      ref: (node) => getItemRef(node, props2.value),
+      "data-slot": "item",
+      isActive: props2.value === activePage,
+      className: slots.item({ class: cn(classNames == null ? void 0 : classNames.item, props2 == null ? void 0 : props2.className) }),
+      onPress: () => {
+        if (props2.value !== activePage) {
+          setPage(props2.value);
+        }
+      }
+    };
+  };
+  const getCursorProps = (props2 = {}) => {
+    return {
+      ...props2,
+      ref: cursorRef,
+      activePage,
+      "data-slot": "cursor",
+      className: slots.cursor({ class: cn(classNames == null ? void 0 : classNames.cursor, props2 == null ? void 0 : props2.className) })
+    };
+  };
+  return {
+    Component,
+    showControls,
+    dotsJump,
+    slots,
+    classNames,
+    loop,
+    total,
+    range,
+    activePage,
+    getItemRef,
+    disableAnimation,
+    disableCursorAnimation,
+    setPage,
+    onPrevious,
+    onNext,
+    renderItem,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps,
+    getItemAriaLabel
+  };
+}
+
+export {
+  CURSOR_TRANSITION_TIMEOUT,
+  usePagination
+};

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+export { default as Pagination, PaginationProps } from './pagination.mjs';
+export { default as PaginationItem, PaginationItemProps } from './pagination-item.mjs';
+export { default as PaginationCursor, PaginationCursorProps } from './pagination-cursor.mjs';
+export { PaginationItemRenderProps, usePagination } from './use-pagination.mjs';
+export { PaginationItemType, PaginationItemValue } from '@sytechui/use-pagination';
+export { usePaginationItem } from './use-pagination-item.mjs';
+import '@sytechui/system';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'react';
+import '@react-types/shared';

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Pagination, PaginationProps } from './pagination.js';
+export { default as PaginationItem, PaginationItemProps } from './pagination-item.js';
+export { default as PaginationCursor, PaginationCursorProps } from './pagination-cursor.js';
+export { PaginationItemRenderProps, usePagination } from './use-pagination.js';
+export { PaginationItemType, PaginationItemValue } from '@sytechui/use-pagination';
+export { usePaginationItem } from './use-pagination-item.js';
+import '@sytechui/system';
+import 'tailwind-variants';
+import '@sytechui/theme';
+import 'react';
+import '@react-types/shared';