@payfit/unity-components 3.2.3 → 3.2.4

package/dist/esm/ai-kit.js

@@ -4,4 +4,10 @@ import { PayfitAIBrand as r } from "./modules/ai-kit/components/payfit-ai-brand/
 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";
-export { n as AIButton, a as AIComposerAttachment, o as AIComposerAttachmentsGroup, i as AITriggerButton, r as PayfitAIBrand, e as aiGradientEffect, t as aiGradientSurfaceEffect };
+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";
+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 };

package/dist/esm/core/components/icon-button/CircularIconButton.js

@@ -12,8 +12,8 @@ var u = a({
 	base: [
 		"uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
 		"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled uy:disabled:data-[hovered=\"true\"]:bg-transparent",
-		"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-		"uy:aria-busy:text-content-neutral-disabled uy:aria-busy:cursor-progress"
+		"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring",
+		"uy:data-[pending=\"true\"]:text-content-neutral-disabled uy:data-[pending=\"true\"]:cursor-progress"
 	],
 	variants: {
 		size: {
@@ -32,7 +32,7 @@ var u = a({
 				"uy:data-[hovered=\"true\"]:bg-surface-neutral-low-hover",
 				"uy:active:bg-surface-neutral-low-active",
 				"uy:data-[pressed=true]:bg-surface-neutral-low-active",
-				"uy:focus-visible:bg-surface-neutral-low-focus",
+				"uy:focus-visible:bg-surface-neutral-low-focus uy:data-[focus-visible=\"true\"]:bg-surface-neutral-low-focus",
 				"uy:disabled:bg-surface-neutral-low-disabled"
 			],
 			"content.neutral.lowest": [
@@ -63,9 +63,10 @@ var u = a({
 			...C,
 			type: f,
 			onPress: p,
-			isDisabled: y || _,
+			isDisabled: y,
 			"aria-labelledby": S ?? w,
 			"aria-busy": _,
+			isPending: _,
 			className: T,
 			children: [_ ? /* @__PURE__ */ o(n, {
 				size: "small",

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

@@ -13,7 +13,10 @@ var p = c({
 		base: [
 			"uy:relative",
 			"uy:isolate",
-			"uy:[--uy-ai-gradient-border-width:1px]"
+			"uy:[--uy-ai-gradient-border-width:1px]",
+			"uy:[--uy-ai-gradient-border-opacity:0]",
+			"uy:[--uy-ai-gradient-surface-opacity:0]",
+			"uy:[--uy-ai-gradient-animation-play-state:paused]"
 		],
 		aiSurface: [i()],
 		content: [
@@ -33,10 +36,17 @@ var p = c({
 		variant: {
 			outlined: { base: [
 				"uy:text-content-neutral-enabled",
+				"uy:[--uy-ai-gradient-border-opacity:1]",
 				"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\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
+				"uy:enabled:data-[pressed=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[pressed=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+				"uy:enabled:data-[pressed=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+				"uy:enabled:data-[pressed=\"true\"]:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
 				"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",
@@ -47,10 +57,21 @@ var p = c({
 				"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:data-[hovered=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+				"uy:enabled:data-[hovered=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
 				"uy:enabled:active:text-content-neutral-active",
 				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:enabled:data-[pressed=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+				"uy:enabled:data-[pressed=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[pressed=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+				"uy:enabled:data-[pressed=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+				"uy:enabled:data-[pressed=\"true\"]:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
 				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus",
-				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]"
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+				"uy:enabled:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:running]"
 			] }
 		},
 		isDisabled: { true: {
@@ -65,7 +86,6 @@ var p = c({
 			variant: "outlined",
 			className: { base: r({
 				gradient: "linear",
-				variant: "outlined",
 				glow: !1
 			}) }
 		},
@@ -74,7 +94,6 @@ var p = c({
 			variant: "ghost",
 			className: { base: r({
 				gradient: "linear",
-				variant: "ghost",
 				glow: !1
 			}) }
 		},

package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.context.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Describes the request lifecycle so Composer parts can present the right
+ * controls while a person writes, sends, or stops a prompt.
+ * @remarks
+ * - `enabled` accepts a new prompt.
+ * - `loading` marks a submitted prompt while the request starts.
+ * - `streaming` turns the primary action into a stop control.
+ * - `disabled` disables the prompt and actions.
+ */
+export type AIComposerState = 'disabled' | 'loading' | 'streaming' | 'enabled';
+/**
+ * Selects whether plain Enter sends a ready prompt or adds a new line.
+ * @remarks
+ * `submit` is the default and keeps Shift+Enter for new lines. `newline`
+ * reserves Enter for new lines and requires the primary action to send.
+ */
+export type AIComposerEnterKeyBehavior = 'submit' | 'newline';
+export interface AIComposerContextValue {
+    enterKeyBehavior: AIComposerEnterKeyBehavior;
+    state?: AIComposerState;
+    onStop?: () => void;
+    requestSubmit: () => void;
+    hasValue: boolean;
+    setHasValue: (hasValue: boolean) => void;
+}
+export declare const AIComposerContextProvider: import('react').Provider<AIComposerContextValue>;
+export declare const useAIComposerContext: () => AIComposerContextValue;

package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.context.js

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/modules/ai-kit/components/ai-composer/AIComposer.context.tsx
+var n = e({
+	enterKeyBehavior: "submit",
+	state: "enabled",
+	requestSubmit: () => void 0,
+	hasValue: !1,
+	setHasValue: () => void 0
+}), r = n.Provider, i = () => t(n);
+//#endregion
+export { r as AIComposerContextProvider, i as useAIComposerContext };

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

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, FormEventHandler, ReactNode } from 'react';
+import { AIComposerEnterKeyBehavior, AIComposerState } from './AIComposer.context.js';
+export interface AIComposerProps extends Omit<ComponentPropsWithoutRef<'form'>, 'children' | 'className' | 'onSubmit' | 'style'> {
+    /** Composes the prompt, optional context, feedback, and action regions. */
+    children?: ReactNode;
+    /**
+     * Controls how Enter behaves in the prompt field.
+     * @default 'submit'
+     */
+    enterKeyBehavior?: AIComposerEnterKeyBehavior;
+    /**
+     * Selects the interaction lifecycle and its visual treatment.
+     * @default 'enabled'
+     */
+    state?: AIComposerState;
+    /** Receives the submit event after the browser default is prevented. */
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+    /** Stops the active response while the composer is streaming. */
+    onStop?: () => void;
+}
+/**
+ * Gives people one consistent place to write an AI request, add context, and
+ * follow the request lifecycle without leaving the conversation.
+ *
+ * Compose `AIComposerTextArea`, `AIComposerActions`, and any optional
+ * attachment or feedback parts inside the form. Set `state` from the request
+ * lifecycle and pass `onSubmit` to send the prompt.
+ * @param props - Form attributes, composer state, and composable child regions.
+ * @param props.children - Renders the Composer parts in their semantic order.
+ * @param props.enterKeyBehavior - Chooses `submit` for Enter-to-send or
+ * `newline` for Enter-to-add-a-line.
+ * @param props.state - Selects `enabled`, `loading`, `streaming`, or `disabled`.
+ * @param props.onSubmit - Sends a ready prompt after form validation succeeds.
+ * @param props.onStop - Stops an in-progress response during `streaming`.
+ * @see {@link AIComposerProps} for all available props.
+ * @remarks
+ * The root renders a semantic `<form>`; give it an `aria-label` or
+ * `aria-labelledby` when it needs a landmark name. `AIComposerTextArea`
+ * derives whether the prompt contains meaningful text, so consumers do not
+ * need to maintain a separate active state. The streaming submit action calls
+ * `onStop` instead of submitting a new prompt.
+ */
+export declare const AIComposer: import('react').ForwardRefExoticComponent<AIComposerProps & import('react').RefAttributes<HTMLFormElement>>;

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

@@ -0,0 +1,52 @@
+import { AIComposerContextProvider as e } from "./AIComposer.context.js";
+import { aiComposer as t } from "./AIComposer.variants.js";
+import { forwardRef as n, useCallback as r, useImperativeHandle as i, useRef as a, useState as o } from "react";
+import { mergeProps as s, useFocusWithin as c } from "react-aria";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-composer/AIComposer.tsx
+var d = n(({ children: n, enterKeyBehavior: d = "submit", state: f = "enabled", onSubmit: p, onStop: m, ...h }, g) => {
+	let _ = t({ state: f }), v = a(null), [y, b] = o(!1), [x, S] = o(!1), { focusWithinProps: C } = c({
+		isDisabled: f === "disabled",
+		onFocusWithinChange: S
+	}), w = s(h, C);
+	i(g, () => {
+		if (!v.current) throw Error("Expected the AI Composer form to be mounted");
+		return v.current;
+	}, []);
+	let T = r(() => {
+		v.current?.requestSubmit();
+	}, []), E = (e) => {
+		e.preventDefault(), p?.(e);
+	};
+	return /* @__PURE__ */ l(e, {
+		value: {
+			enterKeyBehavior: d,
+			state: f,
+			hasValue: y,
+			setHasValue: b,
+			onStop: m,
+			requestSubmit: T
+		},
+		children: /* @__PURE__ */ u("form", {
+			ref: v,
+			...w,
+			onSubmit: E,
+			className: _.base(),
+			"data-focus-within": x || void 0,
+			"data-has-value": y || void 0,
+			"data-state": f,
+			"data-unity-component": "ai.composer",
+			children: [/* @__PURE__ */ l("span", {
+				"aria-hidden": "true",
+				className: _.surface(),
+				"data-unity-slot": "ai.surface"
+			}), /* @__PURE__ */ l("div", {
+				className: _.content(),
+				children: n
+			})]
+		})
+	});
+});
+d.displayName = "AIComposer";
+//#endregion
+export { d as AIComposer };

package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.variants.d.ts

@@ -0,0 +1,34 @@
+export declare const aiComposer: import('tailwind-variants').TVReturnType<{
+    state: {
+        enabled: {};
+        disabled: {};
+        loading: {};
+        streaming: {};
+    };
+}, {
+    base: string[];
+    surface: string;
+    content: string;
+}, undefined, {
+    state: {
+        enabled: {};
+        disabled: {};
+        loading: {};
+        streaming: {};
+    };
+}, {
+    base: string[];
+    surface: string;
+    content: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    state: {
+        enabled: {};
+        disabled: {};
+        loading: {};
+        streaming: {};
+    };
+}, {
+    base: string[];
+    surface: string;
+    content: string;
+}>>;

package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.variants.js

@@ -0,0 +1,68 @@
+import { aiGradientEffect as e, aiGradientSurfaceEffect as t } from "../../utils/ai-gradient-effect.js";
+import { uyTv as n } from "@payfit/unity-themes";
+//#region src/modules/ai-kit/components/ai-composer/AIComposer.variants.ts
+var r = n({
+	slots: {
+		base: [
+			"uy:flex uy:min-h-[120px] uy:rounded-200 uy:border-2 uy:px-200 uy:py-150 uy:not-data-[state=\"disabled\"]:shadow-100",
+			"uy:bg-surface-neutral",
+			"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:[--uy-ai-gradient-glow-opacity:0%]",
+			"uy:data-[state=\"enabled\"]:border-border-neutral",
+			"uy:data-[state=\"disabled\"]:cursor-not-allowed uy:data-[state=\"disabled\"]:bg-surface-neutral-disabled uy:data-[state=\"disabled\"]:border-border-neutral-disabled",
+			"uy:hover:border-border-neutral-hover",
+			"uy:data-[hovered=\"true\"]:border-border-neutral-hover",
+			"uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring",
+			"uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-solid uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring",
+			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
+			"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
+			"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-opacity:1]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-animation-play-state:running]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-opacity:20%]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-visibility:1]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-opacity:1]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-animation-play-state:running]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-opacity:20%]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-visibility:1]",
+			"uy:data-[state=\"loading\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"loading\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"streaming\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"streaming\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-opacity:0]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-surface-opacity:0]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-animation-play-state:paused]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-opacity:0%]",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-visibility:0]",
+			e({
+				gradient: "linear",
+				glow: !0
+			})
+		],
+		surface: t(),
+		content: "uy:relative uy:z-20 uy:flex uy:min-h-0 uy:min-w-0 uy:flex-1 uy:flex-col"
+	},
+	variants: { state: {
+		enabled: {},
+		disabled: {},
+		loading: {},
+		streaming: {}
+	} }
+});
+//#endregion
+export { r as aiComposer };

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

@@ -0,0 +1,24 @@
+import { CircularIconButtonProps } from '../../../../../core/components/icon-button/CircularIconButton.js';
+export interface AIComposerActionProps extends Omit<CircularIconButtonProps, 'asElement' | 'className' | 'isLoading' | 'title' | 'style'> {
+    /** Supplies the tooltip and fallback accessible name for the icon action. */
+    title?: string;
+    /** Names the action when its icon alone does not communicate its purpose. */
+    'aria-label'?: string;
+}
+declare const getActionTitle: (title: string | undefined, ariaLabel: string | undefined, defaultTitle: string) => string;
+/**
+ * Keeps supporting Composer actions discoverable without competing with the
+ * primary send or stop action.
+ *
+ * Render it in the `left` region of `AIComposerActions` for actions such as
+ * attaching a file. Pass a specific `aria-label` or `title` for every icon so
+ * assistive technology can identify its purpose.
+ * @param props - Icon-button props and the supporting action name.
+ * @param props.title - Provides the tooltip and fallback accessible name.
+ * @param props.aria-label - Provides a specific accessible action name.
+ * @see {@link AIComposerActionProps} for all available props.
+ * @remarks
+ * The action inherits `state="disabled"` from the parent Composer.
+ */
+export declare const AIComposerAction: import('react').ForwardRefExoticComponent<AIComposerActionProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { getActionTitle };

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

@@ -0,0 +1,27 @@
+import { CircularIconButton as e } from "../../../../../core/components/icon-button/CircularIconButton.js";
+import { useAIComposerContext as t } from "../AIComposer.context.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i } from "react/jsx-runtime";
+import { useIntl as a } from "react-intl";
+//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAction.tsx
+var o = r({ base: ["uy:data-[disabled=\"true\"]:bg-surface-neutral-lowest-disabled"] }), s = (e, t, n) => e ?? t ?? n, c = n(({ icon: n, title: r, "aria-label": c, isDisabled: l, ...u }, d) => {
+	let f = a(), { state: p } = t(), m = s(r, c, f.formatMessage({
+		id: "unity:module:ai-kit:composer:action",
+		defaultMessage: "Composer action"
+	})), h = o();
+	return /* @__PURE__ */ i(e, {
+		...u,
+		ref: d,
+		asElement: "button",
+		icon: n,
+		title: m,
+		"aria-label": c,
+		isDisabled: l || p === "disabled",
+		className: h,
+		color: "content.neutral.lowest"
+	});
+});
+c.displayName = "AIComposerAction";
+//#endregion
+export { c as AIComposerAction, s as getActionTitle };

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface AIComposerActionsProps {
+    /** Renders supporting actions, such as attachment controls, on the left. */
+    left?: ReactNode;
+    /** Renders the primary send or stop action on the right. */
+    right?: ReactNode;
+    /** Adds layout styling to the action row. */
+    className?: string;
+}
+/**
+ * Keeps prompt actions predictable by separating supporting controls from the
+ * primary send or stop action.
+ *
+ * Pass secondary `AIComposerAction` controls through `left` and an
+ * `AIComposerSubmitAction` through `right`.
+ * @param props - The optional left and right action regions.
+ * @param props.left - Renders supporting actions on the left.
+ * @param props.right - Renders the primary action on the right.
+ * @param props.className - Adds layout styling to the action row.
+ * @see {@link AIComposerActionsProps} for all available props.
+ */
+export declare const AIComposerActions: {
+    ({ left, right, className, }: AIComposerActionsProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,25 @@
+import { uyMerge as e, uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerActions.tsx
+var i = t({ slots: {
+	base: "uy:flex uy:items-center uy:justify-between uy:gap-2 uy:mt-100",
+	actionGroup: "uy:flex uy:items-center uy:gap-2"
+} }), a = ({ left: t, right: a, className: o }) => {
+	let { base: s, actionGroup: c } = i();
+	return /* @__PURE__ */ r("div", {
+		className: e(s(), o),
+		"data-unity-slot": "actions",
+		children: [/* @__PURE__ */ n("div", {
+			className: c(),
+			"data-unity-slot": "actions-left",
+			children: t
+		}), /* @__PURE__ */ n("div", {
+			className: c(),
+			"data-unity-slot": "actions-right",
+			children: a
+		})]
+	});
+};
+a.displayName = "AIComposerActions";
+//#endregion
+export { a as AIComposerActions };

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

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface AIComposerAlertProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'> {
+    /** Renders the actionable feedback message. */
+    children: ReactNode;
+    /** Selects the visual treatment and live-region priority. */
+    variant: 'warning' | 'error';
+    /** Adds layout styling to the feedback region. */
+    className?: string;
+}
+/**
+ * Explains what needs attention without making people lose the prompt they
+ * have already written.
+ *
+ * Render it below `AIComposerTextArea` when the request needs feedback. Set
+ * `variant="warning"` for non-blocking guidance and `variant="error"` when a
+ * person must resolve a problem before continuing.
+ * @param props - Feedback content and its severity variant.
+ * @param props.children - Renders the actionable feedback message.
+ * @param props.variant - Selects warning or error semantics and treatment.
+ * @param props.className - Adds consumer styling to the alert region.
+ * @see {@link AIComposerAlertProps} for all available props.
+ * @remarks
+ * Warnings render `role="status"` with a polite announcement. Errors render
+ * `role="alert"` with an assertive announcement. Connect validation errors to
+ * the prompt with `aria-describedby` and `aria-invalid` on
+ * `AIComposerTextArea`.
+ */
+export declare const AIComposerAlert: {
+    ({ children, variant, className, ...props }: AIComposerAlertProps): import('react/jsx-runtime').JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,37 @@
+import { Icon as e } from "../../../../../core/components/icon/Icon.js";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAlert.tsx
+var a = n({
+	slots: {
+		base: "uy:flex uy:items-start uy:gap-50",
+		alertMessage: "uy:min-w-0 uy:whitespace-pre-wrap"
+	},
+	variants: { variant: {
+		warning: { alertMessage: "uy:typography-body-small uy:text-content-warning-high" },
+		error: { alertMessage: "uy:typography-body-small uy:text-content-danger" }
+	} }
+}), o = ({ children: n, variant: o, className: s, ...c }) => {
+	let { base: l, alertMessage: u } = a({ variant: o }), d = o === "error" ? "WarningCircleFilled" : "WarningFilled", f = o === "error" ? "content.danger" : "content.warning";
+	return /* @__PURE__ */ i("div", {
+		...c,
+		role: o === "error" ? "alert" : "status",
+		"aria-live": o === "error" ? "assertive" : "polite",
+		className: t(l(), s),
+		"data-unity-slot": "alert",
+		"data-variant": o,
+		children: [/* @__PURE__ */ r(e, {
+			src: d,
+			size: 20,
+			color: f,
+			"aria-hidden": "true",
+			role: "presentation"
+		}), /* @__PURE__ */ r("span", {
+			className: u(),
+			children: n
+		})]
+	});
+};
+o.displayName = "AIComposerAlert";
+//#endregion
+export { o as AIComposerAlert };

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

@@ -3,17 +3,36 @@ import { UnityIcon } from '@payfit/unity-icons';
 import { TagProps } from 'react-aria-components/TagGroup';
 export type AIComposerAttachmentProps = Omit<TagProps, 'children' | 'className' | 'style'> & {
     children: ReactNode;
-    /** Icon displayed before the attachment name. */
+    /** Identifies the attachment type before its name. */
     icon: UnityIcon;
-    /** Maximum number of characters displayed in the attachment name. */
+    /** Limits the visible attachment name without changing its accessible text. */
     maxCharactersTruncation?: number;
+    /** Adds styling to the attachment tag. */
     className?: string;
 };
+/**
+ * Keeps each selected file identifiable and removable while preserving space
+ * for the prompt.
+ *
+ * Render it inside `AIComposerAttachmentsGroup` with a stable `id` and the
+ * full filename as children. Pass `textValue` when children are not a plain
+ * string, and use `maxCharactersTruncation` only to shorten the visual label.
+ * @param props - Attachment text, icon, and React Aria tag props.
+ * @param props.icon - Identifies the attachment type before its name.
+ * @param props.maxCharactersTruncation - Sets the visible-name limit. Defaults
+ * to `12` while preserving the complete accessible filename.
+ * @see {@link AIComposerAttachmentProps} for all available props.
+ * @remarks
+ * The attachment receives React Aria tag semantics and a localized remove
+ * control. It disables itself while the parent Composer is `disabled` or
+ * `loading`.
+ */
 export declare const AIComposerAttachment: import('react').ForwardRefExoticComponent<Omit<TagProps, "children" | "className" | "style"> & {
     children: ReactNode;
-    /** Icon displayed before the attachment name. */
+    /** Identifies the attachment type before its name. */
     icon: UnityIcon;
-    /** Maximum number of characters displayed in the attachment name. */
+    /** Limits the visible attachment name without changing its accessible text. */
     maxCharactersTruncation?: number;
+    /** Adds styling to the attachment tag. */
     className?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;