@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,261 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+export declare const navItemBase: 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>>;
+declare const navItem: 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>>>;
+export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWithChildren<{
+    /** 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;
+}> & DataAttributes;
+/**
+ * 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 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 {};

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

@@ -0,0 +1,118 @@
+import { jsx as u, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as I } from "react";
+import { uyTv as y, uyMerge as j } from "@payfit/unity-themes";
+import { Button as R } from "react-aria-components/Button";
+import { Link as A } from "react-aria-components/Link";
+import { useRouter as k } from "../../../providers/router/RouterProvider.js";
+const B = y({
+  slots: {
+    base: [
+      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:theme-legacy:rounded-75 uy:theme-rebrand:rounded-100 uy:outline-0 uy:transition-all uy:min-h-5.5 uy:md:min-h-auto",
+      "uy:bg-transparent uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid uy:theme-rebrand:border-transparent",
+      "uy:theme-legacy:data-[hovered]:bg-surface-neutral-low-hover",
+      "uy:theme-rebrand:data-[hovered]:bg-surface-neutral-lowest-hover uy:theme-rebrand:data-[hovered]:border-border-neutral-lowest-hover",
+      "uy:theme-legacy:active:bg-surface-neutral-low-active uy:theme-legacy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:theme-rebrand:active:bg-surface-neutral-lowest-active uy:theme-rebrand:active:border-border-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:border-border-neutral-lowest-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:theme-legacy:p-25 uy:theme-rebrand:px-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: ""
+    }
+  }
+}), M = y({
+  extend: B,
+  variants: {
+    isActive: {
+      true: {
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active uy:theme-rebrand:data-[level=1]:bg-surface-neutral-lowest-active",
+          "uy:theme-rebrand:data-[level=0]:bg-surface-neutral uy:theme-rebrand:data-[level=0]:border-1 uy:theme-rebrand:data-[level=0]:border-solid uy:theme-rebrand:data-[level=0]:border-border-neutral uy:theme-rebrand:data-[level=0]:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
+        label: "uy:typography-body-strong"
+      },
+      false: {
+        base: "",
+        prefix: "uy:text-content-neutral-low",
+        label: "uy:typography-body"
+      }
+    }
+  }
+}), _ = C(
+  ({
+    children: d,
+    level: s = 0,
+    prefix: l,
+    suffix: n,
+    onPress: i,
+    href: t,
+    isCurrent: c,
+    isDisabled: r = !1,
+    isExact: m = !1,
+    ...b
+  }, p) => {
+    const o = k(), f = t ? A : R, e = o && t ? o.isActive(t, m) : c, {
+      rawNavItemClassName: h,
+      labelClassName: v,
+      prefixClassName: g,
+      suffixClassName: x
+    } = I(() => {
+      const a = M({ level: s, isActive: e, isDisabled: r });
+      return {
+        rawNavItemClassName: j(a.base(), a.label()),
+        prefixClassName: a.prefix(),
+        suffixClassName: a.suffix(),
+        labelClassName: a.label()
+      };
+    }, [e, r, s]), w = Object.assign(
+      {},
+      e !== void 0 && {
+        "data-current": e,
+        "aria-current": e ? "page" : void 0
+      },
+      !t && { tabIndex: r ? -1 : void 0 }
+    );
+    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ N(
+      f,
+      {
+        ...w,
+        ...b,
+        ref: p,
+        className: h,
+        href: t,
+        onPress: i,
+        isDisabled: r,
+        "data-level": s,
+        "data-selected": e,
+        children: [
+          l && /* @__PURE__ */ u("span", { className: g, children: l({ isCurrent: e ?? !1 }) }),
+          /* @__PURE__ */ u("span", { className: v, children: d }),
+          n && /* @__PURE__ */ u("span", { className: x, children: n })
+        ]
+      }
+    ) });
+  }
+);
+_.displayName = "RawNavItem";
+export {
+  _ as RawNavItem,
+  B as navItemBase
+};

package/dist/esm/components/navigation-card/NavigationCard.context.d.ts

@@ -0,0 +1,31 @@
+export interface NavigationCardContextValue {
+    id: string;
+    labelId: string;
+    descriptionId: string;
+}
+export declare const NavigationCardContext: import('react').Context<NavigationCardContextValue>;
+/**
+ * Accesses the NavigationCard context to retrieve accessibility IDs for proper ARIA relationships.
+ * Use this hook when building custom subcomponents that need to connect to the parent NavigationCard's accessibility structure.
+ * @returns {NavigationCardContextValue} An object containing id, labelId, and descriptionId for ARIA attributes
+ * @example
+ * ```tsx
+ * import { useNavigationCardContext } from '@payfit/unity-components'
+ *
+ * function CustomNavigationCardContent() {
+ *   const { labelId, descriptionId } = useNavigationCardContext()
+ *   return (
+ *     <div>
+ *       <span id={labelId}>Custom Label</span>
+ *       <span id={descriptionId}>Custom Description</span>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This hook must be called within a NavigationCard component
+ * - The context provides unique IDs for accessibility attributes
+ * - Use the provided IDs to maintain proper ARIA labeling relationships
+ * @see {@link NavigationCardContextValue} for the returned value structure
+ */
+export declare function useNavigationCardContext(): NavigationCardContextValue;

package/dist/esm/components/navigation-card/NavigationCard.context.js

@@ -0,0 +1,13 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  id: "",
+  labelId: "",
+  descriptionId: ""
+});
+function i() {
+  return e(o);
+}
+export {
+  o as NavigationCardContext,
+  i as useNavigationCardContext
+};

