@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/core/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/core/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<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawNavigationCard };
+export type { NavigationCardProps } from './NavigationCard.types.js';

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

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

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

@@ -0,0 +1,164 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/navigation-card/NavigationCard.variants.ts
+var t = e({
+	slots: {
+		base: [
+			"uy:flex uy:flex-row uy:items-center uy:text-left",
+			"uy:rounded-lg uy:border-solid uy:border-1 uy:transition-colors uy:group",
+			"uy:cursor-pointer uy:data-[disabled]:cursor-not-allowed",
+			"uy:bg-surface-neutral uy:border-border-neutral",
+			"uy:text-content-neutral",
+			"uy:data-[hovered]:bg-surface-neutral-hover uy:data-[hovered]:border-border-neutral-hover",
+			"uy:data-[pressed]:bg-surface-neutral-pressed  uy:data-[pressed]:border-transparent",
+			"uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2",
+			"uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled"
+		],
+		prefix: ["uy:w-fit uy:contents uy:grow-0 uy:shrink-1"],
+		body: ["uy:flex-1 uy:space-y-50"],
+		suffix: ["uy:w-fit uy:grow-0 uy:shrink-1"]
+	},
+	variants: {
+		gap: {
+			$0: { base: "uy:gap-0" },
+			$25: { base: "uy:gap-25" },
+			$50: { base: "uy:gap-50" },
+			$75: { base: "uy:gap-75" },
+			$100: { base: "uy:gap-100" },
+			$125: { base: "uy:gap-125" },
+			$150: { base: "uy:gap-150" },
+			$200: { base: "uy:gap-200" },
+			$250: { base: "uy:gap-250" },
+			$300: { base: "uy:gap-300" },
+			$400: { base: "uy:gap-400" },
+			$500: { base: "uy:gap-500" },
+			$600: { base: "uy:gap-600" },
+			$800: { base: "uy:gap-800" },
+			$1000: { base: "uy:gap-1000" }
+		},
+		padding: {
+			$0: { base: "uy:p-0" },
+			$25: { base: "uy:p-25" },
+			$50: { base: "uy:p-50" },
+			$75: { base: "uy:p-75" },
+			$100: { base: "uy:p-100" },
+			$125: { base: "uy:p-125" },
+			$150: { base: "uy:p-150" },
+			$200: { base: "uy:p-200" },
+			$250: { base: "uy:p-250" },
+			$300: { base: "uy:p-300" },
+			$400: { base: "uy:p-400" },
+			$500: { base: "uy:p-500" },
+			$600: { base: "uy:p-600" },
+			$800: { base: "uy:p-800" },
+			$1000: { base: "uy:p-1000" }
+		},
+		paddingBlock: {
+			$0: { base: "uy:py-0" },
+			$25: { base: "uy:py-25" },
+			$50: { base: "uy:py-50" },
+			$75: { base: "uy:py-75" },
+			$100: { base: "uy:py-100" },
+			$125: { base: "uy:py-125" },
+			$150: { base: "uy:py-150" },
+			$200: { base: "uy:py-200" },
+			$250: { base: "uy:py-250" },
+			$300: { base: "uy:py-300" },
+			$400: { base: "uy:py-400" },
+			$500: { base: "uy:py-500" },
+			$600: { base: "uy:py-600" },
+			$800: { base: "uy:py-800" },
+			$1000: { base: "uy:py-1000" }
+		},
+		paddingInline: {
+			$0: { base: "uy:px-0" },
+			$25: { base: "uy:px-25" },
+			$50: { base: "uy:px-50" },
+			$75: { base: "uy:px-75" },
+			$100: { base: "uy:px-100" },
+			$125: { base: "uy:px-125" },
+			$150: { base: "uy:px-150" },
+			$200: { base: "uy:px-200" },
+			$250: { base: "uy:px-250" },
+			$300: { base: "uy:px-300" },
+			$400: { base: "uy:px-400" },
+			$500: { base: "uy:px-500" },
+			$600: { base: "uy:px-600" },
+			$800: { base: "uy:px-800" },
+			$1000: { base: "uy:px-1000" }
+		},
+		paddingTop: {
+			$0: { base: "uy:pt-0" },
+			$25: { base: "uy:pt-25" },
+			$50: { base: "uy:pt-50" },
+			$75: { base: "uy:pt-75" },
+			$100: { base: "uy:pt-100" },
+			$125: { base: "uy:pt-125" },
+			$150: { base: "uy:pt-150" },
+			$200: { base: "uy:pt-200" },
+			$250: { base: "uy:pt-250" },
+			$300: { base: "uy:pt-300" },
+			$400: { base: "uy:pt-400" },
+			$500: { base: "uy:pt-500" },
+			$600: { base: "uy:pt-600" },
+			$800: { base: "uy:pt-800" },
+			$1000: { base: "uy:pt-1000" }
+		},
+		paddingRight: {
+			$0: { base: "uy:pr-0" },
+			$25: { base: "uy:pr-25" },
+			$50: { base: "uy:pr-50" },
+			$75: { base: "uy:pr-75" },
+			$100: { base: "uy:pr-100" },
+			$125: { base: "uy:pr-125" },
+			$150: { base: "uy:pr-150" },
+			$200: { base: "uy:pr-200" },
+			$250: { base: "uy:pr-250" },
+			$300: { base: "uy:pr-300" },
+			$400: { base: "uy:pr-400" },
+			$500: { base: "uy:pr-500" },
+			$600: { base: "uy:pr-600" },
+			$800: { base: "uy:pr-800" },
+			$1000: { base: "uy:pr-1000" }
+		},
+		paddingBottom: {
+			$0: { base: "uy:pb-0" },
+			$25: { base: "uy:pb-25" },
+			$50: { base: "uy:pb-50" },
+			$75: { base: "uy:pb-75" },
+			$100: { base: "uy:pb-100" },
+			$125: { base: "uy:pb-125" },
+			$150: { base: "uy:pb-150" },
+			$200: { base: "uy:pb-200" },
+			$250: { base: "uy:pb-250" },
+			$300: { base: "uy:pb-300" },
+			$400: { base: "uy:pb-400" },
+			$500: { base: "uy:pb-500" },
+			$600: { base: "uy:pb-600" },
+			$800: { base: "uy:pb-800" },
+			$1000: { base: "uy:pb-1000" }
+		},
+		paddingLeft: {
+			$0: { base: "uy:pl-0" },
+			$25: { base: "uy:pl-25" },
+			$50: { base: "uy:pl-50" },
+			$75: { base: "uy:pl-75" },
+			$100: { base: "uy:pl-100" },
+			$125: { base: "uy:pl-125" },
+			$150: { base: "uy:pl-150" },
+			$200: { base: "uy:pl-200" },
+			$250: { base: "uy:pl-250" },
+			$300: { base: "uy:pl-300" },
+			$400: { base: "uy:pl-400" },
+			$500: { base: "uy:pl-500" },
+			$600: { base: "uy:pl-600" },
+			$800: { base: "uy:pl-800" },
+			$1000: { base: "uy:pl-1000" }
+		}
+	},
+	defaultVariants: {
+		padding: "$300",
+		gap: "$150"
+	}
+});
+//#endregion
+export { t as navigationCard };

