@payfit/unity-components 3.0.3 → 3.1.0

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

@@ -0,0 +1,108 @@
+import { buttonBase as e } from "../../../../components/button/Button.variants.js";
+import { Tooltip as t } from "../../../../components/tooltip/Tooltip.js";
+import { aiGradientEffect as n, aiGradientSurfaceEffect as r } from "../../utils/ai-gradient-effect.js";
+import { PayfitAIBrand as i } from "../payfit-ai-brand/PayfitAIBrand.js";
+import { forwardRef as a, useState as o } from "react";
+import { cn as s, uyTv as c } from "@payfit/unity-themes";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+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]"
+	],
+	variants: {
+		isDisabled: {
+			true: [
+				"uy:disabled:border-border-neutral-high-disabled",
+				"uy:disabled:text-content-neutral-disabled",
+				"uy:data-[loading=\"true\"]:border-border-neutral-high-disabled",
+				"uy:data-[loading=\"true\"]:text-content-neutral-disabled"
+			],
+			false: ""
+		},
+		iconOnly: {
+			true: "uy:!px-100 uy:py-100",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		isDisabled: !1,
+		className: n({
+			gradient: "linear",
+			variant: "ghost",
+			glow: !1
+		})
+	}, {
+		iconOnly: !0,
+		mode: "compact",
+		className: "uy:!px-50 uy:py-50"
+	}],
+	defaultVariants: {
+		isDisabled: !1,
+		iconOnly: !1
+	}
+}), p = c({
+	base: "",
+	variants: { isDisabled: {
+		true: "",
+		false: r()
+	} },
+	defaultVariants: { isDisabled: !1 }
+}), m = a(({ children: e, defaultSelected: n, iconOnly: r = !1, isDisabled: a = !1, isLoading: c = !1, isSelected: m, mode: h = "default", onChange: g, brandSlot: _, ...v }, y) => {
+	let [b, x] = o(n ?? !1), S = m ?? b, C = (e) => {
+		m === void 0 && x(e), g?.(e);
+	}, w = a || c, T = f({
+		iconOnly: r,
+		isDisabled: w,
+		mode: h
+	}), E = p({ isDisabled: w }), D = {
+		appearance: w ? "grayscale" : "color",
+		"aria-hidden": !0,
+		className: s("uy:[--uy-payfit-ai-brand-rotation:0deg]", "uy:[--uy-payfit-ai-brand-scale:1]", "uy:origin-center", "uy:transform-gpu", "uy:rotate-(--uy-payfit-ai-brand-rotation)", "uy:scale-(--uy-payfit-ai-brand-scale)", "uy:motion-safe:transition-[--uy-payfit-ai-brand-rotation,--uy-payfit-ai-brand-scale]", "uy:motion-safe:duration-600", "uy:motion-safe:ease-out", "uy:group-data-[hovered=\"true\"]:[--uy-payfit-ai-brand-rotation:370deg]", "uy:group-data-[hovered=\"true\"]:[--uy-payfit-ai-brand-scale:1.1]", "uy:group-data-[focus-visible=\"true\"]:[--uy-payfit-ai-brand-rotation:370deg]", "uy:group-data-[focus-visible=\"true\"]:[--uy-payfit-ai-brand-scale:1.1]") ?? "",
+		size: h === "default" ? 24 : 20
+	}, O = /* @__PURE__ */ u(d, {
+		...v,
+		ref: y,
+		"aria-expanded": S,
+		"data-dd-privacy": "allow",
+		"data-loading": c || void 0,
+		defaultSelected: n,
+		isDisabled: w,
+		isSelected: m,
+		onChange: C,
+		className: T,
+		children: [/* @__PURE__ */ l("span", {
+			"aria-hidden": "true",
+			className: E,
+			"data-unity-slot": "ai.surface"
+		}), /* @__PURE__ */ u("span", {
+			className: "uy:relative uy:z-20 uy:inline-flex uy:items-center uy:justify-center uy:gap-50",
+			children: [_?.(D) ?? /* @__PURE__ */ l(i, {
+				...D,
+				"data-unity-icon": "prefix"
+			}), /* @__PURE__ */ l("span", {
+				className: r ? "uy:sr-only" : void 0,
+				children: e
+			})]
+		})]
+	});
+	return r ? /* @__PURE__ */ l(t, {
+		title: typeof e == "string" ? e : "Payfit AI",
+		children: O
+	}) : O;
+});
+m.displayName = "AITriggerButton";
+//#endregion
+export { m as AITriggerButton };