package/dist/esm/components/navigation-card/NavigationCard.d.ts

@@ -0,0 +1,46 @@
+import { NavigationCardProps } from './NavigationCard.types.js';
+/**
+ * The NavigationCard is a clickable card component for navigating between sections or pages in your application.
+ * Use navigation cards to create intuitive and appealing navigation patterns that guide users through different areas of your app.
+ * The component supports both link and button behaviors, and can be customized with flexible spacing options.
+ * @param {NavigationCardProps} props - Props including standard link/button props, padding, gap, prefix, and suffix
+ * @example
+ * ```tsx
+ * import {
+ *   RawNavigationCard,
+ *   NavigationCardLabel,
+ *   NavigationCardDescription
+ * } from '@payfit/unity-components'
+ * import { Icon } from '@payfit/unity-icons'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard
+ *       href="/dashboard"
+ *       prefix={<Icon name="dashboard" />}
+ *     >
+ *       <NavigationCardLabel>Dashboard</NavigationCardLabel>
+ *       <NavigationCardDescription>
+ *         View your company overview
+ *       </NavigationCardDescription>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use `asElement="a"` (default) for navigation links or `asElement="button"` for actions
+ * - Control spacing with `padding` (all sides), `paddingBlock` (vertical), `paddingInline` (horizontal), or individual sides via object notation
+ * - Adjust gap between prefix, body, and suffix with the `gap` prop
+ * - Default spacing values: `padding="$300"` (24px) and `gap="$150"` (12px)
+ * - Compose with `NavigationCardLabel` and `NavigationCardDescription` for proper accessibility
+ * - The component automatically handles focus states, hover effects, and disabled styling
+ * - For Tanstack Router integration, use the `NavigationCard` from `@payfit/unity-components/integrations/tanstack-router`
+ * @see {@link NavigationCardProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard--docs unity-components.payfit.io}
+ */
+declare const RawNavigationCard: import('react').ForwardRefExoticComponent<NavigationCardProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { RawNavigationCard };
+export type { NavigationCardProps } from './NavigationCard.types.js';

package/dist/esm/components/navigation-card/NavigationCard.js

@@ -0,0 +1,63 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as P } from "react";
+import { Button as $ } from "react-aria-components/Button";
+import { Link as w } from "react-aria-components/Link";
+import { useId as I } from "react-aria/useId";
+import { processPaddingProp as R } from "../../utils/spacing.js";
+import { NavigationCardContext as j } from "./NavigationCard.context.js";
+import { navigationCard as L } from "./NavigationCard.variants.js";
+const k = C(
+  ({
+    children: m,
+    asElement: f = "a",
+    prefix: t,
+    suffix: o,
+    padding: d = "$300",
+    paddingBlock: n,
+    paddingInline: s,
+    gap: c = "$150",
+    ...i
+  }, b) => {
+    const e = I(), l = f === "a" || "href" in i, v = i, a = {
+      id: `unity-navigation-card-${e}`,
+      labelId: i["aria-labelledby"] ?? `unity-navigation-card-label-${e}`,
+      descriptionId: i["aria-describedby"] ?? `unity-navigation-card-description-${e}`
+    }, {
+      base: y,
+      prefix: u,
+      body: p,
+      suffix: x
+    } = P(() => {
+      const g = R(
+        d,
+        n,
+        s
+      );
+      return L({
+        ...g,
+        gap: c
+      });
+    }, [d, n, s, c]), N = l ? w : $;
+    return /* @__PURE__ */ r(j.Provider, { value: a, children: /* @__PURE__ */ h(
+      N,
+      {
+        "data-dd-privacy": "allow",
+        id: a.id,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": a.descriptionId,
+        ...v,
+        ref: b,
+        className: y(),
+        children: [
+          t && /* @__PURE__ */ r("div", { className: u(), children: t }),
+          /* @__PURE__ */ r("div", { className: p(), children: m }),
+          o && /* @__PURE__ */ r("div", { className: x(), children: o })
+        ]
+      }
+    ) });
+  }
+);
+k.displayName = "RawNavigationCard";
+export {
+  k as RawNavigationCard
+};

package/dist/esm/components/navigation-card/NavigationCard.types.d.ts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
+import { PaddingObject, SpacingToken } from '../../utils/spacing.js';
+type NavigationCardAsLinkProps = Omit<AriaLinkProps, 'style' | 'className'>;
+type NavigationCardAsButtonProps = Omit<AriaButtonProps, 'style' | 'className'>;
+/**
+ * Props for the NavigationCard component.
+ */
+export type NavigationCardProps = PropsWithChildren<(NavigationCardAsLinkProps | NavigationCardAsButtonProps) & {
+    /** Render as either a link or button element */
+    asElement?: 'a' | 'button';
+    /** Content to display before the main body (e.g., icon, avatar) */
+    prefix?: React.ReactNode;
+    /** Content to display after the main body (e.g., badge, chevron) */
+    suffix?: React.ReactNode;
+    /**
+     * Padding for all directions, or an object specifying individual sides.
+     * @default '$300'
+     */
+    padding?: SpacingToken | PaddingObject;
+    /**
+     * Padding for block direction (top & bottom).
+     * Overrides `padding` for vertical spacing.
+     */
+    paddingBlock?: SpacingToken;
+    /**
+     * Padding for inline direction (left & right).
+     * Overrides `padding` for horizontal spacing.
+     */
+    paddingInline?: SpacingToken;
+    /**
+     * Gap between prefix, body, and suffix elements.
+     * @default '$150'
+     */
+    gap?: SpacingToken;
+}>;
+export {};