package/dist/esm/core/components/navigation-card/parts/NavigationCardDescription.d.ts

@@ -0,0 +1,39 @@
+import { TextProps } from '../../text/Text.js';
+export type NavigationCardDescriptionProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'style'>;
+/**
+ * Displays supplementary descriptive text for a NavigationCard component.
+ * Use this component to provide additional context or details about the navigation card's destination, helping users understand what they'll find when they navigate.
+ * The description automatically connects to the parent NavigationCard for proper accessibility semantics.
+ * @param {NavigationCardDescriptionProps} props - Standard text element props (excluding variant, color, className, and style which are preset)
+ * @example
+ * ```tsx
+ * import {
+ *   RawNavigationCard,
+ *   NavigationCardLabel,
+ *   NavigationCardDescription
+ * } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard href="/reports">
+ *       <NavigationCardLabel>Monthly Reports</NavigationCardLabel>
+ *       <NavigationCardDescription>
+ *         Access and download your company's monthly reports
+ *       </NavigationCardDescription>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used within a `NavigationCard` component to function correctly
+ * - The description text is styled with the "body" typography variant and lower emphasis color
+ * - Automatically receives proper accessibility IDs from the parent NavigationCard
+ * - Supports all standard HTML text element props except styling props which are managed by the component
+ * @see {@link NavigationCardDescriptionProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/navigation-card/parts 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-navigationcarddescription--docs unity-components.payfit.io}
+ */
+declare const NavigationCardDescription: import('react').ForwardRefExoticComponent<NavigationCardDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
+export { NavigationCardDescription };

