@payfit/unity-components 1.2.0 → 2.0.0

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

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

@@ -0,0 +1,30 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Button as y } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+const c = a({
+  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",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), f = r(({ value: s, ...e }, o) => {
+  const t = p(), [n, u] = s;
+  return /* @__PURE__ */ l(y, { 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: u
+      }
+    ) })
+  ] });
+});
+f.displayName = "PaginationEllipsis";
+export {
+  f as PaginationEllipsis
+};

package/dist/esm/components/client-side-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/PaginationLink.d.ts → client-side-pagination/parts/RawPaginationLink.d.ts}

@@ -22,5 +22,5 @@ export interface PaginationLinkProps extends LinkProps, VariantProps<typeof pagi
     isDisabled?: boolean;
     isActive?: boolean;
 }
-declare const PaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
-export { PaginationLink };
+declare const RawPaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationLink };

package/dist/esm/components/{pagination/parts/PaginationLink.js → client-side-pagination/parts/RawPaginationLink.js}

@@ -42,8 +42,8 @@ const d = s({
     );
   }
 );
-y.displayName = "PaginationLink";
+y.displayName = "RawPaginationLink";
 export {
-  y as PaginationLink,
+  y as RawPaginationLink,
   d as paginationLink
 };

package/dist/esm/components/client-side-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[];

package/dist/esm/components/client-side-pagination/utils/pagination-window.js

@@ -0,0 +1,33 @@
+function o(e, i) {
+  return Array.from({ length: i - e + 1 }, (t, h) => h + e).map(
+    (t) => ({
+      type: "page",
+      value: t
+    })
+  );
+}
+const n = 5;
+function a(e, i, t) {
+  const h = Math.max(
+    n,
+    t
+  ), p = h - 2;
+  if (e <= h)
+    return Array.from({ length: e }, (y, f) => ({
+      type: "page",
+      value: f + 1
+    }));
+  const s = [];
+  s.push({ type: "page", value: 1 });
+  const u = p - 2, l = Math.floor(u / 2);
+  return i <= 3 + l ? (s.push(...o(2, p)), s.push({ type: "ellipsis", value: [p + 1, e - 1] })) : i >= e - (2 + l) ? (s.push({
+    type: "ellipsis",
+    value: [2, e - (p - 1) - 1]
+  }), s.push(...o(e - (p - 1), e - 1))) : (s.push({ type: "ellipsis", value: [2, i - l - 1] }), s.push(...o(i - l, i + l)), s.push({
+    type: "ellipsis",
+    value: [i + l + 1, e - 1]
+  })), s.push({ type: "page", value: e }), s;
+}
+export {
+  a as generatePaginationWithWindow
+};

package/dist/esm/components/error-state/ErrorState.d.ts

@@ -8,9 +8,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -24,9 +26,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -34,6 +38,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
         };
     };
 } | {}, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -52,9 +58,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -62,6 +70,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
         };
     };
 } | {}, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -74,6 +84,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
     h4: string[];
     description: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -163,7 +175,7 @@ interface _404ErrorStateProps extends ErrorStateBaseProps {
     /**
      * No error object needed for 404 states.
      */
-    error: never;
+    error?: never;
 }
 export type ErrorStateProps = KnownErrorStateProps | UnknownErrorStateProps | _404ErrorStateProps;
 /**