package/dist/esm/modules/ai-kit/components/ai-trigger-button/figma/AITriggerButton.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/payfit-ai-brand/PayfitAIBrand.d.ts

@@ -0,0 +1,46 @@
+import { SVGAttributes } from 'react';
+export type PayfitAIBrandProps = Omit<SVGAttributes<SVGSVGElement>, 'width' | 'height'> & {
+    /**
+     * Sets the square width and height of the mark in pixels.
+     * @default 28
+     */
+    size?: number;
+    /**
+     * Selects the full-color or disabled grayscale treatment.
+     * @default 'color'
+     */
+    appearance?: 'color' | 'grayscale';
+};
+/**
+ * Renders the square PayFit AI brand mark used to identify AI Kit surfaces.
+ *
+ * Use the default `color` appearance for available AI actions. Set
+ * `appearance="grayscale"` when the adjacent control is disabled or loading.
+ * Pass `aria-hidden="true"` when nearby text already names the AI action;
+ * otherwise the mark exposes the accessible name “Payfit AI” by default.
+ * @param props - SVG attributes and PayFit AI brand options.
+ * @see {@link PayfitAIBrandProps} for size and appearance options.
+ * @example
+ * ```tsx
+ * import { PayfitAIBrand } from '@payfit/unity-components/ai-kit'
+ *
+ * export function AIActionLabel() {
+ *   return <PayfitAIBrand size={24} aria-label="Payfit AI" />
+ * }
+ * ```
+ * @remarks
+ * - The SVG preserves a square aspect ratio at every size.
+ * - It renders with `role="img"` unless it is decorative.
+ */
+export declare const PayfitAIBrand: import('react').ForwardRefExoticComponent<Omit<SVGAttributes<SVGSVGElement>, "height" | "width"> & {
+    /**
+     * Sets the square width and height of the mark in pixels.
+     * @default 28
+     */
+    size?: number;
+    /**
+     * Selects the full-color or disabled grayscale treatment.
+     * @default 'color'
+     */
+    appearance?: "color" | "grayscale";
+} & import('react').RefAttributes<SVGSVGElement>>;

package/dist/esm/modules/ai-kit/components/payfit-ai-brand/PayfitAIBrand.js

