@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,261 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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 {};