UNPKG

@payfit/unity-components

Version:

78 lines (77 loc) 2.94 kB
/** * 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. * @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 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(), * }, * ], * }) * ``` */ export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<{ variant: { outlined: "uy:after:opacity-100"; ghost: ""; }; }, undefined, string[], { variant: { outlined: "uy:after:opacity-100"; ghost: ""; }; }, undefined, import('tailwind-variants').TVReturnTypeLike<{ variant: { outlined: "uy:after:opacity-100"; ghost: ""; }; }, 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. */ export declare const aiGradientSurfaceEffect: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;