@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/icon/Icon.js

@@ -1,7 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconSprite as i } from "@payfit/unity-icons";
-import { uyTv as d } from "@payfit/unity-themes";
-const l = d({
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { IconSprite as d } from "@payfit/unity-icons";
+import { uyTv as l } from "@payfit/unity-themes";
+const y = l({
   variants: {
     size: {
       20: "uy:w-250 uy:h-250",
@@ -87,27 +88,30 @@ const l = d({
     display: "block"
   }
 });
-function f({
-  alt: n,
-  color: o,
-  size: c,
-  src: r,
-  role: a = "img",
-  display: s = "block",
-  ...t
+function b({
+  alt: r,
+  color: t,
+  size: e,
+  src: a,
+  role: s = "img",
+  display: n = "block",
+  ...o
 }) {
-  const u = l({ size: c, color: o, display: s });
-  return /* @__PURE__ */ e(
+  const u = i(
+    () => y({ size: e, color: t, display: n }),
+    [e, t, n]
+  );
+  return /* @__PURE__ */ c(
     "span",
     {
       "data-dd-privacy": "allow",
-      ...t,
-      role: a,
-      "aria-label": t["aria-labelledby"] ? void 0 : n,
-      children: /* @__PURE__ */ e(i, { className: u, src: r })
+      ...o,
+      role: s,
+      "aria-label": o["aria-labelledby"] ? void 0 : r,
+      children: /* @__PURE__ */ c(d, { className: u, src: a })
     }
   );
 }
 export {
-  f as Icon
+  b as Icon
 };

package/dist/esm/components/link/{Link.variants.d.ts → RawLink.d.ts}

@@ -1,3 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { HTMLAttributes } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components';
 export declare const link: import('tailwind-variants').TVReturnType<{
     variant: {
         inline: {
@@ -164,3 +167,92 @@ export declare const link: import('tailwind-variants').TVReturnType<{
     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;
+};
+/**
+ * Links allow users to navigate to different pages or sections.
+ */
+declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
+    /**
+     * 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;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawLink };

package/dist/esm/components/link/{Link.variants.js → RawLink.js}

@@ -1,5 +1,11 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const a = e({
+import { jsxs as g, jsx as h } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { IconSprite as k } from "@payfit/unity-icons";
+import { uyTv as D } from "@payfit/unity-themes";
+import { Link as A } from "react-aria-components";
+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",
@@ -70,7 +76,67 @@ const a = e({
     isDisabled: !1,
     size: "inherit"
   }
-});
+}), R = w(
+  ({
+    href: a,
+    children: s,
+    variant: l = "inline",
+    color: u = "primary",
+    isDisabled: o = !1,
+    isExact: c = !1,
+    isCurrent: y = void 0,
+    isExternal: d,
+    maxCharactersTruncation: r,
+    size: b = "inherit",
+    ...e
+  }, p) => {
+    const i = E(), t = d ?? L(a), n = !t && i ? i.isActive(a.toString(), c) : y, { base: m, icon: f } = N({
+      variant: l,
+      color: u,
+      isDisabled: o,
+      size: b,
+      isTruncated: !!r
+    }), v = !!r, x = i && {
+      ...n !== void 0 && {
+        "data-current": n,
+        "aria-current": n ? "page" : void 0
+      }
+    };
+    return /* @__PURE__ */ g(
+      A,
+      {
+        "data-dd-privacy": "allow",
+        ...e,
+        href: a,
+        ref: p,
+        style: v ? {
+          "--uy-link-max-w": `${r}ch`
+        } : {},
+        className: m(),
+        isDisabled: o,
+        target: t ? "_blank" : e.target,
+        rel: t && !e.rel ? "noopener noreferrer" : e.rel,
+        ...x,
+        children: [
+          s,
+          t && /* @__PURE__ */ h(
+            k,
+            {
+              src: "ArrowSquareOutOutlined",
+              color: "currentColor",
+              width: "1.45em",
+              height: "1.45em",
+              role: "presentation",
+              className: f()
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+R.displayName = "Link";
 export {
-  a as link
+  R as RawLink,
+  N as link
 };

package/dist/esm/components/menu/parts/{MenuItem.d.ts → RawMenuItem.d.ts}

@@ -1,15 +1,14 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-interface MenuItemProps extends DataAttributes {
+export interface MenuItemProps extends DataAttributes {
     children?: MenuItemAriaComponentProps['children'];
     href?: MenuItemAriaComponentProps['href'];
     onAction?: MenuItemAriaComponentProps['onAction'];
     prefix?: ReactNode;
     className?: string;
 }
-export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuItem {
+export declare function RawMenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RawMenuItem {
     var displayName: string;
 }
-export {};

package/dist/esm/components/menu/parts/{MenuItem.js → RawMenuItem.js}

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
 import { uyMerge as y } from "@payfit/unity-themes";
 import { MenuItem as i } from "react-aria-components";
 function l({
@@ -6,27 +6,27 @@ function l({
   children: u,
   href: t,
   onAction: r,
-  className: n,
-  ...a
+  className: a,
+  ...n
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     i,
     {
       href: t,
       onAction: r,
       className: y(
         "uy:cursor-pointer uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral uy:hover:bg-surface-neutral-hover uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-utility-focus-ring uy:active:bg-surface-neutral-active",
-        n
+        a
       ),
-      ...a,
+      ...n,
       children: [
-        /* @__PURE__ */ o("div", { className: "uy:text-content-neutral-low", children: e || null }),
+        /* @__PURE__ */ s("div", { className: "uy:text-content-neutral-low", children: e || null }),
         u
       ]
     }
   );
 }
-l.displayName = "MenuItem";
+l.displayName = "RawMenuItem";
 export {
-  l as MenuItem
+  l as RawMenuItem
 };

package/dist/esm/components/nav/parts/NavGroup.d.ts

@@ -1,9 +1,9 @@
 import { default as React, ReactNode } from 'react';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-import { NavItem, NavItemProps } from './NavItem.js';
-type NavGroupChildren = React.ReactElement<NavItemProps, typeof NavItem>;
+import { NavItemProps, RawNavItem } from './RawNavItem.js';
+type NavGroupChildren = React.ReactElement<NavItemProps, typeof RawNavItem>;
 type NavGroupProps = {
-    /** The child elements to be rendered inside the NavGroup. They must be `<NavItem>` components. */
+    /** The child elements to be rendered inside the NavGroup. They must be `<RawNavItem>` components. */
     children: NavGroupChildren | NavGroupChildren[];
     /** The label to show for the NavGroup. */
     label: string;

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,12 +1,12 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import r, { useState as G, useCallback as j } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { Button as D } from "react-aria-components";
-import _ from "../../../hooks/use-id.js";
-import { Icon as $ } from "../../icon/Icon.js";
-import { navItemBase as k } from "./NavItem.js";
-const z = B({
-  extend: k,
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import o, { useState as j, useCallback as B, useMemo as D } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { Button as _ } from "react-aria-components";
+import $ from "../../../hooks/use-id.js";
+import { Icon as k } from "../../icon/Icon.js";
+import { navItemBase as z } from "./RawNavItem.js";
+const H = S({
+  extend: z,
   slots: {
     caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
     contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
@@ -29,49 +29,60 @@ const z = B({
     }
   }
 });
-function H({
-  children: y,
+function M({
+  children: d,
   label: p,
-  prefix: s,
-  suffix: m,
+  prefix: l,
+  suffix: y,
   defaultExpanded: f = !1,
-  isExpanded: l,
+  isExpanded: r,
   onToggle: i,
-  ...x
+  ...N
 }) {
-  const u = _(), [h, b] = G(f), a = l !== void 0, e = a ? l : h, v = j(() => {
-    a || b((t) => !t), i?.(!e);
-  }, [a, e, i]), g = r.Children.map(y, (t) => r.isValidElement(t) ? r.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
-    base: N,
-    prefix: I,
-    label: E,
-    suffix: S,
-    content: w,
-    contentWrapper: C,
-    caret: W
-  } = z({ level: 0, expanded: e });
-  return /* @__PURE__ */ o("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-    /* @__PURE__ */ o(
-      D,
+  const u = $(), [x, b] = j(f), n = r !== void 0, a = n ? r : x, C = B(() => {
+    n || b((e) => !e), i?.(!a);
+  }, [n, a, i]), h = o.Children.map(d, (e) => o.isValidElement(e) ? o.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, m = `${u}-content`, {
+    baseClassName: v,
+    prefixClassName: g,
+    labelClassName: I,
+    suffixClassName: W,
+    contentClassName: E,
+    contentWrapperClassName: w,
+    caretClassName: G
+  } = D(() => {
+    const e = H({ level: 0, expanded: a });
+    return {
+      baseClassName: e.base({ className: "uy:w-full" }),
+      prefixClassName: e.prefix(),
+      suffixClassName: e.suffix(),
+      labelClassName: e.label(),
+      contentWrapperClassName: e.contentWrapper(),
+      contentClassName: e.content(),
+      caretClassName: e.caret()
+    };
+  }, [a]);
+  return /* @__PURE__ */ s("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ s(
+      _,
       {
         id: c,
-        className: N({ className: "uy:w-full" }),
-        onPress: v,
-        "aria-expanded": e,
-        "aria-controls": d,
-        ...x,
+        className: v,
+        onPress: C,
+        "aria-expanded": a,
+        "aria-controls": m,
+        ...N,
         children: [
-          s && /* @__PURE__ */ n("span", { className: I(), children: s({ isExpanded: e }) }),
-          /* @__PURE__ */ n("span", { className: E(), children: p }),
-          /* @__PURE__ */ o("span", { className: S(), role: "presentation", children: [
-            m,
-            /* @__PURE__ */ n(
-              $,
+          l && /* @__PURE__ */ t("span", { className: g, children: l({ isExpanded: a }) }),
+          /* @__PURE__ */ t("span", { className: I, children: p }),
+          /* @__PURE__ */ s("span", { className: W, role: "presentation", children: [
+            y,
+            /* @__PURE__ */ t(
+              k,
               {
                 src: "CaretDownOutlined",
                 alt: "expand group",
                 size: 20,
-                className: W(),
+                className: G,
                 color: "inherit"
               }
             )
@@ -79,26 +90,26 @@ function H({
         ]
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "div",
       {
-        className: C(),
-        style: { maxHeight: e ? 1e3 : 0 },
-        children: /* @__PURE__ */ n(
+        className: w,
+        style: { maxHeight: a ? 1e3 : 0 },
+        children: /* @__PURE__ */ t(
           "ul",
           {
-            id: d,
-            className: w(),
+            id: m,
+            className: E,
             "aria-labelledby": c,
-            "aria-hidden": !e,
-            children: g
+            "aria-hidden": !a,
+            children: h
           }
         )
       }
     )
   ] });
 }
-H.displayName = "NavGroup";
+M.displayName = "NavGroup";
 export {
-  H as NavGroup
+  M as NavGroup
 };

package/dist/esm/components/nav/parts/{NavItem.d.ts → RawNavItem.d.ts}

@@ -155,10 +155,107 @@ export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWi
     isExact?: boolean;
 }> & DataAttributes;
 /**
- * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
+ * The `RawNavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
  */
-export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, isExact, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NavItem {
-    var displayName: string;
-}
+export declare const RawNavItem: import('react').ForwardRefExoticComponent<Pick<VariantProps<import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, unknown, unknown, undefined>>>>, "level"> & {
+    /** The prefix element to be displayed before the label. */
+    prefix?: ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label. */
+    suffix?: ReactNode;
+    /** The click event handler for the nav item. Use it when the item executes an action that  does not redirect to another page */
+    onPress?: AriaButtonProps["onPress"];
+    /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */
+    href?: string;
+    /** Whether the nav item is currently active. */
+    isCurrent?: boolean;
+    /** Whether the nav item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+} & {
+    children?: ReactNode | undefined;
+} & DataAttributes & import('react').RefAttributes<HTMLElement>>;
 export {};