@payfit/unity-components 3.0.4 → 3.1.0

package/dist/esm/ai-kit.js

@@ -1,3 +1,5 @@
 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";
-export { n as AIButton, e as aiGradientEffect, t as aiGradientSurfaceEffect };
+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";
+export { n as AIButton, i as AITriggerButton, r as PayfitAIBrand, e as aiGradientEffect, t as aiGradientSurfaceEffect };

package/dist/esm/components/pill/Pill.d.ts

@@ -10,6 +10,10 @@ declare const pill: import('tailwind-variants').TVReturnType<{
         circle: "uy:rounded-circle";
         pill: "uy:rounded-pill uy:px-50";
     };
+    isDot: {
+        true: "uy:!size-100 uy:!min-w-0";
+        false: "";
+    };
     isVisible: {
         true: "uy:visible";
         false: "uy:invisible";
@@ -24,6 +28,10 @@ declare const pill: import('tailwind-variants').TVReturnType<{
         circle: "uy:rounded-circle";
         pill: "uy:rounded-pill uy:px-50";
     };
+    isDot: {
+        true: "uy:!size-100 uy:!min-w-0";
+        false: "";
+    };
     isVisible: {
         true: "uy:visible";
         false: "uy:invisible";
@@ -38,13 +46,20 @@ declare const pill: import('tailwind-variants').TVReturnType<{
         circle: "uy:rounded-circle";
         pill: "uy:rounded-pill uy:px-50";
     };
+    isDot: {
+        true: "uy:!size-100 uy:!min-w-0";
+        false: "";
+    };
     isVisible: {
         true: "uy:visible";
         false: "uy:invisible";
     };
 }, undefined>>;
 export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
-    /** The value to be displayed inside the Pill */
+    /**
+     * The notification value. Its absolute value is displayed; use `0` to
+     * render an accessible dot without visible text.
+     */
     value: number;
     /**
      * The variant of the Pill, determining its color scheme
@@ -66,7 +81,10 @@ export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<Aria
  * The Pill component displays a count of notifications or other numerical values.
  */
 declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
-    /** The value to be displayed inside the Pill */
+    /**
+     * The notification value. Its absolute value is displayed; use `0` to
+     * render an accessible dot without visible text.
+     */
     value: number;
     /**
      * The variant of the Pill, determining its color scheme

package/dist/esm/components/pill/Pill.js

@@ -14,6 +14,10 @@ var r = t({
 			circle: "uy:rounded-circle",
 			pill: "uy:rounded-pill uy:px-50"
 		},
+		isDot: {
+			true: "uy:!size-100 uy:!min-w-0",
+			false: ""
+		},
 		isVisible: {
 			true: "uy:visible",
 			false: "uy:invisible"
@@ -22,25 +26,27 @@ var r = t({
 	defaultVariants: {
 		variant: "critical",
 		shape: "pill",
+		isDot: !1,
 		isVisible: !0
 	}
 }), i = (e, t) => {
 	let n = 10 ** t - 1;
 	return e > n ? `${n}+` : e.toString();
 }, a = e(({ variant: e = "critical", isVisible: t = !0, maxDigits: a = 2, value: o, ...s }, c) => {
-	let l = i(Math.abs(o), a), u = r({
+	let l = Math.abs(o), u = l === 0 ? "" : i(l, a), d = r({
 		variant: e,
 		isVisible: t,
-		shape: l.length === 1 ? "circle" : "pill"
+		shape: u.length <= 1 ? "circle" : "pill",
+		isDot: l === 0
 	});
 	return /* @__PURE__ */ n("span", {
 		"data-dd-privacy": "allow",
 		...s,
 		ref: c,
 		role: "status",
-		className: u,
+		className: d,
 		"aria-atomic": "true",
-		children: l
+		children: u
 	});
 });
 a.displayName = "Pill";

package/dist/esm/modules/ai-kit/components/ai-button/AIButton.d.ts

