@payfit/unity-components 1.1.1-beta.1 → 2.0.0

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -1,30 +1,41 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m, Fragment as d } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as d, Fragment as m } from "react";
 import { Breadcrumbs as p } from "react-aria-components";
 import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.js";
-import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.js";
-import { breadcrumbsVariant as l } from "./Breadcrumbs.variant.js";
-const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(d, { children: t(a) }, `${a.label}${a.href}`)), w = m(({ items: o, children: r, wrap: t = "nowrap", ...a }, i) => {
-  const { base: c } = l({ wrap: t }), n = u(), s = n === "xs" || n === "sm";
-  return /* @__PURE__ */ e(
-    f,
+import { BreadcrumbsProvider as l } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
+const b = (a, o, n) => a ? o.length === 0 ? null : n(o.at(o.length === 1 ? 0 : -2)) : o.map((r, t) => {
+  const e = "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`;
+  return /* @__PURE__ */ s(m, { children: n(r) }, e);
+});
+function B({
+  items: a,
+  children: o,
+  wrap: n = "nowrap",
+  ...r
+}, t) {
+  const { base: e } = f({ wrap: n }), i = u(), c = i === "xs" || i === "sm";
+  return /* @__PURE__ */ s(
+    l,
     {
-      wrap: t,
-      isMobile: s,
-      isStaticApi: o === void 0,
-      children: /* @__PURE__ */ e(
+      wrap: n,
+      isMobile: c,
+      isStaticApi: a === void 0,
+      children: /* @__PURE__ */ s(
         p,
         {
           "data-dd-privacy": "allow",
-          ref: i,
-          className: c(),
-          ...a,
-          children: o ? b(s, o, r) : r
+          ref: t,
+          className: e(),
+          ...r,
+          children: a ? b(c, a, o) : o
         }
       )
     }
   );
-});
+}
+const y = d(B);
+y.displayName = "Breadcrumbs";
 export {
-  w as Breadcrumbs
+  y as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -1,9 +1,34 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
-    /** The link of the breadcrumb */
-    href: string;
-    /** The text of the breadcrumb */
-    label: string;
+import { RawBreadcrumbLinkProps } from './RawBreadcrumbLink.js';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children' | 'className' | 'style'> {
+    /**
+     * A single BreadcrumbLink child element
+     */
+    children: ReactElement<ComponentPropsWithoutRef<'a'> & RawBreadcrumbLinkProps>;
 }
+/**
+ * A semantic wrapper component for breadcrumb items that displays navigation hierarchy.
+ * Accepts exactly one BreadcrumbLink as a child to maintain design system consistency.
+ * @param props - Breadcrumb props including the BreadcrumbLink child
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Breadcrumb>
+ *       <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+ *     </Breadcrumb>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Only accepts a single BreadcrumbLink component as a child
+ * - Automatically handles current page styling (disabled state)
+ * - Displays caret icons as separators between breadcrumb items
+ * - On mobile, displays a back arrow for the previous breadcrumb
+ * @see {@link BreadcrumbProps} for all available props
+ */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
 export { Breadcrumb };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -1,33 +1,41 @@
-import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { Breadcrumb as s } from "react-aria-components";
-import { Icon as m } from "../../icon/Icon.js";
-import { Link as u } from "../../link/Link.js";
-import { Tooltip as g } from "../../tooltip/Tooltip.js";
-import { useBreadcrumbsContext as w } from "../Breadcrumbs.context.js";
-import { breadcrumbsVariant as B } from "../Breadcrumbs.variant.js";
-const C = 25, l = ({ children: t, href: e }) => t.length > C ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x(
-  (t, e) => {
-    const { wrap: d, isMobile: f, isStaticApi: p } = w(), { breadcrumb: o } = B({ wrap: d });
-    if (!t)
-      return null;
-    const { href: n, label: a, ...c } = t;
-    return f && !p ? /* @__PURE__ */ i(s, { ref: e, ...c, className: o(), children: [
-      /* @__PURE__ */ r(m, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ r(l, { href: n, children: a })
-    ] }) : /* @__PURE__ */ r(s, { ref: e, ...c, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy:text-nowrap uy:text-content-neutral-lowest", children: a }) : /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ r(l, { href: n, children: a }),
-      /* @__PURE__ */ r(
-        m,
+import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Breadcrumb as n } from "react-aria-components";
+import { Icon as s } from "../../icon/Icon.js";
+import { useBreadcrumbsContext as f } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as h } from "../Breadcrumbs.variant.js";
+const x = b(
+  ({ children: r, ...t }, a) => {
+    const { wrap: c, isMobile: m, isStaticApi: u } = f(), { breadcrumb: o } = h({ wrap: c });
+    return m && !u ? /* @__PURE__ */ i(n, { ref: a, ...t, className: o(), children: [
+      /* @__PURE__ */ e(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+      r
+    ] }) : /* @__PURE__ */ e(n, { ref: a, ...t, className: o(), children: ({ isCurrent: d }) => {
+      const l = typeof r.props.children == "string" ? r.props.children : "";
+      return d ? /* @__PURE__ */ e(
+        "span",
         {
-          src: "CaretRightOutlined",
-          "aria-hidden": "true",
-          color: "content.neutral.lowest"
+          className: "uy:text-nowrap uy:text-content-neutral-lowest",
+          role: "link",
+          "aria-disabled": "true",
+          "aria-current": "page",
+          children: l
         }
-      )
-    ] }) });
+      ) : /* @__PURE__ */ i(p, { children: [
+        r,
+        /* @__PURE__ */ e(
+          s,
+          {
+            src: "CaretRightOutlined",
+            "aria-hidden": "true",
+            color: "content.neutral.lowest"
+          }
+        )
+      ] });
+    } });
   }
 );
+x.displayName = "Breadcrumb";
 export {
-  R as Breadcrumb
+  x as Breadcrumb
 };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts

@@ -0,0 +1,37 @@
+import { RawLinkProps } from '../../link/RawLink.js';
+export declare const BREADCRUMB_CONTENT_MAX_LENGTH = 25;
+export type RawBreadcrumbLinkProps = RawLinkProps;
+/**
+ * A styled link component for breadcrumbs that enforces Unity design system styling.
+ * This component automatically truncates long text and displays a tooltip when the content exceeds 25 characters.
+ * @param props - Link props from RawLink {@see {@link RawLinkProps}}
+ * @example
+ * ```tsx
+ * import { RawBreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawBreadcrumbLink href="/dashboard">
+ *       Dashboard
+ *     </RawBreadcrumbLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component enforces breadcrumb-specific styling that cannot be overridden
+ * - Text longer than 25 characters is automatically truncated with a tooltip
+ * - Uses the 'secondary' color variant for breadcrumb links
+ * @see {@link RawBreadcrumbLinkProps} for all available props
+ */
+declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "className" | "style"> & {
+    href: HTMLAnchorElement["href"];
+    id?: import('react').HTMLAttributes<HTMLAnchorElement>["id"];
+    size?: "default" | "small" | "inherit" | "large" | undefined;
+    variant?: "inline" | "standalone" | undefined;
+    color?: "inherit" | "primary" | "secondary" | undefined;
+    isExternal?: boolean;
+    isCurrent?: Pick<import('react').HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawBreadcrumbLink };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { RawLink as e } from "../../link/RawLink.js";
+import { Tooltip as m } from "../../tooltip/Tooltip.js";
+const t = 25, u = i(
+  ({ children: o, href: a, ...n }, s) => {
+    const c = typeof o == "string" ? o : "";
+    return c.length > t ? /* @__PURE__ */ r(m, { title: c, children: /* @__PURE__ */ r(
+      e,
+      {
+        isExact: !0,
+        href: a,
+        color: "secondary",
+        maxCharactersTruncation: t,
+        ref: s,
+        ...n,
+        children: o
+      }
+    ) }) : /* @__PURE__ */ r(
+      e,
+      {
+        isExact: !0,
+        href: a,
+        color: "secondary",
+        maxCharactersTruncation: t,
+        ...n,
+        children: o
+      }
+    );
+  }
+);
+u.displayName = "BreadcrumbLink";
+export {
+  t as BREADCRUMB_CONTENT_MAX_LENGTH,
+  u as RawBreadcrumbLink
+};

package/dist/esm/components/checkbox-field/CheckboxField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { LabelProps } from '../label/Label.js';
 interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
@@ -24,7 +24,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     isLoading?: boolean;
 }
 export type CheckboxFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type CheckboxFieldComponent = (<TSchema extends Schema>(props: CheckboxFieldProps<ZodInfer<TSchema>> & {
+type CheckboxFieldComponent = (<TSchema extends Schema>(props: CheckboxFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLLabelElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/checkbox-field/CheckboxField.js

@@ -1,13 +1,14 @@
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import { jsxs as k, jsx as m } from "react/jsx-runtime";
 import { forwardRef as C, useMemo as y } from "react";
 import { useFormContext as R } from "react-hook-form";
-import { Checkbox as q } from "../checkbox/Checkbox.js";
-import { FormField as P } from "../form-field/FormField.js";
+import { createSchemaAdapter as q } from "../../utils/createSchemaAdapter.js";
+import { Checkbox as P } from "../checkbox/Checkbox.js";
+import { FormField as S } from "../form-field/FormField.js";
 import { FormControl as j } from "../form-field/parts/FormControl.js";
 import { FormFeedbackText as v } from "../form-field/parts/FormFeedbackText.js";
 import { isFieldRequired as w } from "../form-field/utils/isFieldRequired.js";
 import { useUnityFormProvider as N } from "../form/Form.context.js";
-function S({
+function T({
   name: o,
   children: e,
   defaultSelected: r,
@@ -21,12 +22,12 @@ function S({
   requiredVariant: p,
   ...u
 }, x) {
-  const { control: F, watch: h } = R(), { schema: m } = N(), a = y(
-    () => w(m, o),
-    [m, o]
-  ), b = h(o);
+  const { control: F, watch: a } = R(), { schema: i } = N(), h = y(
+    () => w(q(i), o),
+    [i, o]
+  ), b = a(o);
   return /* @__PURE__ */ k(
-    P,
+    S,
     {
       control: F,
       name: o,
@@ -38,17 +39,17 @@ function S({
         isReadOnly: f
       },
       children: [
-        /* @__PURE__ */ i(j, { children: /* @__PURE__ */ i(
-          q,
+        /* @__PURE__ */ m(j, { children: /* @__PURE__ */ m(
+          P,
           {
             ref: x,
             defaultSelected: r,
             isSelected: b,
             requiredVariant: p,
             helperText: t,
-            feedbackText: /* @__PURE__ */ i(v, {}),
+            feedbackText: /* @__PURE__ */ m(v, {}),
             ...u,
-            isRequired: a ?? s,
+            isRequired: h ?? s,
             children: e
           }
         ) }),
@@ -57,10 +58,10 @@ function S({
     }
   );
 }
-const T = C(function(e, r) {
-  return S(e, r);
+const U = C(function(e, r) {
+  return T(e, r);
 });
-T.displayName = "CheckboxField";
+U.displayName = "CheckboxField";
 export {
-  T as CheckboxField
+  U as CheckboxField
 };

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { CheckboxGroupProps } from '../checkbox-group/CheckboxGroup.js';
 import { LabelProps } from '../label/Label.js';
@@ -40,7 +40,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     onFocusChange?: (isFocused: boolean) => void;
 }
 export type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<ZodInfer<TSchema>> & {
+type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.js

@@ -46,7 +46,10 @@ function P({
   ] });
 }
 const T = C(function(r, e) {
-  return P(r, e);
+  return P(
+    r,
+    e
+  );
 });
 T.displayName = "CheckboxGroupField";
 export {

package/dist/esm/components/client-side-pagination/ClientSidePagination.d.ts

@@ -0,0 +1,103 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentType } from 'react';
+import { PaginationLinkProps } from './parts/RawPaginationLink.js';
+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, {
+    [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, unknown, unknown, undefined>>;
+export interface ClientSidePaginationProps 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;
+    /**
+     * Component used to render the pagination links
+     * @default 'RawPaginationLink'
+     */
+    LinkComponent?: ComponentType<PaginationLinkProps>;
+}
+/**
+ * The ClientSidePagination component helps users navigate through multiple pages of content by providing intuitive controls for moving between pages.
+ *
+ * This component is designed for client-side pagination use cases where state is managed in React state rather than URL parameters.
+ * For URL-driven pagination, use the composition-based Pagination components instead.
+ *
+ * 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 {ClientSidePaginationProps} props - Regular HTML div attributes plus pagination-specific properties
+ * @see {@link ClientSidePaginationProps} for all available props
+ * @example
+ * ```tsx
+ * import { ClientSidePagination } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [currentPage, setCurrentPage] = useState(1)
+ *   return (
+ *     <ClientSidePagination
+ *       pageCount={10}
+ *       currentPage={currentPage}
+ *       onPageChange={(page) => setCurrentPage(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 ClientSidePagination: import('react').ForwardRefExoticComponent<ClientSidePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ClientSidePagination };

package/dist/esm/components/client-side-pagination/ClientSidePagination.js

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

package/dist/esm/components/client-side-pagination/parts/PaginationEllipsis.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ButtonProps } from 'react-aria-components';
+import { paginationLink } from './RawPaginationLink.js';
+export interface PaginationEllipsisProps extends Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'>, VariantProps<typeof paginationLink> {
+    value: [number, number];
+    id?: string;
+    isDisabled?: boolean;
+    isActive?: boolean;
+}
+declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { PaginationEllipsis };