@@ -0,0 +1,74 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/payfit-ai-brand/PayfitAIBrand.tsx
+var i = t({
+	slots: {
+		root: "uy:inline-flex",
+		circle: "",
+		asterisk: ""
+	},
+	variants: { appearance: {
+		color: {
+			root: ["uy:[filter:drop-shadow(0_0.586667px_1.466667px_rgb(0_0_0_/_0.14))_drop-shadow(0_0_0.293334px_rgb(0_0_0_/_0.3))]"],
+			circle: ["uy:fill-grayscale-l0"],
+			asterisk: ["uy:fill-[url(#payfit-ai-gradient)]"]
+		},
+		grayscale: {
+			circle: ["uy:fill-surface-neutral-disabled"],
+			asterisk: ["uy:fill-content-neutral-disabled"]
+		}
+	} }
+}), a = e(({ appearance: e = "color", className: t, size: a = 28, ...o }, s) => {
+	let c = o["aria-hidden"] === !0 || o["aria-hidden"] === "true", { root: l, circle: u, asterisk: d } = i({ appearance: e });
+	return /* @__PURE__ */ n("span", {
+		className: l(),
+		children: /* @__PURE__ */ r("svg", {
+			...o,
+			className: t,
+			ref: s,
+			"aria-hidden": o["aria-hidden"],
+			"aria-label": c ? void 0 : o["aria-label"] ?? "Payfit AI",
+			fill: "none",
+			height: a,
+			role: c ? void 0 : o.role ?? "img",
+			viewBox: "0 0 160 160",
+			width: a,
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ n("rect", {
+					width: "160",
+					height: "160",
+					rx: "80",
+					className: u()
+				}),
+				/* @__PURE__ */ n("path", {
+					d: "M79.9999 40C81.9653 40 83.8309 40.7225 85.1534 42.0085C86.4741 43.2944 87.1759 45.0386 86.9214 46.8571C86.7676 47.9619 86.6214 49.0667 86.483 50.1714C85.6137 57.1091 85.048 64.0467 84.7853 70.9843C84.7715 71.3499 85.1756 71.5811 85.4883 71.3864C91.4215 67.6922 97.2034 63.7381 102.833 59.5234C103.73 58.8523 104.623 58.1745 105.511 57.4902C106.974 56.3625 108.849 56.0925 110.634 56.5826C112.419 57.0743 113.984 58.3137 114.966 60C115.949 61.6863 116.25 63.6482 115.787 65.4259C115.324 67.2019 114.15 68.676 112.433 69.367C111.39 69.7874 110.351 70.2144 109.316 70.648C102.817 73.371 96.4695 76.3545 90.2735 79.5979C89.947 79.7688 89.947 80.2312 90.2735 80.4021C96.4695 83.6455 102.817 86.629 109.316 89.352C110.351 89.7856 111.39 90.2126 112.433 90.633C114.15 91.324 115.324 92.7981 115.787 94.5741C116.25 96.3518 115.949 98.3137 114.966 100C113.984 101.686 112.419 102.926 110.634 103.417C108.849 103.907 106.974 103.637 105.511 102.51C104.623 101.825 103.73 101.148 102.833 100.477C97.2033 96.2619 91.4216 92.3076 85.4883 88.6134C85.1756 88.4187 84.7715 88.6499 84.7853 89.0155C85.048 95.9532 85.6137 102.891 86.483 109.829C86.6214 110.933 86.7676 112.038 86.9214 113.143C87.1759 114.961 86.4741 116.706 85.1534 117.992C83.8309 119.277 81.9653 120 79.9999 120C78.0345 120 76.1689 119.277 74.8464 117.992C73.5257 116.706 72.8238 114.961 73.0783 113.143C73.2322 112.038 73.3784 110.933 73.5168 109.829C74.3861 102.891 74.9518 95.9532 75.2145 89.0155C75.2283 88.6499 74.8242 88.4187 74.5115 88.6134C68.5783 92.3076 62.7966 96.2619 57.1667 100.477C56.2702 101.148 55.3774 101.825 54.4886 102.51C53.0262 103.637 51.1506 103.907 49.3662 103.417C47.5808 102.926 46.0164 101.686 45.0337 100C44.051 98.3137 43.7498 96.3518 44.2127 94.5741C44.6765 92.7981 45.8501 91.324 47.5671 90.633C48.6097 90.2126 49.6486 89.7856 50.6836 89.352C57.1829 86.629 63.5303 83.6455 69.7263 80.4021C70.0528 80.2312 70.0528 79.7688 69.7263 79.5979C63.5303 76.3545 57.1829 73.371 50.6836 70.648C49.6486 70.2144 48.6097 69.7874 47.5671 69.367C45.8501 68.676 44.6765 67.2019 44.2127 65.4259C43.7498 63.6482 44.051 61.6863 45.0337 60C46.0164 58.3137 47.5808 57.0743 49.3662 56.5826C51.1506 56.0925 53.0262 56.3626 54.4886 57.4902C55.3774 58.1745 56.2702 58.8523 57.1667 59.5234C62.7966 63.7381 68.5783 67.6922 74.5115 71.3864C74.8242 71.5811 75.2283 71.3499 75.2145 70.9843C74.9518 64.0467 74.3861 57.1091 73.5168 50.1714C73.3784 49.0667 73.2322 47.9619 73.0783 46.8571C72.8238 45.0386 73.5257 43.2944 74.8464 42.0085C76.1689 40.7225 78.0345 40 79.9999 40Z",
+					className: d()
+				}),
+				/* @__PURE__ */ n("defs", { children: /* @__PURE__ */ r("linearGradient", {
+					id: "payfit-ai-gradient",
+					x1: "44",
+					y1: "80.2797",
+					x2: "103.763",
+					y2: "53.2366",
+					gradientUnits: "userSpaceOnUse",
+					children: [
+						/* @__PURE__ */ n("stop", { stopColor: "#F5DD71" }),
+						/* @__PURE__ */ n("stop", {
+							offset: "0.5",
+							stopColor: "#FF7AFF"
+						}),
+						/* @__PURE__ */ n("stop", {
+							offset: "1",
+							stopColor: "#9FDFF9"
+						})
+					]
+				}) })
+			]
+		})
+	});
+});
+a.displayName = "PayfitAIBrand";
+//#endregion
+export { a as PayfitAIBrand };

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

