@sytechui/pagination 2.2.27

package/dist/use-pagination-item.js

@@ -0,0 +1,105 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-pagination-item.ts
+var use_pagination_item_exports = {};
+__export(use_pagination_item_exports, {
+  usePaginationItem: () => usePaginationItem
+});
+module.exports = __toCommonJS(use_pagination_item_exports);
+var import_react = require("react");
+var import_utils = require("@react-aria/utils");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react_utils = require("@sytechui/react-utils");
+var import_interactions = require("@react-aria/interactions");
+var import_focus = require("@react-aria/focus");
+var import_theme = require("@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 = (0, import_react_utils.useDOMRef)(ref);
+  const router = (0, import_utils.useRouter)();
+  const ariaLabel = (0, import_react.useMemo)(
+    () => isActive ? `${getAriaLabel == null ? void 0 : getAriaLabel(value)} active` : getAriaLabel == null ? void 0 : getAriaLabel(value),
+    [value, isActive]
+  );
+  const { isPressed, pressProps } = (0, import_interactions.usePress)({
+    isDisabled,
+    onPress
+  });
+  const { focusProps, isFocused, isFocusVisible } = (0, import_focus.useFocusRing)({});
+  const { isHovered, hoverProps } = (0, import_interactions.useHover)({ isDisabled });
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-current": (0, import_shared_utils.dataAttr)(isActive),
+      "aria-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+      "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+      "data-active": (0, import_shared_utils.dataAttr)(isActive),
+      "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+      "data-hover": (0, import_shared_utils.dataAttr)(isHovered),
+      "data-pressed": (0, import_shared_utils.dataAttr)(isPressed),
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+      ...(0, import_shared_utils.mergeProps)(
+        props2,
+        pressProps,
+        focusProps,
+        hoverProps,
+        (0, import_react_utils.filterDOMProps)(otherProps, {
+          enabled: shouldFilterDOMProps
+        })
+      ),
+      className: (0, import_theme.cn)(className, props2.className),
+      onClick: (e) => {
+        (0, import_shared_utils.chain)(pressProps == null ? void 0 : pressProps.onClick, onClick)(e);
+        (0, import_utils.handleLinkClick)(e, router, props2.href, props2.routerOptions);
+      }
+    };
+  };
+  return {
+    Component,
+    children,
+    ariaLabel,
+    isFocused,
+    isFocusVisible,
+    getItemProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePaginationItem
+});

package/dist/use-pagination-item.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  usePaginationItem
+} from "./chunk-5S65XA6Q.mjs";
+export {
+  usePaginationItem
+};

package/dist/use-pagination.d.mts

@@ -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 };