@payfit/unity-components/dist/esm/modules/ai-kit/utils/ai-gradient-effect.d.ts

/**
 * @summary
 * 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 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 {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. 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 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` 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
 * const myComponentStyles = uyTv({
 *   slots: {
 *     host: [
 *       'uy:rounded-75',
 *       'uy:bg-surface-neutral',
 *       'uy:[--uy-ai-gradient-border-width:2px]',
 *       aiGradientEffect({
 *         gradient: 'linear',
 *         glow: true,
 *       }),
 *     ],
 *     surface: [aiGradientSurfaceEffect()],
 *     content: ['uy:text-content-neutral'],
 *   },
 * })
 *
 * 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[];
    };
    glow: {
        true: string[];
        false: never[];
    };
}, undefined, string[], {
    gradient: {
        linear: string[];
        radial: string[];
        conic: string[];
    };
    glow: {
        true: string[];
        false: never[];
    };
}, undefined, import('tailwind-variants').TVReturnTypeLike<{
    gradient: {
        linear: string[];
        radial: string[];
        conic: string[];
    };
    glow: {
        true: string[];
        false: never[];
    };
}, undefined>>;
/**
 * 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 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
 * - 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
 * ```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>>;