@@ -1,2 +1,4 @@
 export { AIButton, type AIButtonProps } from './components/ai-button/AIButton.js';
+export { PayfitAIBrand, type PayfitAIBrandProps, } from './components/payfit-ai-brand/PayfitAIBrand.js';
+export { AITriggerButton, type AITriggerButtonBrandSlotProps, type AITriggerButtonProps, } from './components/ai-trigger-button/AITriggerButton.js';
 export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';

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

@@ -1,77 +1,141 @@
 /**
- * Adds the animated PayFit AI gradient treatment to an enabled interactive
- * host without requiring decorative markup.
- *
- * The host must be `uy:relative`, `uy:isolate`, and `uy:group`; its opaque
- * surface must be layered above the pseudo-elements. Set
- * `--uy-ai-gradient-effect-surface-radius` to the surface's actual corner
- * radius. This utility expands that radius for its layers so their curvature
- * stays aligned when they extend outside the surface.
- *
- * `::before` is the low-opacity, blurred glow. It extends by `spacing-100`
- * around the host and becomes visible on hover and focus-visible. `::after`
- * is the sharp gradient border: outlined controls show a resting border,
- * hover and focus-visible expand it to 2px, and pressed contracts it to 1px.
- * Both layers read `--uy-ai-gradient-angle`; the `gradient-rotate` animation
- * updates that typed custom property, so the gradient continues rotating when
- * a hover or focus-visible interaction becomes pressed.
- *
- * Apply this utility only while the host is enabled. Disabled and loading
- * controls must provide their own non-animated border and surface tokens.
- * Pair it with {@link aiGradientSurfaceEffect} on the opaque surface for the
- * 6% interior overlay.
+ * @summary
+ * Applies the Payfit AI gradient border effect to an enabled interactive 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.
+ * @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`.
+ * @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.
+ * - 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.
+ * @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
+ *   visible gradient border width. It accepts a CSS length such as `1px` and
+ *   defaults to `1px`.
+ * - `--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%`.
+ * @returns Tailwind classes to apply to the interactive host.
  * @example
  * ```tsx
- * const aiAction = uyTv({
- *   base: [
- *     'uy:relative uy:isolate uy:group uy:border-2 uy:border-transparent',
- *     'uy:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-75)]',
- *   ],
- *   compoundVariants: [
- *     {
- *       isDisabled: false,
- *       className: aiGradientEffect({ variant: 'outlined' }),
- *     },
- *   ],
+ * const myComponentStyles = uyTv({
+ *   slots: {
+ *     host: [
+ *       'uy:rounded-75',
+ *       'uy:bg-surface-neutral',
+ *       'uy:[--uy-ai-gradient-border-width:2px]',
+ *       aiGradientEffect({
+ *         gradient: 'linear',
+ *         variant: 'outlined',
+ *         glow: true,
+ *       }),
+ *     ],
+ *     surface: [aiGradientSurfaceEffect()],
+ *     content: ['uy:text-content-neutral'],
+ *   },
  * })
  *
- * const aiActionSurface = uyTv({
- *   base: [
- *     'uy:absolute uy:z-10 uy:rounded-[var(--uy-ai-gradient-effect-surface-radius)]',
- *     'uy:bg-surface-neutral',
- *   ],
- *   compoundVariants: [
- *     {
- *       isDisabled: false,
- *       className: aiGradientSurfaceEffect(),
- *     },
- *   ],
- * })
+ * function Mycomponent() {
+ *   console styles = myComponentStyles()
+ *   return (
+ *     <button className={styles.host()}>
+ *       <span aria-hidden="true" className={styles.surface()} />
+ *       <span className={styles.content()}>Ask AI</span>
+ *     </button>
+ *   )
+ * }
  * ```
  */
 export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<{
+    gradient: {
+        linear: string[];
+        radial: string[];
+        conic: string[];
+    };
     variant: {
-        outlined: "uy:after:opacity-100";
-        ghost: "";
+        outlined: "uy:supports-mask-border:before:opacity-100";
+        ghost: string[];
+    };
+    glow: {
+        true: string[];
+        false: never[];
     };
 }, undefined, string[], {
+    gradient: {
+        linear: string[];
+        radial: string[];
+        conic: string[];
+    };
     variant: {
-        outlined: "uy:after:opacity-100";
-        ghost: "";
+        outlined: "uy:supports-mask-border:before:opacity-100";
+        ghost: string[];
+    };
+    glow: {
+        true: string[];
+        false: never[];
     };
 }, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    gradient: {
+        linear: string[];
+        radial: string[];
+        conic: string[];
+    };
     variant: {
-        outlined: "uy:after:opacity-100";
-        ghost: "";
+        outlined: "uy:supports-mask-border:before:opacity-100";
+        ghost: string[];
+    };
+    glow: {
+        true: string[];
+        false: never[];
     };
 }, undefined>>;
 /**
- * Adds the 6% PayFit AI gradient overlay for hovered, active, and pressed
- * states of an enabled surface.
- *
- * Apply it to the opaque surface layered above {@link aiGradientEffect}. It
- * deliberately does not set a resting or disabled background: the consuming
- * component owns those surface tokens and must only apply this utility while
- * enabled.
+ * 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.
+ * @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.
+ * - Mark the element `aria-hidden` because it is purely decorative.
+ * @returns Tailwind classes to apply to the decorative surface element.
+ * @example
+ * ```tsx
+ * <button className={styles.host()}>
+ *   <span aria-hidden="true" className={styles.surface()} />
+ *   <span className={styles.content()}>Ask AI</span>
+ * </button>
+ * ```
  */
 export declare const aiGradientSurfaceEffect: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;

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

