@payfit/unity-components 1.2.0 → 2.1.4

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

@@ -0,0 +1,40 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { TanstackCheckboxGroup as f } from "../checkbox-group/TanstackCheckboxGroup.js";
+import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as u } from "../form-field/TanstackFormField.js";
+function T({
+  helperText: r,
+  contextualLink: o,
+  isRequired: a,
+  isDisabled: i,
+  isReadOnly: t,
+  requiredVariant: c,
+  children: m,
+  label: s,
+  ...d
+}, k) {
+  return /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ e("div", { className: "uy:mt-25", children: /* @__PURE__ */ e(
+      f,
+      {
+        ref: k,
+        label: s,
+        requiredVariant: c,
+        helperText: r,
+        feedbackText: /* @__PURE__ */ e(l, {}),
+        ...d,
+        isDisabled: i,
+        isReadOnly: t,
+        isRequired: a,
+        children: m
+      }
+    ) }),
+    o
+  ] });
+}
+const F = p(T);
+F.displayName = "TanstackCheckGroupField";
+export {
+  F as TanstackCheckGroupField
+};

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 → client-side-pagination}/parts/PaginationNavButton.js

@@ -19,7 +19,7 @@ function u({ variant: t, ...n }) {
     {
       ...n,
       asElement: "button",
-      color: "content.neutral.lowest",
+      color: "content.neutral",
       title: e,
       "aria-label": i,
       icon: t === "previous" ? "CaretLeftOutlined" : "CaretRightOutlined"

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}

@@ -1,28 +1,28 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { Link as o } from "react-aria-components";
+import { forwardRef as s } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { Link as i } from "react-aria-components";
 import { useIntl as l } from "react-intl";
-const d = s({
+const d = o({
   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",
     "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
-    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:cursor-not-allowed",
-    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
-    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-lowest-disabled uy:data-[disabled]:cursor-not-allowed",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
   ],
   variants: {
     isActive: {
-      true: "uy:bg-surface-neutral-active",
+      true: "uy:bg-surface-neutral-lowest-selected",
       false: ""
     }
   }
-}), y = i(
+}), y = s(
   ({ isActive: e, isDisabled: a, ...t }, n) => {
     const u = l();
     return /* @__PURE__ */ r(
-      o,
+      i,
       {
         ref: n,
         className: d({ isActive: e }),
@@ -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/collapsible/parts/CollapsibleContent.js

@@ -1,14 +1,14 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { DisclosurePanel as e } from "react-aria-components";
-const l = t(
+import { forwardRef as e } from "react";
+import { DisclosurePanel as t } from "react-aria-components";
+const l = e(
   ({ children: i, ...o }, r) => /* @__PURE__ */ a(
-    e,
+    t,
     {
       ref: r,
       "data-dd-privacy": "allow",
       ...o,
-      className: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0",
+      className: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0 uy:overflow-hidden uy:aria-hidden:max-h-0",
       children: /* @__PURE__ */ a("div", { className: "uy:ml-400 uy:typography-body", children: i })
     }
   )

package/dist/esm/components/collapsible/parts/CollapsibleTitle.js

@@ -1,14 +1,14 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as d, useContext as m } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
+import { forwardRef as d, useContext as p } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
 import { DisclosureStateContext as f, Heading as x, Button as b } from "react-aria-components";
 import { Icon as v } from "../../icon/Icon.js";
 import { Text as o } from "../../text/Text.js";
-const g = p({
+const g = m({
   slots: {
     base: "uy:w-full",
     button: [
-      "uy:flex uy:gap-50 uy:pb-100 uy:pt-100 uy:w-full uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
+      "uy:flex uy:gap-50 uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
     ],
     title: "uy:flex uy:grow uy:text-left uy:items-center",
     icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center"
@@ -27,11 +27,11 @@ const g = p({
     isExpanded: !1
   }
 }), w = d(
-  ({ children: a, suffix: e, ...r }, n) => {
-    const i = m(f), { base: l, button: s, title: u, icon: c } = g({
+  ({ children: r, suffix: e, ...a }, n) => {
+    const i = p(f), { base: l, button: s, title: u, icon: c } = g({
       isExpanded: i?.isExpanded
     });
-    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...r, ref: n, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
+    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...a, ref: n, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
       /* @__PURE__ */ t(
         v,
         {
@@ -40,7 +40,7 @@ const g = p({
           role: "presentation"
         }
       ),
-      /* @__PURE__ */ t(o, { variant: "bodyStrong", className: u(), children: a }),
+      /* @__PURE__ */ t(o, { variant: "bodyStrong", className: u(), children: r }),
       e ? /* @__PURE__ */ t(o, { variant: "body", children: e }) : null
     ] }) });
   }