@payfit/unity-components 3.2.2 → 3.2.4

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAttachment.js

@@ -1,16 +1,17 @@
 import { CircularIconButton as e } from "../../../../../core/components/icon-button/CircularIconButton.js";
 import { Text as t } from "../../../../../core/components/text/Text.js";
-import { forwardRef as n } from "react";
-import { uyMerge as r, uyTv as i } from "@payfit/unity-themes";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useIntl as s } from "react-intl";
-import { Icon as c } from "@payfit/unity-icons";
-import { Tag as l } from "react-aria-components/TagGroup";
+import { useAIComposerContext as n } from "../AIComposer.context.js";
+import { forwardRef as r } from "react";
+import { uyMerge as i, uyTv as a } from "@payfit/unity-themes";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useIntl as c } from "react-intl";
+import { Icon as l } from "@payfit/unity-icons";
+import { Tag as u } from "react-aria-components/TagGroup";
 //#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAttachment.tsx
-var u = i({
+var d = a({
 	base: [
 		"uy:group",
-		"uy:inline-flex uy:min-w-0 uy:items-center uy:justify-center uy:gap-25",
+		"uy:inline-flex uy:shrink-0 uy:items-center uy:justify-center uy:gap-25",
 		"uy:rounded-pill uy:bg-surface-neutral-lowest-enabled uy:pl-75 uy:pr-25 uy:text-content-neutral-enabled",
 		"uy:enabled:hover:bg-surface-neutral-lowest-hover uy:enabled:hover:text-content-neutral-hover",
 		"uy:enabled:active:bg-surface-neutral-lowest-active uy:enabled:active:text-content-neutral-active",
@@ -25,36 +26,37 @@ var u = i({
 		label: "uy:min-w-0 uy:flex-1 uy:truncate",
 		removeButton: "uy:data-[disabled=\"true\"]:bg-surface-neutral-lowest-disabled"
 	}
-}), d = n(({ children: n, icon: i, isDisabled: d, maxCharactersTruncation: f = 12, className: p, ...m }, h) => {
-	let g = s(), _ = u();
-	return /* @__PURE__ */ o(l, {
-		ref: h,
-		...m,
-		isDisabled: d,
-		className: r(_.base(), p),
+}), f = r(({ children: r, icon: a, isDisabled: f, maxCharactersTruncation: p = 12, className: m, ...h }, g) => {
+	let _ = c(), v = n().state, y = f || v === "disabled" || v === "loading", b = h.textValue ?? (typeof r == "string" ? r : void 0), x = d();
+	return /* @__PURE__ */ s(u, {
+		ref: g,
+		...h,
+		isDisabled: y,
+		textValue: b,
+		className: i(x.base(), m),
 		children: [
-			/* @__PURE__ */ a(c, {
-				src: i,
+			/* @__PURE__ */ o(l, {
+				src: a,
 				size: 20,
-				color: d ? "content.neutral.lowest.disabled" : "content.neutral.lowest",
+				color: y ? "content.neutral.lowest.disabled" : "content.neutral.lowest",
 				role: "presentation",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ a(t, {
+			/* @__PURE__ */ o(t, {
 				asElement: "span",
-				className: _.label(),
+				className: x.label(),
 				isTruncated: !0,
-				maxWidthCh: f,
+				maxWidthCh: p,
 				variant: "bodySmallStrong",
-				children: n
+				children: r
 			}),
-			/* @__PURE__ */ a(e, {
-				className: _.removeButton(),
-				isDisabled: d,
+			/* @__PURE__ */ o(e, {
+				className: x.removeButton(),
+				isDisabled: y,
 				asElement: "button",
 				icon: "CloseOutlined",
 				slot: "remove",
-				title: g.formatMessage({
+				title: _.formatMessage({
 					id: "unity:module:ai-kit:composer:attachment:remove",
 					defaultMessage: "Remove Attachment"
 				})
@@ -62,6 +64,6 @@ var u = i({
 		]
 	});
 });
-d.displayName = "AIComposerAttachment";
+f.displayName = "AIComposerAttachment";
 //#endregion
-export { d as AIComposerAttachment };
+export { f as AIComposerAttachment };

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.d.ts

@@ -1,5 +1,18 @@
 import { ReactElement, RefAttributes } from 'react';
 import { TagGroupProps, TagListProps } from 'react-aria-components/TagGroup';
 type AIComposerAttachmentsGroupProps<T> = Omit<TagGroupProps, 'children' | 'className' | 'style'> & Omit<TagListProps<T>, 'className' | 'style'>;
+/**
+ * Keeps prompt context scannable when a person adds one or many attachments.
+ *
+ * Render static `AIComposerAttachment` children or provide `items` and a
+ * render function for a dynamic collection. Pass `onRemove` to update the
+ * source collection after a person removes an attachment.
+ * @param props - React Aria tag-group and tag-list properties.
+ * @see {@link AIComposerAttachmentsGroupProps} for all available props.
+ * @remarks
+ * The group provides tag-list semantics, a default `Attachments` label, and a
+ * horizontally scrollable list. Supply `aria-label` when `Attachments` is too
+ * generic in the surrounding conversation.
+ */
 export declare const AIComposerAttachmentsGroup: <T>(props: AIComposerAttachmentsGroupProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
 export type { AIComposerAttachmentsGroupProps };

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js

@@ -4,22 +4,34 @@ import { jsx as n } from "react/jsx-runtime";
 import { useIntl as r } from "react-intl";
 import { TagGroup as i, TagList as a } from "react-aria-components/TagGroup";
 //#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.tsx
-var o = t({ slots: { base: ["uy:flex uy:flex-wrap uy:items-start uy:gap-50"] } }), s = e(({ children: e, items: t, onRemove: s, renderEmptyState: c, "aria-label": l, ...u }, d) => {
-	let f = r(), { base: p } = o();
+var o = t({ slots: {
+	clip: "uy:w-full uy:min-w-0 uy:overflow-hidden uy:[contain:paint]",
+	base: [
+		"uy:flex uy:w-full uy:min-w-0 uy:flex-nowrap uy:items-start uy:gap-50 uy:mb-125 uy:p-50",
+		"uy:overflow-x-auto uy:overflow-y-hidden uy:scrollbar-thin",
+		"uy:scrollbar:h-1 uy:scrollbar-thumb:rounded-pill uy:scrollbar-thumb:bg-surface-neutral-low"
+	]
+} }), s = e(({ children: e, items: t, onRemove: s, renderEmptyState: c, "aria-label": l, ...u }, d) => {
+	let f = r(), { base: p, clip: m } = o();
 	return /* @__PURE__ */ n(i, {
 		ref: d,
 		...u,
+		className: "uy:w-full uy:min-w-0",
 		selectionMode: "none",
 		onRemove: s,
 		"aria-label": l ?? f.formatMessage({
 			id: "unity:module:ai-kit:composer:attachment-group",
 			defaultMessage: "Attachments"
 		}),
-		children: /* @__PURE__ */ n(a, {
-			items: t,
-			renderEmptyState: c,
-			className: p(),
-			children: e
+		children: /* @__PURE__ */ n("div", {
+			className: m(),
+			children: /* @__PURE__ */ n(a, {
+				"data-unity-slot": "attachments",
+				items: t,
+				renderEmptyState: c,
+				className: p(),
+				children: e
+			})
 		})
 	});
 });

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.d.ts

@@ -0,0 +1,36 @@
+import { PressEvent } from 'react-aria-components';
+import { AIComposerActionProps } from './AIComposerAction.js';
+export interface AIComposerSubmitActionProps extends Omit<AIComposerActionProps, 'icon' | 'className' | 'style'> {
+    /** Names the send action while the Composer is ready for a prompt. */
+    sendAriaLabel?: string;
+    /** Names the pending action while the Composer uses `state="loading"`. */
+    loadingAriaLabel?: string;
+    /** Names the stop action while the Composer uses `state="streaming"`. */
+    stopAriaLabel?: string;
+    /** Overrides default form submission outside the `streaming` state. */
+    onPress?: (event: PressEvent) => void;
+}
+/**
+ * Gives people a consistently named primary action for sending a prompt or
+ * stopping an AI response.
+ *
+ * Render it in the `right` region of `AIComposerActions`. Without `onPress`,
+ * it submits the parent Composer form; during `state="streaming"`, it calls
+ * the parent `onStop` callback instead. Pass `sendAriaLabel`,
+ * `loadingAriaLabel`, or `stopAriaLabel` when the default
+ * state-specific names are not suitable.
+ * @param props - Accessible action props and optional custom press behavior.
+ * @param props.sendAriaLabel - Names the ready-to-send action. Defaults to
+ * `Send message`.
+ * @param props.loadingAriaLabel - Names the loading action. Defaults to
+ * `Sending message`.
+ * @param props.stopAriaLabel - Names the streaming stop action. Defaults to
+ * `Stop generating`.
+ * @param props.onPress - Replaces default form submission outside streaming.
+ * @see {@link AIComposerSubmitActionProps} for all available props.
+ * @remarks
+ * The action is disabled during `loading` and inherits `disabled` from the
+ * parent Composer. It remains a stop control during `streaming` even when an
+ * `onPress` callback is supplied.
+ */
+export declare const AIComposerSubmitAction: import('react').ForwardRefExoticComponent<AIComposerSubmitActionProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.js

@@ -0,0 +1,56 @@
+import { CircularIconButton as e } from "../../../../../core/components/icon-button/CircularIconButton.js";
+import { useAIComposerContext as t } from "../AIComposer.context.js";
+import { getActionTitle as n } from "./AIComposerAction.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.tsx
+var s = i({ base: [
+	"uy:text-content-neutral-enabled uy:bg-surface-neutral-low-enabled",
+	"uy:data-[hovered=\"true\"]:text-content-neutral-hovered uy:data-[hovered=\"true\"]:bg-surface-neutral-low-hovered",
+	"uy:active:text-content-inverted-enabled uy:active:bg-surface-inverted",
+	"uy:data-[active=\"true\"]:text-content-inverted-enabled uy:data-[active=\"true\"]:bg-surface-inverted",
+	"uy:data-[pressed=\"true\"]:text-content-neutral-enabled uy:data-[pressed=\"true\"]:bg-surface-neutral-low-pressed",
+	"uy:data-[focus-visible=\"true\"]:text-content-neutral-enabled uy:data-[focus-visible=\"true\"]:bg-surface-neutral-low-focus",
+	"uy:data-[disabled=\"true\"]:text-content-neutral-disabled uy:data-[disabled=\"true\"]:bg-surface-neutral-low-disabled",
+	"uy:data-[pending=\"true\"]:bg-transparent"
+] }), c = r(({ title: r, "aria-label": i, isDisabled: c, loadingAriaLabel: l, onPress: u, sendAriaLabel: d, stopAriaLabel: f, ...p }, m) => {
+	let h = o(), { state: g, hasValue: _, onStop: v, requestSubmit: y } = t(), b = h.formatMessage({
+		id: "unity:module:ai-kit:composer:submit-action:send",
+		defaultMessage: "Send message"
+	}), x = h.formatMessage({
+		id: "unity:module:ai-kit:composer:submit-action:loading",
+		defaultMessage: "Sending message"
+	}), S = h.formatMessage({
+		id: "unity:module:ai-kit:composer:submit-action:stop",
+		defaultMessage: "Stop generating"
+	}), C = g === "streaming" ? f ?? S : g === "loading" ? l ?? x : i ?? d ?? b, w = n(r, C, b), T = s();
+	return /* @__PURE__ */ a(e, {
+		...p,
+		ref: m,
+		asElement: "button",
+		type: "button",
+		icon: "ArrowUpOutlined",
+		title: w,
+		"aria-label": C,
+		isDisabled: c || g === "disabled",
+		className: T,
+		isLoading: g === "loading",
+		"data-active": _,
+		onPress: (e) => {
+			if (g === "streaming") {
+				v?.();
+				return;
+			}
+			if (u) {
+				u(e);
+				return;
+			}
+			y();
+		}
+	});
+});
+c.displayName = "AIComposerSubmitAction";
+//#endregion
+export { c as AIComposerSubmitAction };

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.d.ts

@@ -0,0 +1,20 @@
+import { TextAreaProps } from 'react-aria-components/TextArea';
+/** Props for the prompt field rendered by {@link AIComposerTextArea}. */
+export type AIComposerTextAreaProps = Omit<TextAreaProps, 'disabled'>;
+/**
+ * Lets people write a multi-line AI request while the Composer keeps prompt
+ * readiness, sizing, and overflow feedback in sync.
+ *
+ * Pass an accessible name with `aria-label` or `aria-labelledby`; use standard
+ * React Aria `value`, `defaultValue`, and `onChange` props to manage the
+ * prompt. In `enterKeyBehavior="submit"`, Enter sends a non-empty prompt and
+ * Shift+Enter adds a new line.
+ * @param props - React Aria textarea props, including the accessible name and
+ * prompt value.
+ * @see {@link AIComposerTextAreaProps} for all available props.
+ * @remarks
+ * The field disables itself when the parent Composer uses `state="disabled"`.
+ * A decorative fade indicates additional text below the visible scroll area
+ * and remains hidden from assistive technology.
+ */
+export declare const AIComposerTextArea: import('react').ForwardRefExoticComponent<AIComposerTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js

@@ -0,0 +1,82 @@
+import { useAIComposerContext as e } from "../AIComposer.context.js";
+import { forwardRef as t, useCallback as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useResizeObserver as l } from "usehooks-ts";
+import { TextArea as u } from "react-aria-components/TextArea";
+//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.tsx
+var d = o({ slots: {
+	wrapper: "uy:relative uy:group/textarea uy:flex uy:min-h-0 uy:flex-1",
+	base: [
+		"uy:field-sizing-content uy:min-h-10 uy:max-h-[240px] uy:flex-1 uy:resize-none uy:overflow-y-auto uy:p-0",
+		"uy:typography-body uy:text-content-neutral uy:placeholder:text-content-neutral-lowest",
+		"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled",
+		"uy:disabled:placeholder:text-content-neutral-low-disabled",
+		"uy:outline-none"
+	],
+	fade: [
+		"uy:pointer-events-none uy:absolute uy:inset-x-0 uy:bottom-0 uy:h-300",
+		"uy:bg-gradient-to-t uy:from-surface-neutral uy:to-transparent",
+		"uy:opacity-0 uy:group-data-[scrollable-down=true]/textarea:opacity-100"
+	]
+} }), f = t((t, o) => {
+	let { enterKeyBehavior: f, hasValue: p, requestSubmit: m, setHasValue: h, state: g } = e(), _ = i(null), [v, y] = a(!1), { base: b, fade: x, wrapper: S } = d(), { onChange: C, onKeyDown: w, onScroll: T, value: E, ...D } = t, O = n((e) => {
+		h(!!e?.value.trim());
+	}, [h]), k = n((e) => {
+		let t = e ?? _.current;
+		t && y(t.scrollTop < t.scrollHeight - t.clientHeight - 1);
+	}, []), A = n((e) => {
+		requestAnimationFrame(() => {
+			k(e);
+		});
+	}, [k]);
+	r(() => {
+		O(_.current ?? void 0), A();
+	}, [
+		A,
+		O,
+		E
+	]), l({
+		ref: _,
+		onResize: () => {
+			A();
+		}
+	});
+	let j = n((e) => {
+		_.current = e, typeof o == "function" ? o(e) : o && (o.current = e), O(e ?? void 0), e && A(e);
+	}, [
+		o,
+		A,
+		O
+	]), M = (e) => {
+		O(e.target), C?.(e), A(e.target);
+	}, N = (e) => {
+		k(e.currentTarget), T?.(e);
+	}, P = (e) => {
+		w?.(e);
+		let t = e.key === "Enter" && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey;
+		e.defaultPrevented || !t || e.nativeEvent.isComposing || f !== "submit" || !p || g !== "enabled" || (e.preventDefault(), m());
+	};
+	return /* @__PURE__ */ c("div", {
+		className: S(),
+		"data-scrollable-down": v || void 0,
+		"data-unity-slot": "ai.composer.textarea-wrapper",
+		children: [/* @__PURE__ */ s(u, {
+			...D,
+			value: E,
+			ref: j,
+			disabled: g === "disabled",
+			className: b(),
+			"data-unity-slot": "ai.composer.textarea",
+			onChange: M,
+			onKeyDown: P,
+			onScroll: N
+		}), /* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			className: x()
+		})]
+	});
+});
+f.displayName = "AIComposerTextArea";
+//#endregion
+export { f as AIComposerTextArea };

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

@@ -9,19 +9,7 @@ import { ToggleButton as d } from "react-aria-components/ToggleButton";
 //#region src/modules/ai-kit/components/ai-trigger-button/AITriggerButton.tsx
 var f = c({
 	extend: e,
-	base: [
-		"uy:relative uy:isolate uy:[--uy-ai-gradient-border-width:2px]",
-		"uy:max-w-full",
-		"uy:text-content-neutral-enabled",
-		"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",
-		"uy:data-[pressed=\"true\"]:[--uy-ai-gradient-border-width:1px]",
-		"uy:data-[selected=\"true\"]:[--uy-ai-gradient-border-width:1px]",
-		"uy:data-[selected=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-border-width:2px]",
-		"uy:data-[selected=\"true\"]:hover:[--uy-ai-gradient-border-width:2px]"
-	],
+	base: /* @__PURE__ */ "uy:relative uy:isolate uy:[--uy-ai-gradient-border-width:2px],uy:[--uy-ai-gradient-border-opacity:0],uy:[--uy-ai-gradient-surface-opacity:0],uy:[--uy-ai-gradient-animation-play-state:paused],uy:max-w-full,uy:text-content-neutral-enabled,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,uy:data-[pressed=\"true\"]:[--uy-ai-gradient-border-width:1px],uy:data-[pressed=\"true\"]:[--uy-ai-gradient-border-opacity:1],uy:data-[pressed=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06],uy:data-[pressed=\"true\"]:[--uy-ai-gradient-animation-play-state:paused],uy:data-[pressed=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:paused],uy:data-[pressed=\"true\"]:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused],uy:data-[selected=\"true\"]:[--uy-ai-gradient-border-width:1px],uy:data-[selected=\"true\"]:[--uy-ai-gradient-border-opacity:1],uy:data-[selected=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06],uy:data-[hovered=\"true\"]:[--uy-ai-gradient-border-opacity:1],uy:data-[hovered=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06],uy:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:running],uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-opacity:1],uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06],uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:running],uy:data-[selected=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-border-width:2px],uy:data-[selected=\"true\"]:hover:[--uy-ai-gradient-border-width:2px]".split(","),
 	variants: {
 		isDisabled: {
 			true: [
@@ -41,7 +29,6 @@ var f = c({
 		isDisabled: !1,
 		className: n({
 			gradient: "linear",
-			variant: "ghost",
 			glow: !1
 		})
 	}, {

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

@@ -3,4 +3,11 @@ export { PayfitAIBrand, type PayfitAIBrandProps, } from './components/payfit-ai-
 export { AITriggerButton, type AITriggerButtonBrandSlotProps, type AITriggerButtonProps, } from './components/ai-trigger-button/AITriggerButton.js';
 export { AIComposerAttachment, type AIComposerAttachmentProps, } from './components/ai-composer/parts/AIComposerAttachment.js';
 export { AIComposerAttachmentsGroup, type AIComposerAttachmentsGroupProps, } from './components/ai-composer/parts/AIComposerAttachmentsGroup.js';
+export { AIComposer, type AIComposerProps, } from './components/ai-composer/AIComposer.js';
+export { type AIComposerEnterKeyBehavior, type AIComposerState, } from './components/ai-composer/AIComposer.context.js';
+export { AIComposerAction, type AIComposerActionProps, } from './components/ai-composer/parts/AIComposerAction.js';
+export { AIComposerActions, type AIComposerActionsProps, } from './components/ai-composer/parts/AIComposerActions.js';
+export { AIComposerAlert, type AIComposerAlertProps, } from './components/ai-composer/parts/AIComposerAlert.js';
+export { AIComposerSubmitAction, type AIComposerSubmitActionProps, } from './components/ai-composer/parts/AIComposerSubmitAction.js';
+export { AIComposerTextArea, type AIComposerTextAreaProps, } from './components/ai-composer/parts/AIComposerTextArea.js';
 export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';

package/dist/esm/modules/ai-kit/utils/ai-gradient-effect.d.ts

@@ -1,42 +1,47 @@
 /**
  * @summary
- * Applies the Payfit AI gradient border effect to an enabled interactive host.
+ * Applies the Payfit AI gradient border renderer to a component host.
  * @description
  * Pass the returned classes to the interactive element itself. The element
  * continues to own its padding, margin, background, border radius, and
- * semantic state styles. Set `--uy-ai-gradient-border-width` on that host to
- * choose the visible border width.
+ * semantic state styles. Set its typed AI gradient custom properties on that
+ * host to choose the border geometry and visibility.
  * @param options - Variant options for the effect.
  * @param {string} [options.gradient="linear"] - Gradient movement model. `linear` sweeps through
  * a seamless repeat, `radial` pulses outward and inward, and `conic` rotates
  * around the host. Defaults to `linear`.
- * @param {string} [options.variant="outlined"] - Resting border visibility. `outlined` displays the
- * border at rest; `ghost` displays it only in interactive states. Defaults to
- * `outlined`.
- * @param {boolean} [options.glow=false] - Enables the animated three-colour outer shadow on
- * hover and focus-visible. Override `--uy-ai-gradient-glow-opacity` on the
- * host to tune its strength. Defaults to `false`.
+ * @param {boolean} [options.glow=false] - Enables an animated three-colour outer shadow on a
+ * decorative layer behind the host. Override `--uy-ai-gradient-glow-opacity`
+ * on the host to tune its strength. Defaults to `false`.
  * @remarks
  * - When the control needs an interior gradient surface, render a decorative
  *   element as the first child and apply {@link aiGradientSurfaceEffect}.
  * - The surface utility creates the z-index 10 overlay layer. Elements that apply `aiGradientEffect`
- *   use`isolation: isolate` to avoid z-index conflicts.
+ *   use `isolation: isolate` to avoid z-index conflicts. The optional glow
+ *   uses `::after` behind both the border and surface layers, so it does not
+ *   replace a host-provided elevation shadow.
  * - Place all interactive content at z-index 20 so it remains above both the
  *   gradient border and surface.
- * - The effect animates only on hover and focus-visible, respects
- *   reduced-motion preferences, and should only be applied while the host is
- *   enabled. Disabled states must supply their own non-animated
- *   border and surface.
+ * - The effect respects reduced-motion preferences. Components control when
+ *   the renderer is visible through the presentation contract.
  * @notes
  * This utility needs specific custom CSS properties set on the host element to work properly.
- * - `--uy-ai-gradient-border-width` may be set on the host to control the
+ * - `--uy-ai-gradient-border-width` controls the
  *   visible gradient border width. It accepts a CSS length such as `1px` and
  *   defaults to `1px`.
+ * - `--uy-ai-gradient-border-opacity` controls border visibility as a number
+ *   between `0` and `1`; it defaults to `0`.
+ * - `--uy-ai-gradient-surface-opacity` controls decorative surface visibility
+ *   as a number between `0` and `1`; it defaults to `0`.
+ * - `--uy-ai-gradient-animation-play-state` controls animation playback with
+ *   `running` or `paused`; it defaults to `paused`.
  * - `--uy-ai-gradient-angle` when `gradient: 'conic`. Set it for an advanced static starting angle
  *   for conic gradients and the glow. It accepts a CSS angle and defaults to
  *   `0deg`; the effect animates it when required.
  * - `--uy-ai-gradient-glow-opacity` is optional when `glow: true`. It controls
  *   the glow's opacity, defaulting to `20%`.
+ * - `--uy-ai-gradient-glow-visibility` controls the decorative glow layer as
+ *   a number between `0` and `1`; it defaults to `0`.
  * @returns Tailwind classes to apply to the interactive host.
  * @example
  * ```tsx
@@ -48,7 +53,6 @@
  *       'uy:[--uy-ai-gradient-border-width:2px]',
  *       aiGradientEffect({
  *         gradient: 'linear',
- *         variant: 'outlined',
  *         glow: true,
  *       }),
  *     ],
@@ -74,10 +78,6 @@ export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<
         radial: string[];
         conic: string[];
     };
-    variant: {
-        outlined: "uy:supports-mask-border:before:opacity-100";
-        ghost: string[];
-    };
     glow: {
         true: string[];
         false: never[];
@@ -88,10 +88,6 @@ export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<
         radial: string[];
         conic: string[];
     };
-    variant: {
-        outlined: "uy:supports-mask-border:before:opacity-100";
-        ghost: string[];
-    };
     glow: {
         true: string[];
         false: never[];
@@ -102,10 +98,6 @@ export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<
         radial: string[];
         conic: string[];
     };
-    variant: {
-        outlined: "uy:supports-mask-border:before:opacity-100";
-        ghost: string[];
-    };
     glow: {
         true: string[];
         false: never[];
@@ -115,19 +107,16 @@ export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<
  * Applies the Payfit AI gradient surface effect to a decorative child layer.
  * @description
  * This utility takes no options. It positions a presentational layer over its relative host,
- * makes it non-interactive, inherits the host radius, and applies the Payfit AI
- * gradient at 6% opacity for enabled hover, focus-visible, active, pressed,
- * and selected states.
+ * makes it non-interactive, inherits the host radius, and paints the Payfit AI
+ * gradient using the host-controlled surface opacity.
  * @remarks
  * - Render the surface element as the first child of a host styled with
  *   {@link aiGradientEffect}.
  * - It occupies z-index 10; the host's interactive content must use a higher z-index.
  * - The complete layer contract is shown in {@link aiGradientEffect}'s example.
  * @notes
- * - This utility has no consumer-set CSS custom properties. Set any host
- *   properties through {@link aiGradientEffect} instead.
- * - The layer has no resting or disabled background. The host remains
- *   responsible for its background, disabled styling, and loading styling.
+ * - Set `--uy-ai-gradient-surface-opacity` on the host to control visibility.
+ *   It defaults to `0`, so an unconfigured surface remains idle.
  * - Mark the element `aria-hidden` because it is purely decorative.
  * @returns Tailwind classes to apply to the decorative surface element.
  * @example

package/dist/esm/modules/ai-kit/utils/ai-gradient-effect.js

@@ -1,85 +1,43 @@
 import { uyTv as e } from "@payfit/unity-themes";
 //#region src/modules/ai-kit/utils/ai-gradient-effect.ts
 var t = e({
-	base: [
-		"uy:relative",
-		"uy:group",
-		"uy:isolate",
-		"uy:border-solid",
-		"uy:border-(length:--uy-ai-gradient-border-width)",
-		"uy:motion-safe:transition-[--uy-ai-gradient-border-width]",
-		"uy:motion-safe:duration-50",
-		"uy:motion-safe:ease-linear",
-		"uy:supports-mask-border:border-transparent",
-		"uy:supports-mask-border:before:content-['']",
-		"uy:supports-mask-border:before:pointer-events-none",
-		"uy:supports-mask-border:before:absolute",
-		"uy:supports-mask-border:before:-inset-(--uy-ai-gradient-border-width)",
-		"uy:supports-mask-border:before:z-0",
-		"uy:supports-mask-border:before:rounded-[inherit]",
-		"uy:supports-mask-border:before:p-(--uy-ai-gradient-border-width)",
-		"uy:supports-mask-border:before:opacity-0",
-		"uy:supports-mask-border:before:[mask-image:linear-gradient(#000_0_0),linear-gradient(#000_0_0)]",
-		"uy:supports-mask-border:before:[mask-origin:content-box,border-box]",
-		"uy:supports-mask-border:before:[mask-clip:content-box,border-box]",
-		"uy:supports-mask-border:before:[mask-composite:exclude]",
-		"uy:supports-mask-border:before:[-webkit-mask-image:linear-gradient(#000_0_0),linear-gradient(#000_0_0)]",
-		"uy:supports-mask-border:before:[-webkit-mask-origin:content-box,border-box]",
-		"uy:supports-mask-border:before:[-webkit-mask-clip:content-box,border-box]",
-		"uy:supports-mask-border:before:[-webkit-mask-composite:xor]"
-	],
+	base: /* @__PURE__ */ "uy:relative.uy:group.uy:isolate.uy:border-solid.uy:border-(length:--uy-ai-gradient-border-width).uy:motion-safe:transition-[--uy-ai-gradient-border-width,--uy-ai-gradient-border-opacity,--uy-ai-gradient-animation-play-state].uy:motion-safe:duration-50.uy:motion-safe:ease-linear.uy:supports-mask-border:border-transparent.uy:supports-mask-border:before:content-[''].uy:supports-mask-border:before:pointer-events-none.uy:supports-mask-border:before:absolute.uy:supports-mask-border:before:-inset-(--uy-ai-gradient-border-width).uy:supports-mask-border:before:z-0.uy:supports-mask-border:before:rounded-[inherit].uy:supports-mask-border:before:p-(--uy-ai-gradient-border-width).uy:supports-mask-border:before:opacity-[var(--uy-ai-gradient-border-opacity)].uy:motion-safe:before:[animation-play-state:var(--uy-ai-gradient-animation-play-state)].uy:supports-mask-border:before:[mask-image:linear-gradient(#000_0_0),linear-gradient(#000_0_0)].uy:supports-mask-border:before:[mask-origin:content-box,border-box].uy:supports-mask-border:before:[mask-clip:content-box,border-box].uy:supports-mask-border:before:[mask-composite:exclude].uy:supports-mask-border:before:[-webkit-mask-image:linear-gradient(#000_0_0),linear-gradient(#000_0_0)].uy:supports-mask-border:before:[-webkit-mask-origin:content-box,border-box].uy:supports-mask-border:before:[-webkit-mask-clip:content-box,border-box].uy:supports-mask-border:before:[-webkit-mask-composite:xor]".split("."),
 	variants: {
 		gradient: {
-			linear: [
-				"uy:supports-mask-border:before:[background:linear-gradient(90deg,var(--uy-gradient-payfit-ai-animated))_0%_50%/400%_100%_no-repeat]",
-				"uy:motion-safe:enabled:data-[hovered=\"true\"]:before:animate-uy-ai-gradient-linear-sweep",
-				"uy:motion-safe:enabled:data-[focus-visible=\"true\"]:before:animate-uy-ai-gradient-linear-sweep",
-				"uy:motion-safe:enabled:hover:before:animate-uy-ai-gradient-linear-sweep",
-				"uy:motion-safe:enabled:focus-visible:before:animate-uy-ai-gradient-linear-sweep"
-			],
-			radial: [
-				"uy:supports-mask-border:before:[background:radial-gradient(circle,var(--uy-gradient-payfit-ai))_center/100%_100%_no-repeat]",
-				"uy:motion-safe:enabled:data-[hovered=\"true\"]:before:animate-uy-ai-gradient-radial-pulse",
-				"uy:motion-safe:enabled:data-[focus-visible=\"true\"]:before:animate-uy-ai-gradient-radial-pulse",
-				"uy:motion-safe:enabled:hover:before:animate-uy-ai-gradient-radial-pulse",
-				"uy:motion-safe:enabled:focus-visible:before:animate-uy-ai-gradient-radial-pulse"
-			],
-			conic: [
-				"uy:supports-mask-border:before:[background:conic-gradient(from_var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))_center/cover_no-repeat]",
-				"uy:motion-safe:enabled:data-[hovered=\"true\"]:before:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:data-[focus-visible=\"true\"]:before:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:hover:before:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:focus-visible:before:animate-uy-ai-gradient-angle-rotate"
-			]
-		},
-		variant: {
-			outlined: "uy:supports-mask-border:before:opacity-100",
-			ghost: [
-				"uy:enabled:data-[hovered=\"true\"]:supports-mask-border:before:opacity-100",
-				"uy:enabled:data-[pressed=\"true\"]:supports-mask-border:before:opacity-100",
-				"uy:enabled:data-[selected=\"true\"]:supports-mask-border:before:opacity-100",
-				"uy:enabled:data-[focus-visible=\"true\"]:supports-mask-border:before:opacity-100"
-			]
+			linear: ["uy:supports-mask-border:before:[background:linear-gradient(90deg,var(--uy-gradient-payfit-ai-animated))_0%_50%/400%_100%_no-repeat]", "uy:motion-safe:before:animate-uy-ai-gradient-linear-sweep"],
+			radial: ["uy:supports-mask-border:before:[background:radial-gradient(circle,var(--uy-gradient-payfit-ai))_center/100%_100%_no-repeat]", "uy:motion-safe:before:animate-uy-ai-gradient-radial-pulse"],
+			conic: ["uy:supports-mask-border:before:[background:conic-gradient(from_var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))_center/cover_no-repeat]", "uy:motion-safe:before:animate-uy-ai-gradient-angle-rotate"]
 		},
 		glow: {
 			true: [
-				"uy:enabled:data-[hovered=\"true\"]:[box-shadow:var(--uy-ai-gradient-glow)]",
-				"uy:enabled:data-[focus-visible=\"true\"]:[box-shadow:var(--uy-ai-gradient-glow)]",
-				"uy:enabled:hover:[box-shadow:var(--uy-ai-gradient-glow)]",
-				"uy:enabled:focus-visible:[box-shadow:var(--uy-ai-gradient-glow)]",
-				"uy:motion-safe:enabled:data-[hovered=\"true\"]:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:data-[focus-visible=\"true\"]:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:hover:animate-uy-ai-gradient-angle-rotate",
-				"uy:motion-safe:enabled:focus-visible:animate-uy-ai-gradient-angle-rotate"
+				"uy:after:content-['']",
+				"uy:after:pointer-events-none",
+				"uy:after:absolute",
+				"uy:after:inset-0",
+				"uy:after:-z-10",
+				"uy:after:rounded-[inherit]",
+				"uy:after:[box-shadow:var(--uy-ai-gradient-glow)]",
+				"uy:after:opacity-[var(--uy-ai-gradient-glow-visibility)]",
+				"uy:motion-safe:after:animate-uy-ai-gradient-angle-rotate",
+				"uy:motion-safe:after:[animation-play-state:var(--uy-ai-gradient-animation-play-state)]"
 			],
 			false: []
 		}
 	},
 	defaultVariants: {
 		gradient: "linear",
-		variant: "outlined",
 		glow: !1
 	}
-}), n = e({ base: /* @__PURE__ */ "uy:pointer-events-none.uy:absolute.uy:inset-0.uy:z-10.uy:rounded-[inherit].uy:group-enabled:group-data-[hovered=\"true\"]:opacity-6.uy:group-enabled:group-data-[hovered=\"true\"]:bg-linear-45.uy:group-enabled:group-data-[hovered=\"true\"]:gradient-stops-payfit-ai.uy:group-enabled:group-hover:opacity-6.uy:group-enabled:group-hover:bg-linear-45.uy:group-enabled:group-hover:gradient-stops-payfit-ai.uy:group-enabled:group-data-[focus-visible=\"true\"]:opacity-6.uy:group-enabled:group-data-[focus-visible=\"true\"]:bg-linear-45.uy:group-enabled:group-data-[focus-visible=\"true\"]:gradient-stops-payfit-ai.uy:group-enabled:group-focus-visible:opacity-6.uy:group-enabled:group-focus-visible:bg-linear-45.uy:group-enabled:group-focus-visible:gradient-stops-payfit-ai.uy:group-enabled:group-data-active:opacity-6.uy:group-enabled:group-data-active:bg-linear-45.uy:group-enabled:group-data-active:gradient-stops-payfit-ai.uy:group-enabled:group-data-[pressed=\"true\"]:opacity-6.uy:group-enabled:group-data-[pressed=\"true\"]:bg-linear-45.uy:group-enabled:group-data-[pressed=\"true\"]:gradient-stops-payfit-ai.uy:group-enabled:group-data-[selected=\"true\"]:opacity-6.uy:group-enabled:group-data-[selected=\"true\"]:bg-linear-45.uy:group-enabled:group-data-[selected=\"true\"]:gradient-stops-payfit-ai".split(".") });
+}), n = e({ base: [
+	"uy:pointer-events-none",
+	"uy:absolute",
+	"uy:inset-0",
+	"uy:z-10",
+	"uy:rounded-[inherit]",
+	"uy:bg-linear-45",
+	"uy:gradient-stops-payfit-ai",
+	"uy:opacity-[var(--uy-ai-gradient-surface-opacity)]",
+	"uy:motion-safe:transition-[--uy-ai-gradient-surface-opacity]"
+] });
 //#endregion
 export { t as aiGradientEffect, n as aiGradientSurfaceEffect };