@payfit/unity-components/dist/esm/components/actionable/Actionable.d.ts

import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
export interface ActionableProps extends AriaButtonProps {
    /** Additional class names to apply to the actionable */
    className?: string;
    /** set to true to remove the Actionable's base styles */
    isUnstyled?: boolean;
    /** The HTML element to render the actionable as. */
    asElement?: 'span' | 'div' | 'button';
}
/**
 * Actionable primitive creates interactive surfaces that behave like buttons while allowing complete control over appearance and content.
 * Use this component when you need to build complex interactive elements that require custom styling or dynamic content based on interaction states, and when standard Unity button components are insufficient for your use case.
 * @param {ActionableProps} props - Button behavior props from React Aria, plus styling and element configuration
 * @example
 * ```tsx
 * // Basic usage with custom styling
 * import { Actionable } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Actionable
 *       className="uy:p-100 uy:rounded-100 uy:border uy:border-border-neutral uy:hover:bg-surface-neutral-hover"
 *       onPress={() => console.log('Pressed!')}
 *     >
 *       Click me
 *     </Actionable>
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * // Dynamic content based on interaction state
 * import { Actionable, Icon } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Actionable asElement="button" className="uy:p-100 uy:flex uy:items-center uy:gap-100">
 *       {({ isHovered, isPressed }) => (
 *         <>
 *           <Icon src={isHovered || isPressed ? 'CakeFilled' : 'CakeOutlined'} />
 *           <span>Interactive content</span>
 *         </>
 *       )}
 *     </Actionable>
 *   )
 * }
 * ```
 * @remarks
 * - Provides button-like interaction behavior using React Aria hooks for accessibility
 * - Supports rendering as `div`, `span`, or `button` elements via the `asElement` prop
 * - Includes built-in state management for hover, focus, and press interactions
 * - Automatically applies appropriate ARIA attributes and keyboard navigation
 * - Supports both static children and render prop pattern for dynamic content
 * - Use data attributes (`data-hovered`, `data-pressed`, `data-focused`, `data-disabled`, `data-focus-visible`) for styling non-button elements
 * - Marked as `uy:group` for styling child elements based on parent state
 * @see {@link ActionableProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/actionable GitHub}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}
 */
declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLSpanElement | HTMLButtonElement | HTMLDivElement>>;
export { Actionable };