package/dist/esm/core/components/navigation-card/parts/NavigationCardDescription.js

@@ -0,0 +1,19 @@
+import { Text as e } from "../../text/Text.js";
+import { useNavigationCardContext as t } from "../NavigationCard.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/navigation-card/parts/NavigationCardDescription.tsx
+var i = n((n, i) => {
+	let { descriptionId: a } = t();
+	return /* @__PURE__ */ r(e, {
+		id: a,
+		...n,
+		ref: i,
+		variant: "body",
+		color: "content.neutral.low",
+		className: "uy:max-sm:typography-body-small uy:group-aria-disabled:text-content-neutral-disabled"
+	});
+});
+i.displayName = "NavigationCardDescription";
+//#endregion
+export { i as NavigationCardDescription };

package/dist/esm/core/components/navigation-card/parts/NavigationCardGroup.d.ts

@@ -0,0 +1,146 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export declare const navigationCardGroup: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}>>;
+export interface NavigationCardGroupProps extends PropsWithChildren {
+    label: string;
+    isLabelHidden?: boolean;
+    orientation?: VariantProps<typeof navigationCardGroup>['orientation'];
+    variant?: VariantProps<typeof navigationCardGroup>['variant'];
+}
+/**
+ * Groups multiple NavigationCard components together with a shared label, consistent layout, and proper accessibility.
+ * Use this component to organize related navigation cards into logical sections, creating clear visual hierarchy and improving discoverability.
+ * The group automatically handles spacing, borders, and rounded corners for seamless visual integration between cards.
+ * @param {NavigationCardGroupProps} props - Props including label, isLabelHidden, orientation, variant, and children
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationCardGroup,
+ *   RawNavigationCard,
+ *   NavigationCardLabel
+ * } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <NavigationCardGroup
+ *       label="Quick Actions"
+ *       variant="compact"
+ *     >
+ *       <RawNavigationCard href="/payroll">
+ *         <NavigationCardLabel>Run Payroll</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *       <RawNavigationCard href="/reports">
+ *         <NavigationCardLabel>View Reports</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *       <RawNavigationCard href="/settings">
+ *         <NavigationCardLabel>Settings</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *     </NavigationCardGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Set the `variant` prop to `"compact"` to remove spacing between cards and merge their borders for a unified look
+ * - Use `variant="comfortable"` (default) for cards with individual spacing and borders
+ * - Set `orientation` to `"horizontal"` for responsive layout (stacks vertically on mobile, horizontally on larger screens)
+ * - Use `isLabelHidden` to visually hide the label while keeping it accessible to screen readers
+ * - The label is required for accessibility and provides context for navigation landmarks
+ * - Only include NavigationCard components as direct children for proper styling
+ * @see {@link NavigationCardGroupProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/navigation-card/parts 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-navigationcardgroup--docs unity-components.payfit.io}
+ */
+declare const NavigationCardGroup: React.ForwardRefExoticComponent<NavigationCardGroupProps & React.RefAttributes<HTMLElement>>;
+export { NavigationCardGroup };

package/dist/esm/core/components/navigation-card/parts/NavigationCardGroup.js

