@payfit/unity-components 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -22,6 +22,13 @@
         "default": "./dist/esm/integrations/react-router/v5.js"
       }
     },
+    "./integrations/tanstack-router": {
+      "import": {
+        "hrAppsLocalDev": "./src/integrations/tanstack-router/index.ts",
+        "types": "./dist/esm/integrations/tanstack-router/index.d.ts",
+        "default": "./dist/esm/integrations/tanstack-router.js"
+      }
+    },
     "./testing-utils/storybook": {
       "import": {
         "hrAppsLocalDev": "./src/index.storybook-testing.ts",
@@ -37,39 +44,42 @@
     "i18n"
   ],
   "dependencies": {
-    "@ariakit/react": "0.4.18",
+    "@ariakit/react": "0.4.19",
     "@formatjs/intl": "3.1.3",
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
-    "@internationalized/date": "3.9.0",
-    "@payfit/unity-illustrations": "1.2.0",
+    "@internationalized/date": "3.10.0",
+    "@payfit/unity-illustrations": "2.0.0",
     "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-slot": "1.2.3",
-    "@react-aria/interactions": "3.25.5",
-    "@react-aria/utils": "3.30.1",
+    "@react-aria/interactions": "3.25.6",
+    "@react-aria/utils": "3.31.0",
     "@react-types/shared": "3.26.0",
     "@standard-schema/spec": "1.0.0",
     "@use-gesture/react": "10.3.1",
     "prettier": "3.1.0",
     "react": "18.3.1",
-    "react-aria": "3.43.2",
-    "react-aria-components": "1.12.2",
+    "react-aria": "3.44.0",
+    "react-aria-components": "1.13.0",
     "react-dom": "18.3.1",
     "react-hook-form": "7.62.0",
     "react-hot-toast": "2.5.1",
     "react-hotkeys-hook": "5.1.0",
     "react-intl": "7.1.3",
-    "react-stately": "3.41.0",
-    "storybook": "9.1.7",
+    "react-stately": "3.42.0",
+    "storybook": "9.1.13",
     "tailwind-variants": "2.1.0",
     "usehooks-ts": "3.1.0",
     "zod": "4.1.9"
   },
   "peerDependencies": {
     "@hookform/devtools": "4.4.0",
-    "@payfit/unity-icons": "1.2.0",
-    "@payfit/unity-themes": "1.2.0",
-    "@storybook/react-vite": "^9.1.2",
+    "@payfit/unity-icons": "2.0.0",
+    "@payfit/unity-themes": "2.0.0",
+    "@storybook/react-vite": "^9.1.13",
+    "@tanstack/react-query": "5.90.2",
+    "@tanstack/react-router": "^1.131",
+    "@tanstack/react-router-devtools": "^1.131",
     "@tanstack/react-table": "8.21.3",
     "history": "4.10.1",
     "react-hook-form": "^7",
@@ -78,20 +88,23 @@
   },
   "devDependencies": {
     "@hookform/devtools": "4.4.0",
-    "@internationalized/date": "3.9.0",
+    "@internationalized/date": "3.10.0",
     "@payfit/code-pushup-tools": "0.0.0-use.local",
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
-    "@payfit/unity-icons": "1.2.0",
-    "@payfit/unity-illustrations": "1.2.0",
-    "@payfit/unity-themes": "1.2.0",
+    "@payfit/unity-icons": "2.0.0",
+    "@payfit/unity-illustrations": "2.0.0",
+    "@payfit/unity-themes": "2.0.0",
     "@payfit/vite-configs": "0.0.0-use.local",
-    "@storybook/addon-a11y": "9.1.7",
-    "@storybook/addon-docs": "9.1.7",
-    "@storybook/addon-links": "9.1.7",
-    "@storybook/addon-vitest": "9.1.7",
-    "@storybook/react-vite": "9.1.7",
+    "@storybook/addon-a11y": "9.1.13",
+    "@storybook/addon-docs": "9.1.13",
+    "@storybook/addon-links": "9.1.13",
+    "@storybook/addon-vitest": "9.1.13",
+    "@storybook/react-vite": "9.1.13",
+    "@tanstack/react-query": "5.90.2",
+    "@tanstack/react-router": "1.133.13",
+    "@tanstack/react-router-devtools": "1.133.13",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@types/react": "18.3.18",
@@ -99,7 +112,7 @@
     "@types/react-router-dom": "5.3.3",
     "@vitejs/plugin-react": "5.0.3",
     "@vitest/browser": "3.2.4",
-    "eslint-plugin-storybook": "9.1.2",
+    "eslint-plugin-storybook": "9.1.13",
     "glob": "11.0.1",
     "msw": "2.8.4",
     "msw-storybook-addon": "^2.0.5",
@@ -107,8 +120,8 @@
     "prettier": "3.1.0",
     "react-docgen-typescript": "2.2.2",
     "react-hot-toast": "2.5.1",
-    "storybook": "9.1.7",
-    "storybook-addon-pseudo-states": "9.1.2",
+    "storybook": "9.1.13",
+    "storybook-addon-pseudo-states": "9.1.13",
     "storybook-addon-tag-badges": "^2.0.1",
     "storybook-mock-date-decorator": "3.0.0",
     "tailwindcss": "4.1.11",
@@ -121,6 +134,15 @@
     "@hookform/devtools": {
       "optional": true
     },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "@tanstack/react-router-devtools": {
+      "optional": true
+    },
     "@tanstack/react-table": {
       "optional": true
     },

package/dist/esm/components/form-field/parts/FormContextualLink.js

@@ -1,37 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { Button as m } from "react-aria-components";
-import { Link as d } from "../../link/Link.js";
-import { useFormField as s } from "../FormField.context.js";
-const e = n(({ children: o, href: t, onPress: l }, a) => {
-  const { formContextualLinkId: r } = s();
-  return t ? /* @__PURE__ */ i(
-    d,
-    {
-      id: r,
-      size: "small",
-      color: "secondary",
-      variant: "standalone",
-      "data-unity-slot": "contextual-link",
-      href: t,
-      ref: a,
-      "data-dd-privacy": "allow",
-      children: o
-    }
-  ) : /* @__PURE__ */ i(
-    m,
-    {
-      id: r,
-      onPress: l,
-      "data-unity-slot": "contextual-link",
-      className: "uy:typography-body-small uy:w-fit",
-      ref: a,
-      "data-dd-privacy": "allow",
-      children: o
-    }
-  );
-});
-e.displayName = "FormContextualLink";
-export {
-  e as FormContextualLink
-};

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

@@ -1,93 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { HTMLAttributes } from 'react';
-import { LinkProps as AriaLinkProps } from 'react-aria-components';
-import { NavLinkProps as NavRouterLinkProps } from 'react-router-dom';
-import { link } from './Link.variants.js';
-export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
-    /**
-     * The URL the link navigates to.
-     */
-    href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
-    /**
-     * The link id
-     */
-    id?: HTMLAttributes<HTMLLinkElement>['id'];
-    /**
-     * The link's size.
-     * @default 'inherit'
-     */
-    size?: VariantProps<typeof link>['size'];
-    /**
-     * The link's display variant. Links can be inline with text or standalone (block).
-     * @default 'inline'
-     */
-    variant?: VariantProps<typeof link>['variant'];
-    /**
-     * The link's color.
-     * @default 'primary'
-     */
-    color?: VariantProps<typeof link>['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 Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
-    /**
-     * The URL the link navigates to.
-     */
-    href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
-    /**
-     * The link id
-     */
-    id?: HTMLAttributes<HTMLLinkElement>["id"];
-    /**
-     * The link's size.
-     * @default 'inherit'
-     */
-    size?: VariantProps<typeof link>["size"];
-    /**
-     * The link's display variant. Links can be inline with text or standalone (block).
-     * @default 'inline'
-     */
-    variant?: VariantProps<typeof link>["variant"];
-    /**
-     * The link's color.
-     * @default 'primary'
-     */
-    color?: VariantProps<typeof link>["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 { Link };

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

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

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

@@ -1,95 +0,0 @@
-import { jsx as u, jsxs as h } from "react/jsx-runtime";
-import { uyTv as y, uyMerge as N } from "@payfit/unity-themes";
-import { Link as w, Button as I } from "react-aria-components";
-import { useRouter as j } from "../../../providers/router/RouterProvider.js";
-const A = y({
-  slots: {
-    base: [
-      "uy:group uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
-      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-active uy:data-[pressed]:bg-surface-neutral-pressed",
-      "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
-    ],
-    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
-    suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
-    label: [
-      "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
-    ]
-  },
-  variants: {
-    level: {
-      0: "uy:pl-150",
-      1: "uy:pl-600"
-    },
-    isDisabled: {
-      true: {
-        base: "uy:pointer-events-none",
-        label: "uy:text-content-neutral-disabled"
-      },
-      false: ""
-    }
-  }
-}), S = y({
-  extend: A,
-  variants: {
-    isActive: {
-      true: {
-        base: "uy:bg-surface-neutral-active",
-        prefix: "uy:text-content-neutral",
-        label: "uy:typography-body-strong"
-      },
-      false: {
-        base: "",
-        prefix: "uy:text-content-neutral-low",
-        label: "uy:typography-body"
-      }
-    }
-  }
-});
-function k({
-  children: o,
-  level: s = 0,
-  prefix: n,
-  suffix: r,
-  onPress: c,
-  href: e,
-  isCurrent: p,
-  isDisabled: a = !1,
-  isExact: f = !1,
-  ...d
-}) {
-  const i = j(), b = e ? w : I, t = i && e ? i.isActive(e.toString(), f) : p, {
-    base: v,
-    label: l,
-    prefix: g,
-    suffix: m
-  } = S({ level: s, isActive: t, isDisabled: a }), x = Object.assign(
-    {},
-    t !== void 0 && {
-      "data-current": t,
-      "aria-current": t ? "page" : void 0
-    },
-    !e && { tabIndex: a ? -1 : void 0 }
-  );
-  return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
-    b,
-    {
-      className: N(v(), l()),
-      href: e,
-      onPress: c,
-      isDisabled: a,
-      "data-level": s,
-      ...x,
-      ...d,
-      children: [
-        n && /* @__PURE__ */ u("span", { className: g(), children: n({ isCurrent: t ?? !1 }) }),
-        /* @__PURE__ */ u("span", { className: l(), children: o }),
-        r && /* @__PURE__ */ u("span", { className: m(), children: r })
-      ]
-    }
-  ) });
-}
-k.displayName = "NavItem";
-export {
-  k as NavItem,
-  A as navItemBase
-};