@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/link/RawLink.d.ts

@@ -0,0 +1,260 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { CSSProperties, HTMLAttributes } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
+export declare const link: import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isTruncated: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, {
+    variant: {
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isTruncated: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        inherit: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isTruncated: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, unknown, unknown, undefined>>;
+type LinkVariantProps = VariantProps<typeof link>;
+export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement['href'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLAnchorElement>['id'];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: LinkVariantProps['size'];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: LinkVariantProps['variant'];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: LinkVariantProps['color'];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, 'aria-current'> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+    maxWidthTruncation?: CSSProperties['maxWidth'];
+};
+/**
+ * Links allow users to navigate to different pages or sections.
+ */
+declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement["href"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLAnchorElement>["id"];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: LinkVariantProps["size"];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: LinkVariantProps["variant"];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: LinkVariantProps["color"];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+    maxWidthTruncation?: CSSProperties["maxWidth"];
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawLink };

package/dist/esm/components/link/RawLink.js

@@ -0,0 +1,165 @@
+import { jsxs as g, jsx as w } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { IconSprite as z } from "@payfit/unity-icons";
+import { uyTv as D } from "@payfit/unity-themes";
+import { Link as A } from "react-aria-components/Link";
+import { useRouter as E } from "../../providers/router/RouterProvider.js";
+import { isExternalUrl as L } from "./utils.js";
+const N = D({
+  slots: {
+    base: [
+      "uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
+      "uy:disabled:text-content-neutral-disabled",
+      "uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
+    ],
+    icon: ["uy:inline uy:ml-25"]
+  },
+  variants: {
+    variant: {
+      inline: {
+        base: "uy:inline uy:text-(length:inherit) uy:font-medium uy:leading-inherit",
+        icon: "uy:align-text-top uy:w-[0.95em] uy:h-[1.2em]"
+      },
+      standalone: {
+        base: "uy:typography-action uy:flex uy:gap-x-25 uy:items-end uy:py-50 uy:sm:p-0",
+        icon: "uy:self-center uy:size-[1.1em]"
+      }
+    },
+    size: {
+      default: { base: "uy:typography-action" },
+      large: { base: "uy:typography-action-large" },
+      small: { base: "uy:typography-action-small" },
+      inherit: { base: "uy:text-inherit" }
+    },
+    color: {
+      primary: {
+        base: [
+          //legacy theme
+          "uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active",
+          //rebrand theme
+          "uy:theme-rebrand:text-content-neutral-enabled uy:theme-rebrand:hover:text-content-neutral-hover uy:theme-rebrand:active:text-content-neutral-active uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed uy:theme-rebrand:data-[current]:text-content-neutral-active uy:theme-rebrand:aria-[current]:text-content-neutral-active"
+        ]
+      },
+      secondary: {
+        base: [
+          //legacy
+          "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active",
+          //rebrand
+          "uy:theme-rebrand:text-content-neutral-lowest-enabled uy:theme-rebrand:hover:text-content-neutral-lowest-hover uy:theme-rebrand:active:text-content-neutral-lowest-active uy:theme-rebrand:data-[pressed]:text-content-neutral-lowest-pressed uy:theme-rebrand:data-[current]:text-content-neutral-lowest-active uy:theme-rebrand:aria-[current]:text-content-neutral-lowest-active"
+        ]
+      },
+      inherit: { base: "uy:text-(color:inherit)" }
+    },
+    isDisabled: {
+      true: { base: "uy:data-[disabled]:cursor-not-allowed" },
+      false: { base: "uy:enabled:cursor-pointer" }
+    },
+    isTruncated: {
+      true: { base: "uy:truncate uy:max-w-[var(--uy-link-max-w)]" },
+      false: { base: "" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      isDisabled: !0,
+      class: {
+        base: [
+          // legacy
+          "uy:data-[disabled]:text-content-primary-disabled",
+          // rebrand
+          "uy:theme-rebrand:data-[disabled]:text-content-neutral-disabled"
+        ]
+      }
+    },
+    {
+      color: "secondary",
+      isDisabled: !0,
+      class: {
+        base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      }
+    },
+    {
+      color: "inherit",
+      isDisabled: !0,
+      class: {
+        base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      }
+    },
+    {
+      size: "inherit",
+      variant: "inline",
+      class: {
+        base: "uy:text-(length:inherit)"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "inline",
+    color: "primary",
+    isDisabled: !1,
+    size: "inherit"
+  }
+}), R = k(
+  ({
+    href: a,
+    children: l,
+    variant: c = "inline",
+    color: y = "primary",
+    isDisabled: s = !1,
+    isExact: d = !1,
+    isCurrent: b,
+    isExternal: m,
+    maxCharactersTruncation: n,
+    maxWidthTruncation: e,
+    size: p = "inherit",
+    ...t
+  }, v) => {
+    const i = E(), r = m ?? L(a), o = !r && i ? i.isActive(a.toString(), d) : b, { base: x, icon: h } = N({
+      variant: c,
+      color: y,
+      isDisabled: s,
+      size: p,
+      isTruncated: !!n || !!e
+    }), u = n !== void 0 ? `${n}ch` : e !== void 0 ? typeof e == "number" ? `${e}px` : e : void 0, f = i && {
+      ...o !== void 0 && {
+        "data-current": o,
+        "aria-current": o ? "page" : void 0
+      }
+    };
+    return /* @__PURE__ */ g(
+      A,
+      {
+        "data-dd-privacy": "allow",
+        ...t,
+        href: a,
+        ref: v,
+        style: u ? {
+          "--uy-link-max-w": u
+        } : {},
+        className: x(),
+        isDisabled: s,
+        target: r ? "_blank" : t.target,
+        rel: r && !t.rel ? "noopener noreferrer" : t.rel,
+        ...f,
+        children: [
+          l,
+          r && /* @__PURE__ */ w(
+            z,
+            {
+              src: "ArrowSquareOutOutlined",
+              color: "currentColor",
+              role: "presentation",
+              className: h()
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+R.displayName = "Link";
+export {
+  R as RawLink,
+  N as link
+};

package/dist/esm/components/link/figma/Link.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/link/utils.d.ts

@@ -0,0 +1 @@
+export declare function isExternalUrl(href?: string): boolean;

package/dist/esm/components/link/utils.js

@@ -0,0 +1,16 @@
+function a(i) {
+  if (!i) return !1;
+  const n = (t) => t.startsWith("/") || // absolute path
+  t.startsWith("./") || // relative path
+  t.startsWith("../") || // relative path
+  t.startsWith("#"), s = (t) => t.includes("://");
+  try {
+    const t = new URL(i, window.location.origin);
+    return t.origin !== window.location.origin || s(t.pathname) ? !0 : !n(t.pathname);
+  } catch {
+    return !n(i);
+  }
+}
+export {
+  a as isExternalUrl
+};

package/dist/esm/components/link-button/RawLinkButton.d.ts

@@ -0,0 +1,59 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from '../button/Button.variants.js';
+type UnityLinkButtonProps = Omit<AriaLinkProps, 'style' | 'className'> & ButtonBase & {
+    /**
+     * The link button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost', 'outlined'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
+    /**
+     * The link button size. It can be full size or default size (min-content).
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The link button's color.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The link button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The link button's suffix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    suffixIcon?: UnityIcon;
+    /**
+     * The loading state of the link button.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Truncate the label to a specific number of characters.
+     */
+    truncateLabelLength?: number;
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab.
+     * @default false
+     */
+    isExternal?: boolean;
+};
+type UnionLinkButtonProps = (UnityLinkButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityLinkButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityLinkButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost) | (UnityLinkButtonProps & {
+    variant: 'outlined';
+} & ButtonOutlined);
+export type RawLinkButtonProps = PropsWithChildren<Omit<UnionLinkButtonProps, 'style'>>;
+/**
+ * A link that visually looks like a button. Use it when you need navigation semantics with button appearance.
+ */
+declare const RawLinkButton: import('react').ForwardRefExoticComponent<Omit<UnionLinkButtonProps, "style"> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawLinkButton };

package/dist/esm/components/link-button/RawLinkButton.js

@@ -0,0 +1,127 @@
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import { forwardRef as E, useMemo as F } from "react";
+import { useUnityTheme as R, uyMerge as n } from "@payfit/unity-themes";
+import { Link as j } from "react-aria-components/Link";
+import { buttonOutlined as f, buttonGhost as z, buttonFilled as h } from "../button/Button.variants.js";
+import { Icon as k } from "../icon/Icon.js";
+import { isExternalUrl as M } from "../link/utils.js";
+import { Spinner as U } from "../spinner/Spinner.js";
+const $ = (r, l) => r ? /* @__PURE__ */ s(U, { size: "small", color: "inherit", label: "Loading..." }) : l ? /* @__PURE__ */ s(
+  k,
+  {
+    src: l,
+    size: 20,
+    color: "inherit",
+    role: "presentation",
+    "data-unity-icon": "prefix"
+  }
+) : null, v = E(
+  ({
+    variant: r,
+    href: l,
+    children: m,
+    color: t = "primary",
+    size: p = "default",
+    isDisabled: u = !1,
+    isLoading: e = !1,
+    prefixIcon: x,
+    suffixIcon: y,
+    truncateLabelLength: d,
+    isExternal: w,
+    ...i
+  }, g) => {
+    const b = w ?? M(l), { theme: c } = R(), B = F(() => {
+      const o = { size: p, isDisabled: u, isLoading: e };
+      let a;
+      switch (r) {
+        case "primary": {
+          a = n(
+            h({
+              ...o,
+              color: t
+            })
+          );
+          break;
+        }
+        case "secondary": {
+          c === "rebrand" ? a = n(
+            h({ ...o, color: t === "inverted" ? "inverted.low" : "neutral" })
+          ) : a = n(
+            f({
+              ...o,
+              color: t
+            })
+          );
+          break;
+        }
+        case "ghost": {
+          a = n(
+            z({
+              ...o,
+              color: t
+            })
+          );
+          break;
+        }
+        case "outlined": {
+          a = n(
+            f({
+              ...o,
+              color: t
+            })
+          );
+          break;
+        }
+      }
+      return n(
+        a,
+        "uy:no-underline",
+        u || e ? `${r === "primary" || r === "secondary" && c === "rebrand" ? "uy:data-[disabled]:bg-surface-neutral-disabled" : "uy:data-[disabled]:bg-transparent"} uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed` : "",
+        e ? "uy:data-[disabled]:cursor-progress" : ""
+      );
+    }, [r, t, p, u, e, c]), N = {
+      ...e && { "data-loading": e }
+    };
+    return /* @__PURE__ */ s(
+      j,
+      {
+        "data-dd-privacy": "allow",
+        ...i,
+        href: l,
+        ref: g,
+        isDisabled: u || e,
+        className: B,
+        target: b ? "_blank" : i.target,
+        rel: b && !i.rel ? "noopener noreferrer" : i.rel,
+        ...N,
+        children: /* @__PURE__ */ C("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
+          $(e, x),
+          d && d > 0 ? /* @__PURE__ */ s(
+            "span",
+            {
+              style: {
+                "--uy-button-label-truncation-length": `${d}ch`
+              },
+              className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+              children: m
+            }
+          ) : m,
+          y && /* @__PURE__ */ s(
+            k,
+            {
+              src: y,
+              size: 20,
+              color: "inherit",
+              role: "presentation",
+              "data-unity-icon": "suffix"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+v.displayName = "RawLinkButton";
+export {
+  v as RawLinkButton
+};

package/dist/esm/components/list-view/ListView.d.ts

@@ -0,0 +1,56 @@
+import { JSX, Ref } from 'react';
+import { ListBoxProps } from 'react-aria-components/ListBox';
+export type ListViewProps<TItem extends object> = Omit<ListBoxProps<TItem>, 'layout' | 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'escapeKeyBehavior' | 'className'> & {
+    /**
+     * Controls whether to enable virtualization for the list.
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
+     */
+    className?: string;
+};
+type ListViewComponentType = {
+    <TItem extends object>(props: ListViewProps<TItem> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The ListView component displays a vertically scrollable list of interactive items, allowing users to browse and navigate content in an organized manner.
+ *
+ * ListView supports both static and dynamic content rendering, sectioned layouts, keyboard navigation, disabled items, custom empty states, and virtualization for optimal performance with large datasets. Primarily designed for navigation-first mobile experiences like iOS mail apps and settings lists.
+ * @param {ListViewProps} props - The props for the ListView component, including all ListBox props from React Aria Components plus `enableVirtualization`
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView aria-label="My list">
+ *       <RawListViewItem id="1" href="/items/1">
+ *         <ListViewItemLabel>Item 1</ListViewItemLabel>
+ *       </RawListViewItem>
+ *       <RawListViewItem id="2" href="/items/2">
+ *         <ListViewItemLabel>Item 2</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Items can include an `href` prop to render as semantic links for navigation
+ * - Set `enableVirtualization` to `true` when working with large datasets (hundreds or thousands of items)
+ * - Combine with `ListViewSection` to organize items into labeled groups
+ * - Use `disabledKeys` to disable specific items by their ID
+ * - Provide `renderEmptyState` to display custom content when the list is empty
+ * - Always provide an accessible label using `aria-label` or `aria-labelledby`
+ * @see {@link ListViewProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare const ListView: ListViewComponentType;
+export { ListView };