@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/pagination/Pagination.d.ts

@@ -0,0 +1,106 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const pagination: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            pagesList?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            pagesList?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    pagesList: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            pagesList?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            pagesList?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    pagesList: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    pagesList: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            pagesList?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface PaginationProps extends VariantProps<typeof pagination> {
+    /**
+     * The total number of pages to display
+     */
+    pageCount: number;
+    /**
+     * The current page for controlled mode usage
+     */
+    currentPage?: number;
+    /**
+     * The initial page to display when in uncontrolled mode
+     */
+    defaultPage?: number;
+    /**
+     * Optional callback function that is triggered when a page hover event occurs.
+     * Can be used to handle logic or effects related to the hover action over a specific page.
+     * @param {number} page - The number of the page that is being hovered over.
+     */
+    onPageHover?: (page: number) => void;
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
+    /**
+     * Optional callback for the "next" button's press
+     */
+    onNextPress?: () => void;
+    /**
+     * Optional callback for previous button press
+     */
+    onPreviousPress?: () => void;
+}
+/**
+ * The Pagination component helps users navigate through multiple pages of content by providing intuitive controls for moving between pages.
+ *
+ * Pagination offers both controlled and uncontrolled usage, support for keyboard navigation, and automatic handling of page ranges with ellipsis for large numbers of pages.
+ * @param {PaginationProps} props - Regular HTML div attributes plus pagination-specific properties
+ * @see {@link PaginationProps} for all available props
+ * @example
+ * ```tsx
+ * import { Pagination } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Pagination
+ *       pageCount={10}
+ *       defaultPage={1}
+ *       onPageChange={(page) => console.log(`Navigated to page ${page}`)}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs)
+ */
+declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Pagination };

package/dist/esm/components/pagination/Pagination.js

