@sytechui/pagination 2.2.27

package/dist/use-pagination.d.ts

@@ -0,0 +1,374 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as _sytechui_system from '@sytechui/system';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system';
+import { SlotsToClasses, PaginationSlots, PaginationVariantProps } from '@sytechui/theme';
+import { Ref, Key, ReactNode } from 'react';
+import { PaginationItemValue, UsePaginationProps as UsePaginationProps$1 } from '@sytechui/use-pagination';
+import { PressEvent } from '@react-types/shared';
+
+type PaginationItemRenderProps = {
+    /**
+     * The pagination item ref.
+     */
+    ref?: Ref<any>;
+    /**
+     * React key.
+     */
+    key?: Key;
+    /**
+     * The pagination item value.
+     */
+    children?: ReactNode;
+    /**
+     * The pagination item value.
+     */
+    value: PaginationItemValue;
+    /**
+     * The pagination item index.
+     */
+    index: number;
+    /**
+     * Calculated pagination item position. This includes the dots.
+     */
+    page: number;
+    /**
+     * The pagination total number of pages.
+     */
+    total: number;
+    /**
+     * The active page number.
+     */
+    activePage: number;
+    /**
+     * Whether the pagination item is active.
+     */
+    isActive: boolean;
+    /**
+     * Whether the item is before the active page.
+     */
+    isBefore: boolean;
+    /**
+     * Whether the pagination item is the first item in the pagination.
+     */
+    isFirst: boolean;
+    /**
+     * Whether the pagination item is the last item in the pagination.
+     */
+    isLast: boolean;
+    /**
+     * Whether the pagination item is the next item in the pagination.
+     */
+    isNext: boolean;
+    /**
+     * Number of pages that are added or subtracted on the '...' button.
+     * @default 5
+     */
+    dotsJump: number;
+    /**
+     * Whether the pagination item is the previous item in the pagination.
+     */
+    isPrevious: boolean;
+    /**
+     * The pagination item className.
+     */
+    className: string;
+    /**
+     * Callback to go to the next page.
+     */
+    onNext: () => void;
+    /**
+     * Callback to go to the previous page.
+     */
+    onPrevious: () => void;
+    /**
+     * Callback to go to the page.
+     */
+    setPage: (page: number) => void;
+    /**
+     * Callback fired when the item is clicked.
+     * @param e PressEvent
+     */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Function to get the aria-label of the item.
+     */
+    getAriaLabel?: (page?: PaginationItemValue) => string | undefined;
+};
+interface Props extends Omit<HTMLHeroUIProps<"nav">, "onChange"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<HTMLElement>;
+    /**
+     * Number of pages that are added or subtracted on the '...' button.
+     * @default 5
+     */
+    dotsJump?: number;
+    /**
+     * Non disable next/previous controls
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Whether the pagination should display controls (left/right arrows).
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Render a custom pagination item.
+     * @param props Pagination item props
+     * @returns ReactNode
+     */
+    renderItem?: (props: PaginationItemRenderProps) => ReactNode;
+    /**
+     * Function to get the aria-label of the item. If not provided, pagination will use the default one.
+     */
+    getItemAriaLabel?: (page?: string | PaginationItemValue) => string;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Pagination classNames={{
+     *    base:"base-classes",
+     *    prev: "prev-classes", // prev button classes
+     *    item: "item-classes",
+     *    next: "next-classes", // next button classes
+     *    cursor: "cursor-classes", // this is the one that moves when an item is selected
+     *    forwardIcon: "forward-icon-classes", // forward icon
+     *    ellipsis: "ellipsis-classes", // ellipsis icon
+     *    chevronNext: "chevron-next-classes", // chevron next icon
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<PaginationSlots>;
+}
+type UsePaginationProps = Props & UsePaginationProps$1 & PaginationVariantProps;
+declare const CURSOR_TRANSITION_TIMEOUT = 300;
+declare function usePagination(originalProps: UsePaginationProps): {
+    Component: _sytechui_system.As<any>;
+    showControls: boolean;
+    dotsJump: number;
+    slots: {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        prev: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        next: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        cursor: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        forwardIcon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        ellipsis: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        chevronNext: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        prev: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        next: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        cursor: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        forwardIcon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        ellipsis: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        chevronNext: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            isDisabled?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+            variant?: "flat" | "bordered" | "faded" | "light" | undefined;
+            isCompact?: boolean | undefined;
+            showShadow?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"prev" | "next" | "base" | "cursor" | "wrapper" | "ellipsis" | "chevronNext" | "item" | "forwardIcon"> | undefined;
+    loop: boolean;
+    total: number;
+    range: PaginationItemValue[];
+    activePage: number;
+    getItemRef: (node: HTMLElement | null, value: number) => void;
+    disableAnimation: boolean;
+    disableCursorAnimation: boolean;
+    setPage: (pageNumber: number) => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    renderItem: ((props: PaginationItemRenderProps) => ReactNode) | undefined;
+    getBaseProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getItemProps: PropGetter;
+    getCursorProps: PropGetter;
+    getItemAriaLabel: (page?: string | PaginationItemValue) => string | undefined;
+};
+type UsePaginationReturn = ReturnType<typeof usePagination>;
+
+export { CURSOR_TRANSITION_TIMEOUT, type PaginationItemRenderProps, type UsePaginationProps, type UsePaginationReturn, usePagination };

package/dist/use-pagination.js

@@ -0,0 +1,269 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-pagination.ts
+var use_pagination_exports = {};
+__export(use_pagination_exports, {
+  CURSOR_TRANSITION_TIMEOUT: () => CURSOR_TRANSITION_TIMEOUT,
+  usePagination: () => usePagination
+});
+module.exports = __toCommonJS(use_pagination_exports);
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_use_pagination = require("@sytechui/use-pagination");
+var import_react = require("react");
+var import_system = require("@sytechui/system");
+var import_use_pagination2 = require("@sytechui/use-pagination");
+var import_scroll_into_view_if_needed = __toESM(require("scroll-into-view-if-needed"));
+var import_theme = require("@sytechui/theme");
+var import_react_utils = require("@sytechui/react-utils");
+var import_shared_utils2 = require("@sytechui/shared-utils");
+var import_use_intersection_observer = require("@sytechui/use-intersection-observer");
+var CURSOR_TRANSITION_TIMEOUT = 300;
+function usePagination(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.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 = (0, import_react_utils.useDOMRef)(ref);
+  const cursorRef = (0, import_react.useRef)(null);
+  const itemsRef = (0, import_react.useRef)();
+  const cursorTimer = (0, import_react.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);
+    (0, import_scroll_into_view_if_needed.default)(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 } = (0, import_use_pagination2.usePagination)({
+    page,
+    total,
+    initialPage,
+    siblings,
+    boundaries,
+    showControls,
+    onChange
+  });
+  const [setRef, isVisible] = (0, import_use_intersection_observer.useIntersectionObserver)();
+  (0, import_react.useEffect)(() => {
+    if (domRef.current) {
+      setRef(domRef.current);
+    }
+  }, [domRef.current]);
+  const activePageRef = (0, import_react.useRef)(activePage);
+  (0, import_react.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 = (0, import_react.useMemo)(
+    () => (0, import_theme.pagination)({
+      ...variantProps,
+      disableAnimation,
+      disableCursorAnimation
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableCursorAnimation, disableAnimation]
+  );
+  const baseStyles = (0, import_theme.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": (0, import_shared_utils2.dataAttr)(showControls),
+      "data-loop": (0, import_shared_utils2.dataAttr)(loop),
+      "data-dots-jump": dotsJump,
+      "data-total": total,
+      "data-active-page": activePage,
+      className: slots.base({ class: (0, import_theme.cn)(baseStyles, props2 == null ? void 0 : props2.className) }),
+      ...otherProps
+    };
+  };
+  const getWrapperProps = (props2 = {}) => {
+    return {
+      ...props2,
+      "data-slot": "wrapper",
+      className: slots.wrapper({ class: (0, import_theme.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 import_use_pagination.PaginationItemType.DOTS:
+        return "dots element";
+      case import_use_pagination.PaginationItemType.PREV:
+        return "previous page button";
+      case import_use_pagination.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: (0, import_theme.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: (0, import_theme.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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CURSOR_TRANSITION_TIMEOUT,
+  usePagination
+});

package/dist/use-pagination.mjs

@@ -0,0 +1,9 @@
+"use client";
+import {
+  CURSOR_TRANSITION_TIMEOUT,
+  usePagination
+} from "./chunk-RL6XUYZP.mjs";
+export {
+  CURSOR_TRANSITION_TIMEOUT,
+  usePagination
+};