'use client';


import { PressableSpan } from "../PressableSpan/PressableSpan.mjs";
import { jsx } from "react/jsx-runtime";

//#region src/components/ContentSelector/ContentSelector.tsx
/**
* ContentSelector - A higher-level wrapper around PressableSpan for content selection
*
* This component provides a semantic interface for making any content selectable through
* long press gestures. It's specifically designed for content management interfaces
* where users need to select text, images, or other elements to perform actions like
* editing, moving, or applying operations.
*
* ## Key Features
* - **Content Selection**: Makes any React content selectable via long press
* - **Visual Feedback**: Inherits outline-based selection indicators from PressableSpan
* - **Accessibility**: Full keyboard navigation and screen reader support
* - **Click Outside**: Automatic deselection when clicking elsewhere
* - **External Control**: Can be controlled externally for complex selection states
*
* ## Use Cases
* - Content management systems with inline editing
* - Text and media selection interfaces
* - Interactive documentation with selectable sections
* - Dashboard widgets with configurable content
* - Form builders with selectable form elements
*
* ## Accessibility
* - Inherits all accessibility features from PressableSpan
* - Keyboard navigation with Tab, Enter, Space, and Escape
* - Screen reader announcements for selection states
* - Focus management and proper ARIA attributes
*
* @example
* Basic content selection:
* ```tsx
* <ContentSelector onSelect={() => setIsEditing(true)}>
*   <p>This paragraph becomes selectable</p>
* </ContentSelector>
* ```
*
* @example
* With deselection handling:
* ```tsx
* <ContentSelector
*   onSelect={() => setSelectedContent(contentId)}
*   onUnselect={() => setSelectedContent(null)}
* >
*   <div className="content-block">
*     <h2>Selectable Content Block</h2>
*     <p>Long press to select this entire block</p>
*   </div>
* </ContentSelector>
* ```
*
* @example
* Controlled selection state:
* ```tsx
* <ContentSelector
*   isSelecting={selectedItems.includes(itemId)}
*   onSelect={() => selectItem(itemId)}
*   onUnselect={() => deselectItem(itemId)}
* >
*   <ContentCard data={cardData} />
* </ContentSelector>
* ```
*/
const ContentSelector = ({ children, onSelect, onUnselect, isSelecting, pressDuration, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }) => /* @__PURE__ */ jsx(PressableSpan, {
	onPress: onSelect,
	onClickOutside: onUnselect,
	isSelecting,
	pressDuration,
	className,
	"aria-label": ariaLabel,
	"aria-describedby": ariaDescribedBy,
	children
});

//#endregion
export { ContentSelector };
//# sourceMappingURL=ContentSelector.mjs.map