@@ -0,0 +1,179 @@
+import { jsxs as q, jsx as o } from "react/jsx-runtime";
+import { forwardRef as T, useRef as E, useMemo as N } from "react";
+import { useId as R } from "react-aria";
+import { useIntl as W } from "react-intl";
+import { useOverlayTriggerState as $ } from "react-stately";
+import { tv as j } from "tailwind-variants";
+import { usePagination as J } from "./hooks/use-pagination.js";
+import { PaginationEllipsis as K } from "./parts/PaginationEllipsis.js";
+import { PaginationJumpDialog as O } from "./parts/PaginationJumpDialog.js";
+import { PaginationLink as S } from "./parts/PaginationLink.js";
+import { PaginationNavButton as w } from "./parts/PaginationNavButton.js";
+import { generatePaginationWithWindow as x } from "./utils/pagination-window.js";
+const _ = j({
+  slots: {
+    base: "uy-flex uy-gap-100 uy-relative",
+    pagesList: "uy-flex uy-gap-100 uy-list-none uy-m-0 uy-p-0"
+  }
+}), z = 7, B = T(
+  ({
+    pageCount: i,
+    defaultPage: p,
+    currentPage: d,
+    onPageHover: l,
+    onPageChange: g,
+    onNextPress: m,
+    onPreviousPress: c,
+    ...D
+  }, A) => {
+    const v = R(), u = W(), L = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
+      pageCount: i,
+      initialPage: L ? d : p,
+      onPageChange: g
+    }), f = $({}), r = E(/* @__PURE__ */ new Map()), h = N(
+      () => x(
+        i,
+        s,
+        z
+      ),
+      [i, s]
+    ), k = new Intl.NumberFormat(u.locale, {
+      notation: "standard"
+    }), F = (a) => {
+      n(a), f.close(), requestAnimationFrame(() => {
+        const e = r.current.get(a);
+        e && e.focus();
+      });
+    }, y = (a, e) => {
+      switch (a.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          a.preventDefault(), e > 1 && (n(e - 1), requestAnimationFrame(() => {
+            var t;
+            (t = r.current.get(e - 1)) == null || t.focus();
+          }));
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          a.preventDefault(), e < i && (n(e + 1), requestAnimationFrame(() => {
+            var t;
+            (t = r.current.get(e + 1)) == null || t.focus();
+          }));
+          break;
+        case "Home":
+          a.preventDefault(), n(1), requestAnimationFrame(() => {
+            var t;
+            (t = r.current.get(1)) == null || t.focus();
+          });
+          break;
+        case "End":
+          a.preventDefault(), n(i), requestAnimationFrame(() => {
+            var t;
+            (t = r.current.get(i)) == null || t.focus();
+          });
+          break;
+      }
+    }, b = {
+      paginationLabel: u.formatMessage({
+        id: "unity:component:pagination:label",
+        defaultMessage: "Pagination"
+      }),
+      pageListLabel: u.formatMessage(
+        {
+          id: "unity:component:pagination:page-list:label",
+          defaultMessage: "Page {current} of {total}"
+        },
+        {
+          current: s,
+          total: i
+        }
+      )
+    }, { base: I, pagesList: M } = _();
+    return /* @__PURE__ */ q(
+      "nav",
+      {
+        "data-dd-privacy": "allow",
+        ...D,
+        ref: A,
+        className: I(),
+        "aria-labelledby": b.paginationLabel,
+        children: [
+          /* @__PURE__ */ o(
+            O,
+            {
+              pageCount: i,
+              onJumpToPage: F,
+              state: f
+            }
+          ),
+          /* @__PURE__ */ o(
+            w,
+            {
+              variant: "previous",
+              isDisabled: s === 1,
+              onClick: () => {
+                n("previous"), c == null || c();
+              }
+            }
+          ),
+          /* @__PURE__ */ o("ul", { className: M(), "aria-label": b.pageListLabel, children: h.map(
+            (a, e) => a.type === "page" ? /* @__PURE__ */ o(
+              "li",
+              {
+                "aria-setsize": i,
+                "aria-posinset": a.value,
+                children: /* @__PURE__ */ o(
+                  S,
+                  {
+                    ref: (t) => {
+                      t ? r.current.set(a.value, t) : r.current.delete(a.value);
+                    },
+                    onPress: () => {
+                      n(a.value);
+                    },
+                    onHoverChange: (t) => {
+                      t && (l == null || l(a.value));
+                    },
+                    onKeyDown: (t) => {
+                      y(t, a.value);
+                    },
+                    isActive: a.value === s,
+                    value: a.value,
+                    children: k.format(a.value)
+                  }
+                )
+              },
+              `uy-pagination-${v}-item-${e}`
+            ) : /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+              K,
+              {
+                value: a.value,
+                onKeyDown: (t) => {
+                  y(t, -1);
+                },
+                onPress: () => {
+                  f.open();
+                }
+              }
+            ) }, `uy-pagination-${v}-item-${e}`)
+          ) }),
+          /* @__PURE__ */ o(
+            w,
+            {
+              variant: "next",
+              isDisabled: s === i,
+              onClick: () => {
+                n("next"), m == null || m();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+B.displayName = "Pagination";
+export {
+  B as Pagination,
+  _ as pagination
+};

package/dist/esm/components/pagination/hooks/use-pagination.d.ts

@@ -0,0 +1,11 @@
+export interface PaginationOptions {
+    pageCount: number;
+    initialPage?: number;
+    onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
+}
+export declare function usePagination({ pageCount, initialPage, onPageChange, }: PaginationOptions): {
+    currentPage: number;
+    previousPage: number;
+    nextPage: number;
+    goToPage: (page: "previous" | "next" | number) => void;
+};

package/dist/esm/components/pagination/hooks/use-pagination.js

@@ -0,0 +1,27 @@
+import { useState as l, useCallback as o } from "react";
+function m({
+  pageCount: i,
+  initialPage: r = 1,
+  onPageChange: n
+}) {
+  const [t, a] = l(r), c = t - 1, u = t + 1, s = o(
+    (e) => {
+      n && n(e, t, Math.sign(e - t)), a(Math.max(1, Math.min(i, e)));
+    },
+    [t, i, n]
+  ), f = o(
+    (e) => {
+      s(e === "previous" ? t - 1 : e === "next" ? t + 1 : e);
+    },
+    [t, s]
+  );
+  return {
+    currentPage: t,
+    previousPage: c,
+    nextPage: u,
+    goToPage: f
+  };
+}
+export {
+  m as usePagination
+};

package/dist/esm/components/pagination/parts/PaginationEllipsis.d.ts

@@ -0,0 +1,6 @@
+import { PaginationLinkProps } from './PaginationLink.js';
+export interface PaginationEllipsisProps extends Omit<PaginationLinkProps, 'value' | 'children' | 'className' | 'slot' | 'style'> {
+    value: [number, number];
+}
+declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { PaginationEllipsis };

package/dist/esm/components/pagination/parts/PaginationEllipsis.js

@@ -0,0 +1,30 @@
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Button as a } from "react-aria-components";
+import { useIntl as y } from "react-intl";
+import { tv as p } from "tailwind-variants";
+const c = p({
+  base: [
+    "uy-min-w-300 uy-h-300 uy-p-25 uy-flex uy-justify-center uy-items-center uy-typography-action uy-rounded-pill uy-cursor-default",
+    "focus-visible:uy-outline-2 focus-visible:uy-outline-solid focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2"
+  ]
+}), f = r(({ value: s, ...e }, o) => {
+  const t = y(), [n, l] = s;
+  return /* @__PURE__ */ u(a, { ref: o, className: c(), ...e, children: [
+    /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
+    /* @__PURE__ */ i("span", { className: "uy-sr-only", children: t.formatMessage(
+      {
+        id: "unity:component:pagination:ellipsis:label",
+        defaultMessage: "More pages"
+      },
+      {
+        start: n,
+        end: l
+      }
+    ) })
+  ] });
+});
+f.displayName = "PaginationEllipsis";
+export {
+  f as PaginationEllipsis
+};

package/dist/esm/components/pagination/parts/PaginationJumpDialog.d.ts

@@ -0,0 +1,8 @@
+import { OverlayTriggerState } from 'react-stately';
+interface PaginationJumpDialogProps {
+    pageCount: number;
+    onJumpToPage: (page: number) => void;
+    state: OverlayTriggerState;
+}
+export declare function PaginationJumpDialog({ pageCount, onJumpToPage, state, }: PaginationJumpDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/pagination/parts/PaginationJumpDialog.js

@@ -0,0 +1,143 @@
+import { jsxs as n, Fragment as N, jsx as o } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { useOverlayTrigger as O, useButton as P, useOverlay as D } from "react-aria";
+import { useIntl as B } from "react-intl";
+import { tv as I } from "tailwind-variants";
+import { Button as c } from "../../button/Button.js";
+import { Icon as J } from "../../icon/Icon.js";
+import { Label as R } from "../../label/Label.js";
+const k = I({
+  slots: {
+    jumpButton: "uy-sr-only uy-outline-none focus:uy-not-sr-only focus:uy-absolute focus:uy-bottom-full focus:uy-z-10 focus:uy-m-100 focus:uy-rounded-50 focus:uy-underline focus:uy-bg-transparent focus:uy-text-content-primary focus:uy-typography-action focus:uy-ring-2 focus:uy-ring-offset-2 focus:uy-ring-utility-focus-ring",
+    jumpPopover: "uy-fixed uy-top-1/2 uy-left-1/2 uy-z-20 uy-transform uy--translate-x-1/2 uy--translate-y-1/2 uy-bg-surface-neutral uy-p-200 uy-rounded-200 uy-shadow-floating",
+    jumpForm: "uy-flex uy-flex-col uy-gap-100",
+    jumpFieldLabel: "uy-typography-body",
+    jumpFieldWrapper: "uy-mt-50 uy-flex uy-w-full uy-items-center uy-h-500 uy-border uy-border-solid uy-rounded-100 uy-border-border-form-enabled uy-bg-surface-form-enabled focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
+    jumpInput: "uy-pl-100 uy-flex-1 uy-outline-none uy-appearance-none [&::-webkit-outer-spin-button]:uy-appearance-none [&::-webkit-inner-spin-button]:uy-appearance-none",
+    jumpActions: "uy-flex uy-gap-150 uy-justify-end uy-mt-100"
+  }
+});
+function G({
+  pageCount: t,
+  onJumpToPage: f,
+  state: e
+}) {
+  const u = B(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = O(
+    { type: "dialog" },
+    e,
+    i
+  ), { buttonProps: g } = P(
+    {
+      ...d,
+      "aria-label": u.formatMessage({
+        id: "unity:component:pagination:jump-dialog:button:text",
+        defaultMessage: "Jump to page"
+      })
+    },
+    i
+  ), { overlayProps: a } = D(
+    {
+      isOpen: e.isOpen,
+      onClose: e.close.bind(e),
+      shouldCloseOnBlur: !0,
+      isDismissable: !0
+    },
+    p
+  ), b = (r) => {
+    var y;
+    r.preventDefault();
+    const s = parseInt(((y = m.current) == null ? void 0 : y.value) || "", 10);
+    s >= 1 && s <= t && (f(s), e.close());
+  }, {
+    jumpButton: j,
+    jumpPopover: h,
+    jumpForm: v,
+    jumpFieldLabel: x,
+    jumpFieldWrapper: w,
+    jumpInput: M,
+    jumpActions: F
+  } = k();
+  return /* @__PURE__ */ n(N, { children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        ...g,
+        ref: i,
+        className: j(),
+        "aria-expanded": e.isOpen ? "true" : "false",
+        children: u.formatMessage({
+          id: "unity:component:pagination:jump-dialog:button:text",
+          defaultMessage: "Jump to page"
+        })
+      }
+    ),
+    e.isOpen && /* @__PURE__ */ o(
+      "div",
+      {
+        ...a,
+        ref: p,
+        className: h(),
+        "aria-label": u.formatMessage({
+          id: "unity:component:pagination:jump-dialog:overlay:label",
+          defaultMessage: "Jump to page"
+        }),
+        children: /* @__PURE__ */ n("form", { onSubmit: b, className: v(), children: [
+          /* @__PURE__ */ o(
+            R,
+            {
+              className: x(),
+              htmlFor: `jump-to-page-${a.id}-input`,
+              children: u.formatMessage(
+                {
+                  id: "unity:component:pagination:jump-dialog:input:label",
+                  defaultMessage: "Enter page number (between 1 and {total})"
+                },
+                { total: t }
+              )
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: w(), children: [
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: m,
+                type: "number",
+                min: 1,
+                max: t,
+                className: M(),
+                id: `jump-to-page-${a.id}-input`,
+                autoFocus: !0,
+                onKeyDown: (r) => {
+                  r.key === "Escape" && e.close();
+                }
+              }
+            ),
+            /* @__PURE__ */ o(
+              J,
+              {
+                src: "CaretUpDownOutlined",
+                role: "presentation",
+                color: "content.neutral.low",
+                className: "uy-mx-50",
+                size: 20
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: F(), children: [
+            /* @__PURE__ */ o(c, { variant: "ghost", onPress: e.close.bind(e), children: u.formatMessage({
+              id: "unity:component:pagination:jump-dialog:action:cancel",
+              defaultMessage: "Cancel"
+            }) }),
+            /* @__PURE__ */ o(c, { type: "submit", variant: "primary", children: u.formatMessage({
+              id: "unity:component:pagination:jump-dialog:action:go",
+              defaultMessage: "Go"
+            }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  G as PaginationJumpDialog
+};

package/dist/esm/components/pagination/parts/PaginationLink.d.ts

@@ -0,0 +1,46 @@
+import { LinkProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const paginationLink: import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isActive: {
+        true: string;
+        false: string;
+    };
+}, {
+    isActive: {
+        true: string;
+        false: string;
+    };
+}>, {
+    isActive: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isActive: {
+        true: string;
+        false: string;
+    };
+}, {
+    isActive: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface PaginationLinkProps extends LinkProps, VariantProps<typeof paginationLink> {
+    value: number;
+    id?: string;
+    isDisabled?: boolean;
+    isActive?: boolean;
+}
+declare const PaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { PaginationLink };

package/dist/esm/components/pagination/parts/PaginationLink.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Link as s } from "react-aria-components";
+import { useIntl as o } from "react-intl";
+import { tv as l } from "tailwind-variants";
+const d = l({
+  base: [
+    "uy-min-w-300 uy-h-300 uy-p-25 uy-flex uy-justify-center uy-items-center uy-typography-action uy-rounded-pill uy-transition-colors",
+    "enabled:uy-text-content-neutral-enabled enabled: uy-bg-transparent uy-cursor-pointer",
+    "data-[disabled]:uy-text-content-neutral-disabled data-[disabled]:uy-bg-surface-neutral-disabled data-[disabled]:uy-cursor-not-allowed",
+    "hover:uy-text-content-neutral-hover hover:uy-bg-surface-neutral-hover",
+    "active:uy-text-content-neutral-pressed active:uy-bg-surface-neutral-pressed data-[pressed]:uy-text-content-neutral-pressed data-[pressed]:uy-bg-surface-neutral-pressed",
+    "focus-visible:uy-outline-2 focus-visible:uy-outline-solid focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2"
+  ],
+  variants: {
+    isActive: {
+      true: "uy-bg-surface-neutral-active",
+      false: ""
+    }
+  }
+}), y = i(
+  ({ isActive: e, isDisabled: a, ...t }, n) => {
+    const u = o();
+    return /* @__PURE__ */ r(
+      s,
+      {
+        ref: n,
+        className: d({ isActive: e }),
+        isDisabled: a,
+        "aria-current": e ? "page" : void 0,
+        "aria-label": u.formatMessage(
+          {
+            id: "unity:component:pagination:link:label",
+            defaultMessage: "Page {page}"
+          },
+          {
+            page: t.value
+          }
+        ),
+        ...t
+      }
+    );
+  }
+);
+y.displayName = "PaginationLink";
+export {
+  y as PaginationLink,
+  d as paginationLink
+};

package/dist/esm/components/pagination/parts/PaginationNavButton.d.ts

@@ -0,0 +1,9 @@
+import { CircularIconButtonProps } from '../../icon-button/CircularIconButton.js';
+export interface PaginationNavButtonProps extends Omit<CircularIconButtonProps, 'icon' | 'title'> {
+    variant: 'previous' | 'next';
+}
+declare function PaginationNavButton({ variant, ...props }: PaginationNavButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationNavButton {
+    var displayName: string;
+}
+export { PaginationNavButton };

package/dist/esm/components/pagination/parts/PaginationNavButton.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+import { CircularIconButton as r } from "../../icon-button/CircularIconButton.js";
+function u({ variant: t, ...n }) {
+  const o = s(), e = o.formatMessage({
+    id: t === "previous" ? "unity:component:common:previous" : "unity:component:common:next",
+    defaultMessage: t === "previous" ? "Previous" : "Next"
+  }), i = o.formatMessage(
+    {
+      id: "unity:component:pagination:nav-button:description",
+      defaultMessage: t === "previous" ? "Go to previous page" : "Go to next page"
+    },
+    {
+      variant: e.toLowerCase()
+    }
+  );
+  return /* @__PURE__ */ a(
+    r,
+    {
+      ...n,
+      asElement: "button",
+      title: e,
+      "aria-label": i,
+      icon: t === "previous" ? "CaretLeftOutlined" : "CaretRightOutlined"
+    }
+  );
+}
+u.displayName = "PaginationNavButton";
+export {
+  u as PaginationNavButton
+};

package/dist/esm/components/pagination/utils/pagination-window.d.ts

@@ -0,0 +1,8 @@
+export type PageItem = {
+    type: 'page';
+    value: number;
+} | {
+    type: 'ellipsis';
+    value: [number, number];
+};
+export declare function generatePaginationWithWindow(pageCount: number, currentPage: number, maxWindowSize: number): PageItem[];