import { FC, HTMLAttributes } from "react";

//#region src/components/PressableSpan/PressableSpan.d.ts

/**
 * Props for the PressableSpan component
 */
type PressableSpanProps = {
  /**
   * Callback function triggered when a long press is detected
   * @example
   * ```tsx
   * <PressableSpan onPress={() => console.log('Long pressed!')}>
   *   Press and hold me
   * </PressableSpan>
   * ```
   */
  onPress: () => void;
  /**
   * Optional callback function triggered when clicking outside the component while it's in selecting state
   * @example
   * ```tsx
   * <PressableSpan
   *   onPress={() => setIsEditing(true)}
   *   onClickOutside={() => setIsEditing(false)}
   * >
   *   Click outside to deselect
   * </PressableSpan>
   * ```
   */
  onClickOutside?: () => void;
  /**
   * Duration in milliseconds for long press detection
   * @default 400
   * @example
   * ```tsx
   * <PressableSpan pressDuration={800} onPress={() => {}}>
   *   Longer press required
   * </PressableSpan>
   * ```
   */
  pressDuration?: number;
  /**
   * External control for the selecting state
   * @example
   * ```tsx
   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>
   *   Externally controlled
   * </PressableSpan>
   * ```
   */
  isSelecting?: boolean;
} & HTMLAttributes<HTMLSpanElement>;
/**
 * PressableSpan - An interactive span element that responds to long press gestures
 *
 * A versatile component that detects long press interactions and provides visual feedback.
 * Commonly used for text editing interfaces, selection systems, and interactive content
 * that requires differentiation between quick clicks and intentional long presses.
 *
 * ## Key Features
 * - **Long Press Detection**: Configurable press duration for different interaction patterns
 * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states
 * - **Click Outside Detection**: Automatically deselects when clicking outside the component
 * - **Touch Support**: Works seamlessly on both desktop and mobile devices
 * - **Accessible**: Keyboard navigation support and proper ARIA attributes
 *
 * ## Use Cases
 * - Text editing interfaces where long press activates edit mode
 * - Content selection systems with visual feedback
 * - Interactive cards or elements that need press-and-hold activation
 * - Mobile-friendly interfaces requiring long press gestures
 *
 * ## Accessibility
 * - Uses semantic `role="button"` for proper screen reader announcement
 * - Keyboard navigable with `tabIndex={0}`
 * - Focus management with proper blur handling
 * - Visual outline indicators for focus and selection states
 *
 * @example
 * Basic usage with long press detection:
 * ```tsx
 * <PressableSpan onPress={() => setIsEditing(true)}>
 *   Press and hold to edit this text
 * </PressableSpan>
 * ```
 *
 * @example
 * With custom press duration and click outside handling:
 * ```tsx
 * <PressableSpan
 *   pressDuration={600}
 *   onPress={() => setIsEditing(true)}
 *   onClickOutside={() => setIsEditing(false)}
 *   isSelecting={isEditing}
 * >
 *   Custom behavior configuration
 * </PressableSpan>
 * ```
 *
 * @example
 * In a content editing context:
 * ```tsx
 * <PressableSpan
 *   onPress={() => startEditingContent(contentId)}
 *   onClickOutside={() => saveAndExitEditing()}
 *   className="prose-text"
 * >
 *   {editableContent}
 * </PressableSpan>
 * ```
 */
declare const PressableSpan: FC<PressableSpanProps>;
//#endregion
export { PressableSpan };
//# sourceMappingURL=PressableSpan.d.ts.map