@payfit/unity-components 3.9.4 → 3.9.5

package/dist/esm/ai-kit.js

@@ -1,15 +1,21 @@
-import { aiGradientEffect as e, aiGradientSurfaceEffect as t } from "./modules/ai-kit/utils/ai-gradient-effect.js";
-import { AIButton as n } from "./modules/ai-kit/components/ai-button/AIButton.js";
-import { PayfitAIBrand as r } from "./modules/ai-kit/components/payfit-ai-brand/PayfitAIBrand.js";
-import { AITriggerButton as i } from "./modules/ai-kit/components/ai-trigger-button/AITriggerButton.js";
-import { AIComposerAttachment as a } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachment.js";
-import { AIComposerAttachmentsGroup as o } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js";
-import { AIComposer as s } from "./modules/ai-kit/components/ai-composer/AIComposer.js";
-import { AIComposerAction as c } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAction.js";
-import { AIComposerActions as l } from "./modules/ai-kit/components/ai-composer/parts/AIComposerActions.js";
-import { AIComposerAlert as u } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAlert.js";
-import { AIComposerSubmitAction as d } from "./modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.js";
-import { AIComposerTextArea as f } from "./modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js";
-import { useAIKitFieldContext as p, useAIKitFormContext as m } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
-import { aiKitForm as h, useAIKitForm as g } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
-export { n as AIButton, s as AIComposer, c as AIComposerAction, l as AIComposerActions, u as AIComposerAlert, a as AIComposerAttachment, o as AIComposerAttachmentsGroup, d as AIComposerSubmitAction, f as AIComposerTextArea, i as AITriggerButton, r as PayfitAIBrand, e as aiGradientEffect, t as aiGradientSurfaceEffect, h as aiKitForm, p as useAIKitFieldContext, g as useAIKitForm, m as useAIKitFormContext };
+import { RawAIOutcomeCard as e } from "./modules/ai-kit/components/ai-outcome-card/RawAIOutcomeCard.js";
+import { aiGradientEffect as t, aiGradientSurfaceEffect as n } from "./modules/ai-kit/utils/ai-gradient-effect.js";
+import { AIButton as r } from "./modules/ai-kit/components/ai-button/AIButton.js";
+import { PayfitAIBrand as i } from "./modules/ai-kit/components/payfit-ai-brand/PayfitAIBrand.js";
+import { AITriggerButton as a } from "./modules/ai-kit/components/ai-trigger-button/AITriggerButton.js";
+import { AIComposerAttachment as o } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachment.js";
+import { AIComposerAttachmentsGroup as s } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js";
+import { AIComposer as c } from "./modules/ai-kit/components/ai-composer/AIComposer.js";
+import { AIComposerAction as l } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAction.js";
+import { AIComposerActions as u } from "./modules/ai-kit/components/ai-composer/parts/AIComposerActions.js";
+import { AIComposerAlert as d } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAlert.js";
+import { AIComposerSubmitAction as f } from "./modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.js";
+import { AIComposerTextArea as p } from "./modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js";
+import { useAIKitFieldContext as m, useAIKitFormContext as h } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
+import { aiKitForm as g, useAIKitForm as _ } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
+import { AIOutcomeCardIcon as v } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
+import { AIOutcomeCardTitle as y } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
+import { AIOutcomeCardDescription as b } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
+import { AIOutcomeCardActions as x } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
+import { AIOutcomeCardAction as S } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
+export { r as AIButton, c as AIComposer, l as AIComposerAction, u as AIComposerActions, d as AIComposerAlert, o as AIComposerAttachment, s as AIComposerAttachmentsGroup, f as AIComposerSubmitAction, p as AIComposerTextArea, S as AIOutcomeCardAction, x as AIOutcomeCardActions, b as AIOutcomeCardDescription, v as AIOutcomeCardIcon, y as AIOutcomeCardTitle, a as AITriggerButton, i as PayfitAIBrand, e as RawAIOutcomeCard, t as aiGradientEffect, n as aiGradientSurfaceEffect, g as aiKitForm, m as useAIKitFieldContext, _ as useAIKitForm, h as useAIKitFormContext };

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