@@ -9,81 +9,80 @@ import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
  */
 export declare const aiButton: import('tailwind-variants').TVReturnType<{
     variant: {
-        outlined: string[];
-        ghost: string[];
+        outlined: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
     };
     isDisabled: {
-        true: string[];
-    };
-}, undefined, string[], {
-    isDisabled: {
-        true: "uy:disabled:cursor-not-allowed";
-        false: "";
+        true: {
+            base: string[];
+            aiSurface: string;
+        };
     };
     isLoading: {
-        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
-        false: "";
-    };
-    size: {
-        default: "uy:w-auto uy:grow-0 uy:basis-auto";
-        full: "uy:grow-1 uy:w-full uy:basis-full";
-    };
-    mode: {
-        default: string[];
-        compact: string[];
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: "uy:disabled:cursor-not-allowed";
-        false: "";
-    };
-    isLoading: {
-        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
-        false: "";
-    };
-    size: {
-        default: "uy:w-auto uy:grow-0 uy:basis-auto";
-        full: "uy:grow-1 uy:w-full uy:basis-full";
-    };
-    mode: {
-        default: string[];
-        compact: string[];
+        true: {
+            aiSurface: string;
+        };
+    };
+}, {
+    base: string[];
+    aiSurface: string[];
+    content: string[];
+    label: string[];
+}, undefined, {
+    variant: {
+        outlined: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
     };
-}, undefined, string[], {
     isDisabled: {
-        true: "uy:disabled:cursor-not-allowed";
-        false: "";
+        true: {
+            base: string[];
+            aiSurface: string;
+        };
     };
     isLoading: {
-        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
-        false: "";
-    };
-    size: {
-        default: "uy:w-auto uy:grow-0 uy:basis-auto";
-        full: "uy:grow-1 uy:w-full uy:basis-full";
-    };
-    mode: {
-        default: string[];
-        compact: string[];
+        true: {
+            aiSurface: string;
+        };
+    };
+}, {
+    base: string[];
+    aiSurface: string[];
+    content: string[];
+    label: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    variant: {
+        outlined: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
     };
-}, undefined, import('tailwind-variants').TVReturnTypeLike<{
     isDisabled: {
-        true: "uy:disabled:cursor-not-allowed";
-        false: "";
+        true: {
+            base: string[];
+            aiSurface: string;
+        };
     };
     isLoading: {
-        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
-        false: "";
-    };
-    size: {
-        default: "uy:w-auto uy:grow-0 uy:basis-auto";
-        full: "uy:grow-1 uy:w-full uy:basis-full";
-    };
-    mode: {
-        default: string[];
-        compact: string[];
-    };
-}, undefined>>>;
+        true: {
+            aiSurface: string;
+        };
+    };
+}, {
+    base: string[];
+    aiSurface: string[];
+    content: string[];
+    label: string[];
+}>>;
 /**
  * Configures an AI-assisted action and inherits standard React Aria button
  * behavior such as `onPress`, `isDisabled`, and `type`.
@@ -155,7 +154,7 @@ export type AIButtonProps = PropsWithChildren<Omit<AriaButtonProps, 'children' |
  * - `AIButton` renders a native button through React Aria. It supports pointer,
  * Enter, and Space activation. Prefix and suffix icons are decorative; use
  * the text label to provide the accessible name.
- * - `AIButton` applies a glowing, rotating gradient effect on hover and focus.
+ * - `AIButton` applies a rotating gradient effect on hover and focus.
  * For users with reduced motion activated, the rotation is disabled.
  */
 export declare const AIButton: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "children" | "className" | "style"> & {

package/dist/esm/modules/ai-kit/components/ai-button/AIButton.js

@@ -3,157 +3,179 @@ import { Spinner as t } from "../../../../components/spinner/Spinner.js";
 import { buttonBase as n } from "../../../../components/button/Button.variants.js";
 import { aiGradientEffect as r, aiGradientSurfaceEffect as i } from "../../utils/ai-gradient-effect.js";
 import { forwardRef as a, useMemo as o } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useIntl as u } from "react-intl";
-import { Button as d } from "react-aria-components/Button";
+import { uyMerge as s, uyTv as c } from "@payfit/unity-themes";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useIntl as d } from "react-intl";
+import { Button as f } from "react-aria-components/Button";
 //#region src/modules/ai-kit/components/ai-button/AIButton.tsx