@@ -2,24 +2,84 @@ import { uyTv as e } from "@payfit/unity-themes";
 //#region src/modules/ai-kit/utils/ai-gradient-effect.ts
 var t = e({
 	base: [
-		"uy:[--uy-ai-gradient-angle:45deg] uy:transition-all",
-		"uy:before:content-[''] uy:before:pointer-events-none uy:before:absolute uy:before:-inset-100 uy:before:z-0 uy:before:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+var(--uy-spacing-100))] uy:before:opacity-0 uy:before:blur-sm uy:before:[background:linear-gradient(var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))]",
-		"uy:after:content-[''] uy:after:pointer-events-none uy:after:absolute uy:after:-inset-[2px] uy:after:z-0 uy:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+1px)] uy:after:opacity-0 uy:after:[background:linear-gradient(var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))]",
-		"uy:motion-safe:enabled:data-[hovered=\"true\"]:animate-gradient-rotate uy:motion-safe:enabled:data-[focus-visible=\"true\"]:animate-gradient-rotate",
-		"uy:enabled:data-[hovered=\"true\"]:before:opacity-10 uy:enabled:data-[focus-visible=\"true\"]:before:opacity-10",
-		"uy:enabled:data-[hovered=\"true\"]:after:opacity-100 uy:enabled:data-[focus-visible=\"true\"]:after:opacity-100 uy:enabled:data-[pressed=\"true\"]:after:opacity-100",
-		"uy:enabled:data-[pressed=\"true\"]:after:-inset-px",
-		"uy:enabled:data-[hovered=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)] uy:enabled:data-[pressed=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)] uy:enabled:data-[focus-visible=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)]"
+		"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]"
 	],
-	variants: { variant: {
-		outlined: "uy:after:opacity-100",
-		ghost: ""
-	} },
-	defaultVariants: { variant: "outlined" }
-}), n = e({ base: [
-	"uy:group-data-[hovered=\"true\"]:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]",
-	"uy:group-active:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]",
-	"uy:group-data-[pressed=\"true\"]:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]"
-] });
+	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"
+			]
+		},
+		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"
+			],
+			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(".") });
 //#endregion
 export { t as aiGradientEffect, n as aiGradientSurfaceEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -77,7 +77,7 @@
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.0.3",
+    "@payfit/unity-illustrations": "3.1.0",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -111,8 +111,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "3.0.3",
-    "@payfit/unity-themes": "3.0.3",
+    "@payfit/unity-icons": "3.1.0",
+    "@payfit/unity-themes": "3.1.0",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -131,9 +131,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.0.3",
-    "@payfit/unity-illustrations": "3.0.3",
-    "@payfit/unity-themes": "3.0.3",
+    "@payfit/unity-icons": "3.1.0",
+    "@payfit/unity-illustrations": "3.1.0",
+    "@payfit/unity-themes": "3.1.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",