@@ -2,6 +2,8 @@ export interface NavigationCardContextValue {
     id: string;
     labelId: string;
     descriptionId: string;
+    isHovered: boolean;
+    isFocused: boolean;
 }
 export declare const NavigationCardContext: import('react').Context<NavigationCardContextValue>;
 /**

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

@@ -3,7 +3,9 @@ import { createContext as e, useContext as t } from "react";
 var n = e({
 	id: "",
 	labelId: "",
-	descriptionId: ""
+	descriptionId: "",
+	isHovered: !1,
+	isFocused: !1
 });
 function r() {
 	return t(n);

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

@@ -1,53 +1,61 @@
 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";
+import { forwardRef as r, useMemo as i, useState as a } from "react";
+import { mergeProps as o, useFocusVisible as s, useFocusWithin as c, useHover as l } from "react-aria";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Button as f } from "react-aria-components/Button";
+import { Link as p } from "react-aria-components/Link";
+import { useId as m } 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
+var h = r(({ children: r, asElement: h = "a", prefix: g, suffix: _, padding: v = "$300", paddingBlock: y, paddingInline: b, gap: x = "$150", ...S }, C) => {
+	let w = m(), [T, E] = a(!1), D = h === "a" || "href" in S, O = S, k = {
+		id: `unity-navigation-card-${w}`,
+		labelId: S["aria-labelledby"] ?? `unity-navigation-card-label-${w}`,
+		descriptionId: S["aria-describedby"] ?? `unity-navigation-card-description-${w}`
+	}, { hoverProps: A, isHovered: j } = l({ isDisabled: O.isDisabled }), { focusWithinProps: M } = c({
+		isDisabled: O.isDisabled,
+		onFocusWithinChange: E
+	}), { isFocusVisible: N } = s(), P = {
+		...k,
+		isHovered: j,
+		isFocused: T && N
+	}, { base: F, prefix: I, body: L, suffix: R } = i(() => n({
+		...e(v, y, b),
+		gap: x
 	}), [
-		p,
-		m,
-		h,
-		g
-	]), D = b ? c : s;
-	return /* @__PURE__ */ a(t.Provider, {
-		value: S,
-		children: /* @__PURE__ */ o(D, {
+		v,
+		y,
+		b,
+		x
+	]), z = D ? p : f;
+	return /* @__PURE__ */ u(t.Provider, {
+		value: P,
+		children: /* @__PURE__ */ d(z, {
 			"data-dd-privacy": "allow",
-			id: S.id,
-			"aria-labelledby": S.labelId,
-			"aria-describedby": S.descriptionId,
-			...x,
-			ref: v,
-			className: C(),
+			id: k.id,
+			"aria-labelledby": k.labelId,
+			"aria-describedby": k.descriptionId,
+			...o(O, A, M),
+			ref: C,
+			className: F(),
 			children: [
-				d && /* @__PURE__ */ a("div", {
-					className: w(),
-					children: d
+				g && /* @__PURE__ */ u("div", {
+					className: I(),
+					children: g
 				}),
-				/* @__PURE__ */ a("div", {
-					className: T(),
+				/* @__PURE__ */ u("div", {
+					className: L(),
 					children: r
 				}),
-				f && /* @__PURE__ */ a("div", {
-					className: E(),
-					children: f
+				_ && /* @__PURE__ */ u("div", {
+					className: R(),
+					children: _
 				})
 			]
 		})
 	});
 });
-u.displayName = "RawNavigationCard";
+h.displayName = "RawNavigationCard";
 //#endregion
-export { u as RawNavigationCard };
+export { h as RawNavigationCard };

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

@@ -3,7 +3,7 @@ import { uyTv as e } from "@payfit/unity-themes";
 var t = e({
 	slots: {
 		base: [
-			"uy:flex uy:flex-row uy:items-center uy:text-left",
+			"uy:flex uy:w-full 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",
@@ -14,7 +14,7 @@ var t = e({
 			"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"],
+		body: ["uy:min-w-0 uy:flex-1 uy:space-y-50"],
 		suffix: ["uy:w-fit uy:grow-0 uy:shrink-1"]
 	},
 	variants: {

package/dist/esm/integrations/tanstack-router.js

@@ -10,13 +10,14 @@ import { ListView as c } from "../modules/tanstack-router/components/list-view/L
 import { ListViewItem as l } from "../modules/tanstack-router/components/list-view/parts/ListViewItem.js";
 import { MenuItem as u } from "../modules/tanstack-router/components/menu-item/MenuItem.js";
 import { NavigationCard as d } from "../modules/tanstack-router/components/navigation-card/NavigationCard.js";
-import { NavItem as f } from "../modules/tanstack-router/components/nav-item/NavItem.js";
-import { PaginationLink as p } from "../modules/tanstack-router/components/pagination/PaginationLink.js";
-import { PaginationNext as m } from "../modules/tanstack-router/components/pagination/PaginationNext.js";
-import { PaginationPrevious as h } from "../modules/tanstack-router/components/pagination/PaginationPrevious.js";
-import { Tab as g } from "../modules/tanstack-router/components/tabs/parts/Tab.js";
-import { TabPanel as _ } from "../modules/tanstack-router/components/tabs/parts/TabPanel.js";
-import { Tabs as v } from "../modules/tanstack-router/components/tabs/Tabs.js";
-import { Task as y } from "../modules/tanstack-router/components/task-menu/Task.js";
-import { SubTask as b } from "../modules/tanstack-router/components/task-menu/SubTask.js";
-export { t as Breadcrumb, r as BreadcrumbLink, e as Breadcrumbs, a as IconButtonLink, o as Link, s as LinkButton, c as ListView, l as ListViewItem, u as MenuItem, f as NavItem, d as NavigationCard, p as PaginationLink, m as PaginationNext, h as PaginationPrevious, b as SubTask, g as Tab, n as TabList, _ as TabPanel, v as Tabs, i as TanstackFormContextualLink, y as Task };
+import { AIOutcomeCard as f } from "../modules/tanstack-router/components/ai-outcome-card/AIOutcomeCard.js";
+import { NavItem as p } from "../modules/tanstack-router/components/nav-item/NavItem.js";
+import { PaginationLink as m } from "../modules/tanstack-router/components/pagination/PaginationLink.js";
+import { PaginationNext as h } from "../modules/tanstack-router/components/pagination/PaginationNext.js";
+import { PaginationPrevious as g } from "../modules/tanstack-router/components/pagination/PaginationPrevious.js";
+import { Tab as _ } from "../modules/tanstack-router/components/tabs/parts/Tab.js";
+import { TabPanel as v } from "../modules/tanstack-router/components/tabs/parts/TabPanel.js";
+import { Tabs as y } from "../modules/tanstack-router/components/tabs/Tabs.js";
+import { Task as b } from "../modules/tanstack-router/components/task-menu/Task.js";
+import { SubTask as x } from "../modules/tanstack-router/components/task-menu/SubTask.js";
+export { f as AIOutcomeCard, t as Breadcrumb, r as BreadcrumbLink, e as Breadcrumbs, a as IconButtonLink, o as Link, s as LinkButton, c as ListView, l as ListViewItem, u as MenuItem, p as NavItem, d as NavigationCard, m as PaginationLink, h as PaginationNext, g as PaginationPrevious, x as SubTask, _ as Tab, n as TabList, v as TabPanel, y as Tabs, i as TanstackFormContextualLink, b as Task };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/RawAIOutcomeCard.d.ts

@@ -0,0 +1,68 @@
+import { ButtonProps } from 'react-aria-components/Button';
+import { LinkProps } from 'react-aria-components/Link';
+type AIOutcomeCardContentProps = {
+    /** Renders the prescribed outcome icon in the leading card slot. */
+    icon: React.ReactNode;
+    /** Renders visual-only action content in the trailing card slot. */
+    actions?: React.ReactNode;
+};
+type AIOutcomeCardLinkProps = Omit<LinkProps, 'className' | 'style'> & AIOutcomeCardContentProps & {
+    asElement?: 'a';
+};
+type AIOutcomeCardButtonProps = Omit<ButtonProps, 'className' | 'style'> & AIOutcomeCardContentProps & {
+    asElement: 'button';
+};
+/** Props for {@link RawAIOutcomeCard}. */
+export type RawAIOutcomeCardProps = AIOutcomeCardLinkProps | AIOutcomeCardButtonProps;
+/**
+ * Gives people a clear next step after an AI-generated outcome.
+ * Renders one accessible card surface with a prescribed icon, composed title
+ * and description, and optional trailing visual actions. It can be either a native
+ * link or a native button.
+ * @param props - Link or button props, outcome content, and trailing actions.
+ * @param props.icon - The fixed Outcome Card icon treatment.
+ * @param props.actions - Visual-only content rendered at the trailing edge of
+ * the card.
+ * @param props.children - Compose `AIOutcomeCardTitle` and
+ * `AIOutcomeCardDescription` to name and describe the outcome.
+ * @see {@link RawAIOutcomeCardProps} for all available props.
+ * @see {@link AIOutcomeCardTitle} and {@link AIOutcomeCardDescription} for the
+ * accessible name and description parts.
+ * @example
+ * ```tsx
+ * import {
+ *   AIOutcomeCardAction,
+ *   AIOutcomeCardActions,
+ *   AIOutcomeCardDescription,
+ *   AIOutcomeCardIcon,
+ *   AIOutcomeCardTitle,
+ *   RawAIOutcomeCard,
+ * } from '@payfit/unity-components/ai-kit'
+ *
+ * export function PaidLeaveOutcome() {
+ *   return (
+ *     <RawAIOutcomeCard
+ *       actions={
+ *         <AIOutcomeCardActions>
+ *           <AIOutcomeCardAction>View</AIOutcomeCardAction>
+ *         </AIOutcomeCardActions>
+ *       }
+ *       href="/leave/requests/123"
+ *       icon={<AIOutcomeCardIcon name="Calendar" />}
+ *     >
+ *       <AIOutcomeCardTitle>Paid leave</AIOutcomeCardTitle>
+ *       <AIOutcomeCardDescription>
+ *         View paid leave request
+ *       </AIOutcomeCardDescription>
+ *     </RawAIOutcomeCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * `AIOutcomeCardTitle` supplies the card's accessible name and
+ * `AIOutcomeCardDescription` supplies its accessible description. Keep
+ * `actions` free of links, buttons, menu triggers, and other interactive
+ * elements because the card is the sole interactive surface.
+ */
+declare const RawAIOutcomeCard: import('react').ForwardRefExoticComponent<RawAIOutcomeCardProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawAIOutcomeCard };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/RawAIOutcomeCard.js

@@ -0,0 +1,20 @@
+import { RawNavigationCard as e } from "../../../../core/components/navigation-card/NavigationCard.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-outcome-card/RawAIOutcomeCard.tsx
+var r = t(({ icon: t, actions: r, ...i }, a) => /* @__PURE__ */ n(e, {
+	...i,
+	ref: a,
+	prefix: t,
+	suffix: r,
+	padding: {
+		top: "$100",
+		bottom: "$100",
+		left: "$125",
+		right: "$200"
+	},
+	gap: "$150"
+}));
+r.displayName = "RawAIOutcomeCard";
+//#endregion
+export { r as RawAIOutcomeCard };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/figma/AIOutcomeCard.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+/** Props for {@link AIOutcomeCardAction}. */
+export type AIOutcomeCardActionProps = PropsWithChildren<Record<never, never>>;
+/**
+ * Communicates the Outcome Card's available next step without adding visual
+ * weight to the outcome itself.
+ *
+ * Renders `children` with the prescribed action typography and hides the
+ * label from assistive technology when the parent card already exposes the
+ * accessible outcome name and description.
+ *
+ * Compose `AIOutcomeCardAction` inside `AIOutcomeCardActions` and pass the
+ * visible action label as `children`.
+ * @param props - The visible action label.
+ * @param props.children - Text that describes the next action visually.
+ */
+declare const AIOutcomeCardAction: {
+    ({ children }: AIOutcomeCardActionProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};
+export { AIOutcomeCardAction };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js

@@ -0,0 +1,12 @@
+import { Text as e } from "../../../../../core/components/text/Text.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.tsx
+var n = ({ children: n }) => /* @__PURE__ */ t(e, {
+	"aria-hidden": "true",
+	color: "content.neutral",
+	variant: "action",
+	children: n
+});
+n.displayName = "AIOutcomeCardAction";
+//#endregion
+export { n as AIOutcomeCardAction };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+/** Props for {@link AIOutcomeCardActions}. */
+export type AIOutcomeCardActionsProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'children' | 'className'>>;
+/**
+ * Keeps Outcome Card actions aligned without taking space from the outcome
+ * title and description.
+ *
+ * Renders `children` in a horizontal, spaced suffix container.
+ *
+ * Pass `AIOutcomeCardActions` through the parent card's `actions` prop and
+ * compose visual-only trailing labels as `children`. The parent card is the
+ * sole interactive surface, so do not nest links, buttons, or menu triggers.
+ * @param props - Suffix content and an optional `className`.
+ * @param props.children - One or more visual-only trailing action labels.
+ * @param props.className - Additional classes merged with the suffix layout.
+ */
+declare const AIOutcomeCardActions: {
+    ({ children, className, }: AIOutcomeCardActionsProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};
+export { AIOutcomeCardActions };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js

@@ -0,0 +1,10 @@
+import { uyTv as e } from "@payfit/unity-themes";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.tsx
+var n = e({ base: "uy:flex uy:items-center uy:gap-100" }), r = ({ children: e, className: r }) => /* @__PURE__ */ t("div", {
+	className: n({ className: r }),
+	children: e
+});
+r.displayName = "AIOutcomeCardActions";
+//#endregion
+export { r as AIOutcomeCardActions };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { TextProps } from '../../../../../core/components/text/Text.js';
+/** Props for {@link AIOutcomeCardDescription}. */
+export type AIOutcomeCardDescriptionProps = Omit<TextProps, 'children' | 'variant' | 'color' | 'className' | 'isTruncated' | 'style'> & {
+    children: ReactNode | ((renderProps: {
+        isHovered: boolean;
+        isFocused: boolean;
+    }) => ReactNode);
+};
+/**
+ * Adds supporting context to an Outcome Card without competing with its title.
+ *
+ * Renders `children` in the prescribed small body typography and connects the
+ * text to the parent card through `aria-describedby`. A function child also
+ * receives the card's hover and focus-visible state.
+ *
+ * Compose `AIOutcomeCardDescription` inside `RawAIOutcomeCard`. Pass static
+ * `children` for persistent context, or a render function that reads
+ * `isHovered` and `isFocused` to change the visible description.
+ * @param props - Text attributes and static or state-aware `children`.
+ * @param props.children - Description content, or a function receiving
+ * `isHovered` and `isFocused`.
+ */
+declare const AIOutcomeCardDescription: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "children" | "className" | "style" | "variant" | "isTruncated"> & {
+    children: ReactNode | ((renderProps: {
+        isHovered: boolean;
+        isFocused: boolean;
+    }) => ReactNode);
+} & import('react').RefAttributes<HTMLElement>>;
+export { AIOutcomeCardDescription };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js

@@ -0,0 +1,23 @@
+import { Text as e } from "../../../../../core/components/text/Text.js";
+import { useNavigationCardContext as t } from "../../../../../core/components/navigation-card/NavigationCard.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.tsx
+var i = n(({ children: n, ...i }, a) => {
+	let { descriptionId: o, isFocused: s, isHovered: c } = t(), l = typeof n == "function" ? n({
+		isHovered: c,
+		isFocused: s
+	}) : n;
+	return /* @__PURE__ */ r(e, {
+		...i,
+		ref: a,
+		id: o,
+		color: "content.neutral.low",
+		isTruncated: !0,
+		variant: "bodySmall",
+		children: l
+	});
+});
+i.displayName = "AIOutcomeCardDescription";
+//#endregion
+export { i as AIOutcomeCardDescription };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.d.ts

@@ -0,0 +1,25 @@
+/** Props for {@link AIOutcomeCardIcon}. */
+export interface AIOutcomeCardIconProps {
+    /**
+     * Selects the canonical Unity icon without its visual variant suffix.
+     * `AIOutcomeCardIcon` always renders the outlined 24px treatment.
+     */
+    name: string;
+}
+/**
+ * Makes AI outcomes scannable without creating another interactive target.
+ *
+ * Renders a decorative, fixed-size icon tile using the outlined 24px Unity
+ * icon treatment and neutral tokens.
+ *
+ * Pass the canonical icon `name` without the `Outlined` suffix, such as
+ * `Calendar`. The component applies the icon variant, size, color, and
+ * `aria-hidden` treatment.
+ * @param props - The canonical Unity icon name.
+ * @param props.name - Icon name without the `Outlined` suffix.
+ */
+declare const AIOutcomeCardIcon: {
+    ({ name }: AIOutcomeCardIconProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};
+export { AIOutcomeCardIcon };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js

@@ -0,0 +1,17 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Icon as t } from "@payfit/unity-icons";
+//#region src/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.tsx
+var n = ({ name: n }) => /* @__PURE__ */ e("div", {
+	"aria-hidden": "true",
+	className: "uy:flex uy:size-600 uy:items-center uy:justify-center uy:rounded-md uy:bg-surface-neutral-low",
+	children: /* @__PURE__ */ e(t, {
+		"aria-hidden": "true",
+		color: "content.neutral",
+		role: "presentation",
+		size: 24,
+		src: `${n}Outlined`
+	})
+});
+n.displayName = "AIOutcomeCardIcon";
+//#endregion
+export { n as AIOutcomeCardIcon };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.d.ts

@@ -0,0 +1,16 @@
+import { TextProps } from '../../../../../core/components/text/Text.js';
+/** Props for {@link AIOutcomeCardTitle}. */
+export type AIOutcomeCardTitleProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'isTruncated' | 'style'>;
+/**
+ * Names an Outcome Card so people and assistive technology can identify it.
+ *
+ * Renders `children` with the prescribed strong body typography and connects
+ * that text to the parent card through `aria-labelledby`.
+ *
+ * Compose one `AIOutcomeCardTitle` inside `RawAIOutcomeCard` and pass the
+ * outcome name as `children`.
+ * @param props - Text attributes and the title `children`.
+ * @param props.children - The outcome name announced as the card's label.
+ */
+declare const AIOutcomeCardTitle: import('react').ForwardRefExoticComponent<AIOutcomeCardTitleProps & import('react').RefAttributes<HTMLElement>>;
+export { AIOutcomeCardTitle };

package/dist/esm/modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js

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

package/dist/esm/modules/ai-kit/index.d.ts

@@ -13,3 +13,9 @@ export { AIComposerTextArea, type AIComposerTextAreaProps, } from './components/
 export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';
 export { aiKitForm, useAIKitForm } from './hooks/use-ai-kit-form.js';
 export { useAIKitFieldContext, useAIKitFormContext, } from './hooks/ai-kit-form-context.js';
+export { RawAIOutcomeCard, type RawAIOutcomeCardProps, } from './components/ai-outcome-card/RawAIOutcomeCard.js';
+export { AIOutcomeCardIcon, type AIOutcomeCardIconProps, } from './components/ai-outcome-card/parts/AIOutcomeCardIcon.js';
+export { AIOutcomeCardTitle, type AIOutcomeCardTitleProps, } from './components/ai-outcome-card/parts/AIOutcomeCardTitle.js';
+export { AIOutcomeCardDescription, type AIOutcomeCardDescriptionProps, } from './components/ai-outcome-card/parts/AIOutcomeCardDescription.js';
+export { AIOutcomeCardActions, type AIOutcomeCardActionsProps, } from './components/ai-outcome-card/parts/AIOutcomeCardActions.js';
+export { AIOutcomeCardAction, type AIOutcomeCardActionProps, } from './components/ai-outcome-card/parts/AIOutcomeCardAction.js';

package/dist/esm/modules/tanstack-router/components/ai-outcome-card/AIOutcomeCard.d.ts

@@ -0,0 +1,27 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { RawAIOutcomeCardProps } from '../../../ai-kit/components/ai-outcome-card/RawAIOutcomeCard.js';
+type AIOutcomeCardRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawAIOutcomeCardProps, 'asElement' | 'href'> & ValidateLinkOptions<TRouter, TOptions>;
+type AIOutcomeCardButtonProps = Omit<RawAIOutcomeCardProps, 'asElement' | 'href'> & {
+    onPress: NonNullable<RawAIOutcomeCardProps['onPress']>;
+};
+/** Props for the TanStack Router-aware {@link AIOutcomeCard}. */
+export type AIOutcomeCardProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = AIOutcomeCardRouterProps<TRouter, TOptions> | AIOutcomeCardButtonProps;
+/**
+ * Connects an AI Outcome Card to typed TanStack Router navigation.
+ *
+ * Preserves the raw card's visual, accessibility, and button contracts while
+ * adding a route-aware link form.
+ *
+ * Pass `to` and TanStack Router link options to navigate within the registered
+ * router. Omit `to`, set `asElement="button"`, and pass `onPress` when the
+ * card performs an in-place action instead.
+ * @param props - Typed router link options or raw button props.
+ * @param props.to - The typed TanStack Router destination for the link form.
+ * @param props.onPress - Button activation handler when the card is an action.
+ * @see {@link AIOutcomeCardProps} for all available props.
+ */
+declare function AIOutcomeCard<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: AIOutcomeCardProps<TRouter, TOptions>): import('react/jsx-runtime').JSX.Element;
+declare namespace AIOutcomeCard {
+    var displayName: string;
+}
+export { AIOutcomeCard };

package/dist/esm/modules/tanstack-router/components/ai-outcome-card/AIOutcomeCard.js

@@ -0,0 +1,17 @@
+import { RawAIOutcomeCard as e } from "../../../ai-kit/components/ai-outcome-card/RawAIOutcomeCard.js";
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as n } from "@tanstack/react-router";
+//#region src/modules/tanstack-router/components/ai-outcome-card/AIOutcomeCard.tsx
+var r = n(e);
+function i(n) {
+	return "to" in n || "href" in n ? /* @__PURE__ */ t(r, {
+		...n,
+		asElement: "a"
+	}) : /* @__PURE__ */ t(e, {
+		...n,
+		asElement: "button"
+	});
+}
+i.displayName = "AIOutcomeCard";
+//#endregion
+export { i as AIOutcomeCard };

package/dist/esm/modules/tanstack-router/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/list-view/ListView.js';
 export * from './components/list-view/parts/ListViewItem.js';
 export * from './components/menu-item/MenuItem.js';
 export * from './components/navigation-card/NavigationCard.js';
+export * from './components/ai-outcome-card/AIOutcomeCard.js';
 export * from './components/nav-item/NavItem.js';
 export * from './components/pagination/PaginationLink.js';
 export * from './components/pagination/PaginationNext.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.9.4",
+  "version": "3.9.5",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.9.4",
+    "@payfit/unity-illustrations": "3.9.5",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.9.4",
-    "@payfit/unity-themes": "3.9.4",
+    "@payfit/unity-icons": "3.9.5",
+    "@payfit/unity-themes": "3.9.5",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -156,9 +156,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.9.4",
-    "@payfit/unity-illustrations": "3.9.4",
-    "@payfit/unity-themes": "3.9.4",
+    "@payfit/unity-icons": "3.9.5",
+    "@payfit/unity-illustrations": "3.9.5",
+    "@payfit/unity-themes": "3.9.5",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",

package/src/agent-references/component-catalog.json

@@ -49,6 +49,56 @@
       ],
       "title": "AIComposer"
     },
+    {
+      "description": "Presents an AI outcome as a composed card that leads to a destination or triggers a next step.",
+      "docsHref": "?path=/docs/ai-kit-aioutcomecard--docs",
+      "id": "ai-kit-aioutcomecard",
+      "keywords": [
+        "ai",
+        "outcome",
+        "card",
+        "task",
+        "navigation",
+        "action"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "primary",
+        "storyId": "ai-kit-aioutcomecard--primary"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:navigation"
+      ],
+      "title": "AIOutcomeCard"
+    },
+    {
+      "description": "AIOutcomeCard integrates AI Kit outcomes with TanStack Router navigation patterns.",
+      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-aioutcomecard--docs",
+      "id": "library-integrations-reference-tanstack-router-aioutcomecard",
+      "keywords": [
+        "tanstack-router",
+        "ai-outcome-card",
+        "outcome",
+        "card",
+        "router-link"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "basic-navigation",
+        "storyId": "library-integrations-reference-tanstack-router-aioutcomecard--basic-navigation"
+      },
+      "related": [],
+      "section": "integrations",
+      "tags": [
+        "type:integration",
+        "category:navigation",
+        "behavior:navigation"
+      ],
+      "title": "AIOutcomeCard"
+    },
     {
       "description": "Toggles a PayFit AI assistant surface with branded, accessible toggle-button semantics.",
       "docsHref": "?path=/docs/ai-kit-aitriggerbutton--docs",