-var f = s({
-	extend: n,
-	base: ["uy:relative uy:isolate uy:border-2 uy:border-transparent", "uy:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-75)] uy:sm:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-50)]"],
+var p = c({
+	slots: {
+		base: [
+			"uy:relative",
+			"uy:isolate",
+			"uy:[--uy-ai-gradient-border-width:1px]"
+		],
+		aiSurface: [i()],
+		content: [
+			"uy:relative",
+			"uy:z-20",
+			"uy:inline-flex",
+			"uy:items-center",
+			"uy:gap-50"
+		],
+		label: [
+			"uy:truncate",
+			"uy:min-w-0",
+			"uy:w-(--uy-button-label-truncation-length)"
+		]
+	},
 	variants: {
 		variant: {
-			outlined: [
+			outlined: { base: [
 				"uy:text-content-neutral-enabled",
+				"uy:enabled:data-[hovered=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+				"uy:enabled:hover:[--uy-ai-gradient-border-width:2px]",
+				"uy:enabled:focus-visible:[--uy-ai-gradient-border-width:2px]",
 				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-hover",
 				"uy:enabled:active:text-content-neutral-active",
 				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
 				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus"
-			],
-			ghost: [
-				"uy:bg-transparent uy:text-content-neutral-enabled",
+			] },
+			ghost: { base: [
+				"uy:bg-transparent",
+				"uy:text-content-neutral-enabled",
 				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:enabled:data-[hovered=\"true\"]:[--uy-ai-gradient-border-width:2px]",
 				"uy:enabled:active:text-content-neutral-active",
 				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
-				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus"
-			]
-		},
-		isDisabled: { true: [
-			"uy:disabled:text-content-neutral-disabled",
-			"uy:disabled:bg-transparent",
-			"uy:data-[loading]:text-content-neutral-disabled",
-			"uy:data-[loading]:bg-transparent"
-		] }
-	},
-	compoundVariants: [
-		{
-			isDisabled: !1,
-			variant: "outlined",
-			className: r({ variant: "outlined" })
-		},
-		{
-			isDisabled: !1,
-			variant: "ghost",
-			className: r({ variant: "ghost" })
+				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]"
+			] }
 		},
-		{
-			isDisabled: !0,
-			variant: "outlined",
-			className: "uy:disabled:border-1 uy:disabled:border-border-neutral-high-disabled uy:data-[loading]:border-1 uy:data-[loading]:border-border-neutral-high-disabled"
-		},
-		{
-			isDisabled: !0,
-			variant: "ghost",
-			className: "uy:disabled:bg-surface-neutral-disabled uy:data-[loading]:bg-surface-neutral-disabled"
-		}
-	],
-	defaultVariants: { variant: "outlined" }
-}), p = s({
-	base: ["uy:pointer-events-none uy:absolute uy:-inset-px uy:z-10 uy:rounded-[var(--uy-ai-gradient-effect-surface-radius)]", "uy:group-data-[hovered=\"true\"]:inset-0 uy:group-active:inset-0 uy:group-data-[pressed=\"true\"]:inset-0 uy:group-data-[focus-visible=\"true\"]:inset-0"],
-	variants: {
-		variant: {
-			outlined: "uy:bg-surface-neutral",
-			ghost: "uy:bg-transparent uy:group-data-[focus-visible=\"true\"]:bg-surface-neutral"
-		},
-		isDisabled: {
-			true: "",
-			false: ""
-		}
+		isDisabled: { true: {
+			base: ["uy:disabled:text-content-neutral-disabled", "uy:data-[loading]:text-content-neutral-disabled"],
+			aiSurface: "uy:hidden"
+		} },
+		isLoading: { true: { aiSurface: "uy:hidden" } }
 	},
 	compoundVariants: [
 		{
 			isDisabled: !1,
 			variant: "outlined",
-			className: i()
+			className: { base: r({
+				gradient: "linear",
+				variant: "outlined",
+				glow: !1
+			}) }
 		},
 		{
 			isDisabled: !1,
 			variant: "ghost",
-			className: i()
+			className: { base: r({
+				gradient: "linear",
+				variant: "ghost",
+				glow: !1
+			}) }
 		},
 		{
 			isDisabled: !0,
 			variant: "outlined",
-			className: "uy:inset-0 uy:bg-surface-neutral-disabled"
+			className: { base: [
+				"uy:text-content-neutral-disabled",
+				"uy:disabled:border-1",
+				"uy:disabled:border-border-neutral-high-disabled",
+				"uy:data-[loading]:border-1",
+				"uy:data-[loading]:border-border-neutral-high-disabled",
+				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-disabled",
+				"uy:enabled:active:text-content-neutral-disabled",
+				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-disabled",
+				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-disabled"
+			] }
 		},
 		{
 			isDisabled: !0,
 			variant: "ghost",
-			className: "uy:bg-surface-neutral-disabled"
+			className: { base: [
+				"uy:bg-surface-neutral-low-disabled",
+				"uy:text-content-neutral-disabled",
+				"uy:enabled:data-[hovered=\"true\"]:bg-surface-neutral-low-disabled",
+				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-disabled",
+				"uy:enabled:active:bg-surface-neutral-low-disabled",
+				"uy:enabled:active:text-content-neutral-disabled",
+				"uy:enabled:data-[pressed=\"true\"]:bg-surface-neutral-low-disabled",
+				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-disabled",
+				"uy:enabled:data-[focus-visible=\"true\"]:bg-surface-neutral-low-disabled",
+				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-disabled"
+			] }
 		}
 	],
 	defaultVariants: {
+		variant: "outlined",
 		isDisabled: !1,
-		variant: "outlined"
+		isLoading: !1
 	}
-}), m = (n, r, i) => n ? /* @__PURE__ */ c(t, {
+}), m = (n, r, i) => n ? /* @__PURE__ */ l(t, {
 	size: "small",
 	color: "inherit",
 	label: r
-}) : i ? /* @__PURE__ */ c(e, {
+}) : i ? /* @__PURE__ */ l(e, {
 	"aria-hidden": "true",
 	color: "inherit",
 	"data-unity-icon": "prefix",
 	role: "presentation",
 	size: 20,
 	src: i
-}) : null, h = a(({ children: t, isDisabled: n = !1, isLoading: r = !1, loadingLabel: i, mode: a, prefixIcon: s, suffixIcon: h, truncateLabelLength: g, variant: _, ...v }, y) => {
-	let b = u(), x = n || r, S = (i?.trim() ? i : void 0) ?? b.formatMessage({
+}) : null, h = a(({ children: t, isDisabled: r = !1, isLoading: i = !1, loadingLabel: a, mode: c, prefixIcon: h, suffixIcon: g, truncateLabelLength: _, variant: v, ...y }, b) => {
+	let x = d(), S = r || i, C = (a?.trim() ? a : void 0) ?? x.formatMessage({
 		id: "unity:component:common:loading:label",
 		defaultMessage: "Loading..."
-	}), C = o(() => f({
-		isDisabled: x,
-		isLoading: r,
-		mode: a === "compact" ? "compact" : "default",
-		size: "default",
-		variant: _
+	}), w = o(() => n({
+		isDisabled: S,
+		isLoading: i,
+		mode: c === "compact" ? "compact" : "default",
+		size: "default"
+	}), [
+		S,
+		i,
+		c
+	]), T = o(() => p({
+		isDisabled: S,
+		isLoading: i,
+		variant: v
 	}), [
-		x,
-		r,
-		a,
-		_
+		S,
+		i,
+		v
 	]);
-	return /* @__PURE__ */ l(d, {
-		...v,
-		ref: y,
+	return /* @__PURE__ */ u(f, {
+		...y,
+		ref: b,
 		"data-dd-privacy": "allow",
-		"data-loading": r || void 0,
-		isDisabled: n,
-		isPending: r,
-		className: C,
-		children: [/* @__PURE__ */ c("span", {
+		"data-loading": i || void 0,
+		isDisabled: r,
+		isPending: i,
+		className: s(w, T.base()),
+		children: [/* @__PURE__ */ l("span", {
 			"aria-hidden": "true",
-			className: p({
-				isDisabled: x,
-				variant: _
-			}),
-			"data-unity-slot": "surface"
-		}), /* @__PURE__ */ l("span", {
-			className: "uy:relative uy:z-20 uy:inline-flex uy:gap-50 uy:items-center",
+			className: T.aiSurface(),
+			"data-unity-slot": "ai.surface"
+		}), /* @__PURE__ */ u("span", {
+			className: T.content(),
 			children: [
-				m(r, S, s),
-				g && g > 0 ? /* @__PURE__ */ c("span", {
-					style: { "--uy-button-label-truncation-length": `${g}ch` },
-					className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+				m(i, C, h),
+				_ && _ > 0 ? /* @__PURE__ */ l("span", {
+					style: { "--uy-button-label-truncation-length": `${_}ch` },
+					className: T.label(),
 					children: t
 				}) : t,
-				h && /* @__PURE__ */ c(e, {
+				g && /* @__PURE__ */ l(e, {
 					"aria-hidden": "true",
 					color: "inherit",
 					"data-unity-icon": "suffix",
 					role: "presentation",
 					size: 20,
-					src: h
+					src: g
 				})
 			]
 		})]
@@ -161,4 +183,4 @@ var f = s({
 });
 h.displayName = "AIButton";
 //#endregion
-export { h as AIButton, f as aiButton };
+export { h as AIButton, p as aiButton };

package/dist/esm/modules/ai-kit/components/ai-trigger-button/AITriggerButton.d.ts

@@ -0,0 +1,124 @@
+import { ReactElement, ReactNode } from 'react';
+import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components/ToggleButton';
+export type AITriggerButtonBrandSlotProps = {
+    /** Resolved brand appearance for the trigger's enabled or disabled state. */
+    appearance: 'color' | 'grayscale';
+    /** Resolved brand size for the trigger density. */
+    size: number;
+    /** Applies the trigger-owned brand hover motion. */
+    className: string;
+    /** Keeps the brand decorative because the button label names the control. */
+    'aria-hidden': true;
+};
+export type AITriggerButtonProps = Omit<AriaToggleButtonProps, 'aria-expanded' | 'children' | 'className' | 'isPending'> & {
+    /**
+     * Provides the visible and accessible name for the AI assistant surface.
+     * The label remains available to assistive technology when `iconOnly` is
+     * true.
+     */
+    children: ReactNode;
+    /**
+     * Renders only the brand mark and exposes `children` in a tooltip.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Selects the button density.
+     * @default 'default'
+     */
+    mode?: 'default' | 'compact';
+    /**
+     * Prevents selection changes and applies the disabled brand treatment while
+     * the assistant surface is loading.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Renders the PayFit AI brand inside a consumer-owned composition, such as
+     * an `Anchor` with a notification `Pill`. Forward every supplied property
+     * to `PayfitAIBrand` to retain the trigger's state treatment and motion.
+     */
+    brandSlot?: (props: AITriggerButtonBrandSlotProps) => ReactElement;
+};
+/**
+ * Toggles a PayFit AI assistant surface from a compact, recognizable entry
+ * point.
+ * Use `AITriggerButton` with `aria-controls` to associate the trigger with
+ * the panel it reveals. Control it with `isSelected` and `onChange`, or pass
+ * `defaultSelected` for uncontrolled selection. Set `iconOnly` when space is
+ * limited; the label stays available as the button's accessible name and is
+ * shown in a tooltip.
+ * @param props - React Aria toggle-button props and AI trigger appearance
+ * options.
+ * @param props.children - The visible label and accessible name for the AI
+ * assistant surface. The component keeps this label available to assistive
+ * technology when `iconOnly` is `true`.
+ * @param props.iconOnly - Renders only the PayFit AI brand mark and shows the
+ * label in a tooltip. Defaults to `false`.
+ * @param props.mode - Selects the trigger density: `default` uses a 24px brand
+ * mark and `compact` uses a 20px mark. Defaults to `default`.
+ * @param props.isLoading - Disables the trigger and applies its loading brand
+ * treatment while the assistant surface loads. Defaults to `false`.
+ * @param props.brandSlot - Renders a consumer-owned brand composition instead
+ * of `PayfitAIBrand`. It receives `appearance`, `size`, `className`, and
+ * `aria-hidden`; forward every property to the rendered brand to preserve the
+ * trigger's visual state and motion.
+ * @param props.defaultSelected - Sets the initial selected state for an
+ * uncontrolled trigger.
+ * @param props.isSelected - Controls the selected state. Pass this with
+ * `onChange` for a controlled trigger.
+ * @param props.onChange - Receives the next selected state after the user
+ * toggles the trigger.
+ * @param props.isDisabled - Prevents the user from toggling the trigger.
+ * @param props.aria-controls - Identifies the assistant panel that this
+ * trigger reveals.
+ * @see {@link AITriggerButtonProps} for the AI-specific props.
+ * @example
+ * ```tsx
+ * import { AITriggerButton } from '@payfit/unity-components/ai-kit'
+ *
+ * export function AssistantTrigger() {
+ *   return (
+ *     <AITriggerButton aria-controls="assistant-panel">
+ *       Payfit AI
+ *     </AITriggerButton>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component renders a native button with React Aria toggle-button
+ *   semantics.
+ * - Activate the trigger with Enter or Space.
+ * - The trigger exposes `aria-pressed` and mirrors its selected state through
+ *   `aria-expanded` for the associated disclosure.
+ */
+export declare const AITriggerButton: import('react').ForwardRefExoticComponent<Omit<AriaToggleButtonProps, "children" | "aria-expanded" | "className" | "isPending"> & {
+    /**
+     * Provides the visible and accessible name for the AI assistant surface.
+     * The label remains available to assistive technology when `iconOnly` is
+     * true.
+     */
+    children: ReactNode;
+    /**
+     * Renders only the brand mark and exposes `children` in a tooltip.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Selects the button density.
+     * @default 'default'
+     */
+    mode?: "default" | "compact";
+    /**
+     * Prevents selection changes and applies the disabled brand treatment while
+     * the assistant surface is loading.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Renders the PayFit AI brand inside a consumer-owned composition, such as
+     * an `Anchor` with a notification `Pill`. Forward every supplied property
+     * to `PayfitAIBrand` to retain the trigger's state treatment and motion.
+     */
+    brandSlot?: (props: AITriggerButtonBrandSlotProps) => ReactElement;
+} & import('react').RefAttributes<HTMLButtonElement>>;