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

/**
 * @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 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'],
 *   },
 * })
 *
 * 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: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: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:supports-mask-border:before:opacity-100";
        ghost: 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 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>>;