@payfit/unity-components
Version:
199 lines (198 loc) • 6.65 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { PropsWithChildren } from 'react';
import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
/**
* Defines the visual states shared by `AIButton` instances.
*
* Render `AIButton` instead of applying these classes directly so the surface,
* loading, disabled, and accessibility behavior stay synchronized.
*/
export declare const aiButton: import('tailwind-variants').TVReturnType<{
variant: {
outlined: string[];
ghost: string[];
};
isDisabled: {
true: string[];
};
}, undefined, string[], {
isDisabled: {
true: "uy:disabled:cursor-not-allowed";
false: "";
};
isLoading: {
true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
false: "";
};
size: {
default: "uy:w-auto uy:grow-0 uy:basis-auto";
full: "uy:grow-1 uy:w-full uy:basis-full";
};
mode: {
default: string[];
compact: string[];
};
}, undefined, import('tailwind-variants').TVReturnType<{
isDisabled: {
true: "uy:disabled:cursor-not-allowed";
false: "";
};
isLoading: {
true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
false: "";
};
size: {
default: "uy:w-auto uy:grow-0 uy:basis-auto";
full: "uy:grow-1 uy:w-full uy:basis-full";
};
mode: {
default: string[];
compact: string[];
};
}, undefined, string[], {
isDisabled: {
true: "uy:disabled:cursor-not-allowed";
false: "";
};
isLoading: {
true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
false: "";
};
size: {
default: "uy:w-auto uy:grow-0 uy:basis-auto";
full: "uy:grow-1 uy:w-full uy:basis-full";
};
mode: {
default: string[];
compact: string[];
};
}, undefined, import('tailwind-variants').TVReturnTypeLike<{
isDisabled: {
true: "uy:disabled:cursor-not-allowed";
false: "";
};
isLoading: {
true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
false: "";
};
size: {
default: "uy:w-auto uy:grow-0 uy:basis-auto";
full: "uy:grow-1 uy:w-full uy:basis-full";
};
mode: {
default: string[];
compact: string[];
};
}, undefined>>>;
/**
* Configures an AI-assisted action and inherits standard React Aria button
* behavior such as `onPress`, `isDisabled`, and `type`.
*/
export type AIButtonProps = PropsWithChildren<Omit<AriaButtonProps, 'children' | 'className' | 'style'> & {
/**
* Selects the AI button appearance.
* - `outlined` keeps a visible AI gradient border while idle.
* - `ghost` reveals the AI treatment during interaction.
* @default 'outlined'
*/
variant?: 'outlined' | 'ghost';
/**
* Controls the button density.
* - `default` uses the standard action size.
* - `compact` uses the dense action size.
* @default 'default'
*/
mode?: 'default' | 'compact';
/**
* Shows a spinner and disables the action while it is in progress.
* The label remains visible to preserve the button's accessible name.
* @default false
*/
isLoading?: boolean;
/**
* Sets the accessible label announced by the loading spinner.
* @default The translated Unity loading label.
*/
loadingLabel?: string;
/** Renders a Unity icon before the label. */
prefixIcon?: UnityIcon;
/** Renders a Unity icon after the label. */
suffixIcon?: UnityIcon;
/**
* Truncates the visible label after the specified number of characters.
* The complete label remains available to assistive technology.
*/
truncateLabelLength?: number;
}>;
/**
* Triggers an AI-assisted action with Unity's dedicated visual language.
*
* Use `AIButton` for agentic actions such as drafting, rewriting, or
* summarizing. Pass `variant="outlined"` for a persistent gradient border or
* `variant="ghost"` for a quieter resting treatment. Use `isLoading` while an
* action runs; it disables the button, displays a spinner, and keeps the
* label visible.
* @param props - React Aria button props and AI Button presentation options.
* @see {@link AIButtonProps} for the available appearance, loading, icon, and
* truncation options.
* @example
* ```tsx
* import { AIButton } from '@payfit/unity-components/ai-kit'
*
* export function DraftContractButton() {
* return (
* <AIButton
* onPress={() => undefined}
* prefixIcon="AIEditOutlined"
* variant="outlined"
* >
* Draft with AI
* </AIButton>
* )
* }
* ```
* @remarks
* - `AIButton` renders a native button through React Aria. It supports pointer,
* Enter, and Space activation. Prefix and suffix icons are decorative; use
* the text label to provide the accessible name.
* - `AIButton` applies a glowing, rotating gradient effect on hover and focus.
* For users with reduced motion activated, the rotation is disabled.
*/
export declare const AIButton: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "style" | "children" | "className"> & {
/**
* Selects the AI button appearance.
* - `outlined` keeps a visible AI gradient border while idle.
* - `ghost` reveals the AI treatment during interaction.
* @default 'outlined'
*/
variant?: "outlined" | "ghost";
/**
* Controls the button density.
* - `default` uses the standard action size.
* - `compact` uses the dense action size.
* @default 'default'
*/
mode?: "default" | "compact";
/**
* Shows a spinner and disables the action while it is in progress.
* The label remains visible to preserve the button's accessible name.
* @default false
*/
isLoading?: boolean;
/**
* Sets the accessible label announced by the loading spinner.
* @default The translated Unity loading label.
*/
loadingLabel?: string;
/** Renders a Unity icon before the label. */
prefixIcon?: UnityIcon;
/** Renders a Unity icon after the label. */
suffixIcon?: UnityIcon;
/**
* Truncates the visible label after the specified number of characters.
* The complete label remains available to assistive technology.
*/
truncateLabelLength?: number;
} & {
children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLButtonElement>>;