@@ -0,0 +1,76 @@
+import e, { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react-aria/useId";
+//#region src/core/components/navigation-card/parts/NavigationCardGroup.tsx
+var o = n({
+	slots: {
+		base: ["uy:flex uy:flex-col uy:gap-100"],
+		label: ["uy:typography-action"],
+		list: ["uy:flex uy:list-none uy:group"],
+		listItem: [
+			"uy:contents",
+			"uy:data-[variant=compact]:*:rounded-none",
+			"uy:data-[variant=compact]:*:border-b-0",
+			"uy:data-[variant=compact]:first:*:rounded-t-lg",
+			"uy:data-[variant=compact]:last:*:rounded-b-lg",
+			"uy:data-[variant=compact]:last:*:border-b-1",
+			"uy:data-[variant=compact]:first:last:*:rounded-lg"
+		]
+	},
+	variants: {
+		orientation: {
+			horizontal: { list: "uy:flex-col uy:sm:flex-row" },
+			vertical: { list: "uy:flex-col" }
+		},
+		variant: {
+			compact: { list: "uy:gap-0" },
+			comfortable: { list: "uy:gap-100" }
+		},
+		showLabel: {
+			true: { label: "" },
+			false: { label: "uy:sr-only" }
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "comfortable",
+		showLabel: !0
+	}
+}), s = t(({ children: t, label: n, isLabelHidden: s = !1, orientation: c = "vertical", variant: l = "comfortable", ...u }, d) => {
+	let f = a(), { base: p, label: m, list: h, listItem: g } = o({
+		orientation: c,
+		variant: l,
+		showLabel: !s
+	}), _ = e.Children.toArray(t), v = _.length, y = `navcard-group-label-${f}`;
+	return /* @__PURE__ */ i("nav", {
+		...u,
+		ref: d,
+		className: p(),
+		"aria-labelledby": y,
+		children: [/* @__PURE__ */ r("span", {
+			className: m(),
+			id: y,
+			children: n
+		}), /* @__PURE__ */ r("ul", {
+			className: h(),
+			"data-variant": l,
+			children: _.map((t, n) => {
+				if (e.isValidElement(t)) {
+					let e = n === 0, i = n === v - 1;
+					return /* @__PURE__ */ r("li", {
+						className: g(),
+						"data-variant": l,
+						"data-unity-first": e ? "" : void 0,
+						"data-unity-last": i ? "" : void 0,
+						children: t
+					}, t.key);
+				}
+				return t;
+			})
+		})]
+	});
+});
+s.displayName = "NavigationCardGroup";
+//#endregion
+export { s as NavigationCardGroup, o as navigationCardGroup };

package/dist/esm/core/components/navigation-card/parts/NavigationCardLabel.d.ts

@@ -0,0 +1,32 @@
+import { TextProps } from '../../text/Text.js';
+export type NavigationCardLabelProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'style'>;
+/**
+ * Displays the primary label text for a NavigationCard component.
+ * Use this component to provide the main identifying text for your navigation card, which serves as the accessible label for the entire card.
+ * The label automatically connects to the parent NavigationCard for proper accessibility semantics.
+ * @param {NavigationCardLabelProps} props - Standard text element props (excluding variant, color, className, and style which are preset)
+ * @example
+ * ```tsx
+ * import { RawNavigationCard, NavigationCardLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard href="/team">
+ *       <NavigationCardLabel>Team Members</NavigationCardLabel>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used within a `NavigationCard` component to function correctly
+ * - The label text is styled with the "action" typography variant for consistency
+ * - Automatically receives proper accessibility IDs from the parent NavigationCard
+ * - Supports all standard HTML text element props except styling props which are managed by the component
+ * @see {@link NavigationCardLabelProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/navigation-card/parts 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-navigationcardlabel--docs unity-components.payfit.io}
+ */
+declare const NavigationCardLabel: import('react').ForwardRefExoticComponent<NavigationCardLabelProps & import('react').RefAttributes<HTMLElement>>;
+export { NavigationCardLabel };

package/dist/esm/core/components/navigation-card/parts/NavigationCardLabel.js

@@ -0,0 +1,19 @@
+import { Text as e } from "../../text/Text.js";
+import { useNavigationCardContext as t } from "../NavigationCard.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/navigation-card/parts/NavigationCardLabel.tsx
+var i = n((n, i) => {
+	let { labelId: a } = t();
+	return /* @__PURE__ */ r(e, {
+		id: a,
+		...n,
+		ref: i,
+		variant: "action",
+		color: "content.neutral",
+		className: "uy:group-aria-disabled:text-content-neutral-disabled"
+	});
+});
+i.displayName = "NavigationCardLabel";
+//#endregion
+export { i as NavigationCardLabel };