@bento/listbox 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -0,0 +1,715 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Collection as AriaCollection, CollectionBuilder, createBranchComponent, createLeafComponent } from "@react-aria/collections";
+import { useProps } from "@bento/use-props";
+import { withSlots } from "@bento/slots";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption } from "react-aria";
+import { useDataAttributes } from "@bento/use-data-attributes";
+import { useListState } from "react-stately";
+import { CollectionRendererContext } from "react-aria-components";
+//#region src/header.tsx
+/**
+* React context for providing header-related attributes and refs to Header components.
+* Used internally by ListBoxSection to pass heading props to Header elements.
+* @public
+*/
+const HeaderContext = createContext({});
+/**
+* Internal implementation of the BentoHeader component with slots support.
+* This component handles prop processing and context integration.
+* It merges props from useProps and HeaderContext while preserving styling props.
+*
+* @internal
+*/
+const BentoHeaderImpl = withSlots("BentoHeader", function BentoHeader(...args) {
+	const [props, ref] = args;
+	const { props: processedProps, apply } = useProps(props);
+	const contextProps = useContext(HeaderContext);
+	const appliedUserProps = apply(processedProps);
+	return /* @__PURE__ */ jsx("header", {
+		...contextProps,
+		...appliedUserProps,
+		ref: contextProps.ref || ref,
+		children: processedProps.children
+	});
+});
+/**
+* Wrapper component that connects the BentoHeaderImpl to React Aria's collection system.
+* This function serves as an adapter between the createLeafComponent system and
+* the internal BentoHeaderImpl component, ensuring proper prop forwarding and ref handling.
+*
+* @param {HeaderProps} props - Header component props
+* @param {React.ReactNode} [props.children] - React children to render inside the header
+* @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element
+* @returns {React.ReactElement} The BentoHeaderImpl component with forwarded props and ref
+* @internal
+*/
+function HeaderWrapper(props, ref) {
+	return /* @__PURE__ */ jsx(BentoHeaderImpl, {
+		...props,
+		ref
+	});
+}
+/**
+* A Header component for section headings within a ListBox.
+* Provides semantic header structure with proper accessibility attributes
+* and integrates with React Aria's collection system for automatic handling.
+*
+* This is the main public interface for creating headers in ListBox sections.
+* It automatically receives heading props from the parent ListBoxSection via HeaderContext.
+*
+* @component
+* @example
+* ```tsx
+* <ListBoxSection>
+*   <Header>Fruits</Header>
+*   <ListBoxItem>Apple</ListBoxItem>
+*   <ListBoxItem>Banana</ListBoxItem>
+* </ListBoxSection>
+* ```
+* @public
+*/
+const Header = createLeafComponent("header", HeaderWrapper);
+//#endregion
+//#region src/listbox-section.tsx
+/**
+* Internal implementation of the BentoListBoxSection component with slots support.
+* This component handles the core logic for rendering a section within a ListBox,
+* including title rendering, accessibility attributes, and child content management.
+* It integrates with React Aria's useListBoxSection hook for proper ARIA compliance.
+*
+* @internal
+*/
+const BentoListBoxSectionImpl = withSlots("BentoListBoxSection", function BentoListBoxSectionImpl(...restArgs) {
+	const [{ __node, children, title: titleProp, ...rest }, ref] = restArgs;
+	const { props, apply } = useProps(rest);
+	const data = useDataAttributes({ level: __node?.level });
+	const headingRef = useRef(null);
+	const title = titleProp ?? props.title ?? __node?.rendered;
+	const { groupProps, headingProps } = useListBoxSection({
+		heading: title,
+		"aria-label": props["aria-label"]
+	});
+	const composed = mergeProps(apply({
+		...data,
+		...props
+	}, [
+		"children",
+		"title",
+		"slot"
+	]), groupProps);
+	const sectionContent = children || props.children;
+	return /* @__PURE__ */ jsx("section", {
+		...composed,
+		ref,
+		children: /* @__PURE__ */ jsxs(HeaderContext.Provider, {
+			value: {
+				...headingProps,
+				ref: headingRef
+			},
+			children: [title && /* @__PURE__ */ jsx("div", {
+				...headingProps,
+				children: title
+			}), sectionContent]
+		})
+	});
+});
+/**
+* Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.
+* This function serves as an adapter between createBranchComponent and the internal
+* BentoListBoxSectionImpl, ensuring proper prop forwarding and node injection for sections.
+*
+* @template T - The type of the section node data
+* @param {ListBoxSectionProps} props - ListBoxSection component props
+* @param {string} [props.slot] - Slot name for Bento's slot system
+* @param {React.ReactNode} [props.title] - Title for the section
+* @param {React.ReactNode} [props.children] - Children to render in the section
+* @param {string} [props.aria-label] - ARIA label for accessibility
+* @param {React.ForwardedRef<HTMLElement>} ref - Ref forwarded from the collection system
+* @param {Node<T>} section - React Aria node containing section metadata and collection info
+* @returns {React.ReactElement} The BentoListBoxSectionImpl component with proper node and ref wiring
+* @internal
+*/
+/* v8 ignore start */
+function ListBoxSectionWrapper(props, ref, section) {
+	return /* @__PURE__ */ jsx(BentoListBoxSectionImpl, {
+		...props,
+		__node: section,
+		ref
+	});
+}
+/* v8 ignore stop */
+/**
+* Base ListBoxSection component created through React Aria's collection system.
+* This handles the connection to the parent ListBox's collection state and
+* manages the branch structure for nested items.
+* @internal
+*/
+const ListBoxSectionBase = createBranchComponent("section", ListBoxSectionWrapper);
+/**
+* Internal component for rendering dynamic collection sections.
+* This component is used specifically for sections that are part of a dynamic collection,
+* connecting to the ListStateContext and CollectionRendererContext to properly render
+* nested items through React Aria's collection system.
+*
+* @component
+* @param {object} props - The component props containing the section node
+* @param {Node<unknown>} props.section - The React Aria node representing this section in the collection
+* @throws {BentoError} Throws an error if used outside of a ListBox context
+* @returns {React.ReactElement} JSX element representing a dynamically rendered listbox section
+* @internal
+*/
+const ListBoxSectionInner = function ListBoxSectionInner({ section }) {
+	const state = useContext(ListStateContext);
+	const { CollectionBranch } = useContext(CollectionRendererContext);
+	return /* @__PURE__ */ jsx(BentoListBoxSectionImpl, {
+		...section.props,
+		__node: section,
+		children: CollectionBranch && state?.collection ? /* @__PURE__ */ jsx(CollectionBranch, {
+			collection: state.collection,
+			parent: section
+		}) : null
+	});
+};
+/**
+* A section component for organizing related items within a ListBox.
+*
+* @component
+* @example
+* ```tsx
+* <ListBoxSection title="Fruits">
+*   <ListBoxItem>Apple</ListBoxItem>
+*   <ListBoxItem>Banana</ListBoxItem>
+* </ListBoxSection>
+* ```
+* @public
+*/
+const ListBoxSection = ListBoxSectionBase;
+//#endregion
+//#region src/utils.ts
+/* v8 ignore next */
+/**
+* NOTE: This utility will be moved to the new use-collection package.
+* Safe wrapper for React Aria's useObjectRef that handles test environments where refs are not extensible.
+*
+* **Critical for Vitest Browser Mode Testing**: When running tests in Vitest's browser mode with Playwright,
+* the test environment can freeze or make objects non-extensible. React Aria's `useObjectRef` attempts to
+* dynamically add properties to ref objects, which fails with "Cannot add property current, object is not extensible"
+* in these constrained test environments.
+*
+* **Technical Details:**
+* - Vitest browser mode uses Playwright's Chrome DevTools Protocol for test execution
+* - The V8 engine's security model can freeze objects during test isolation
+* - React Aria's useObjectRef uses `Object.defineProperty()` to add reactive properties to refs
+* - This conflicts with frozen objects in browser testing scenarios
+*
+* **Why This Solution Works:**
+* - Creates an internal ref that's always mutable (created in our controlled environment)
+* - Safely forwards values to the external ref using try/catch for frozen object scenarios
+* - Maintains the same ref forwarding behavior as React Aria's useObjectRef in normal environments
+* - Gracefully degrades in test environments without breaking functionality
+*
+* **Production Impact**: Zero. Object freezing only occurs in specific test configurations.
+* In production and development, this behaves identically to React Aria's useObjectRef.
+*
+* @template T - The type of the ref element
+* @param {React.ForwardedRef<T>} ref - The forwarded ref to handle safely
+* @returns {React.RefObject<T>} A safe ref object that works in all environments including frozen test contexts
+* @public
+*/
+function useSafeObjectRef(ref) {
+	const internalRef = useRef(null);
+	useEffect(function updateForwardedRef() {
+		const current = internalRef.current;
+		if (typeof ref === "function") ref(current);
+		else if (ref && "current" in ref) try {
+			ref.current = current;
+		} catch {}
+	});
+	return internalRef;
+}
+//#endregion
+//#region src/listbox.tsx
+/**
+* React context for sharing ListBox state across components.
+* This context provides the ListBox state to child components like ListBoxItem and ListBoxSection,
+* enabling them to access selection state, collection data, and other shared functionality.
+*
+* @context
+* @internal
+*/
+const ListStateContext = createContext(null);
+/**
+* Custom hook to manage ListBox state creation and context handling.
+* This hook either uses an existing state from context or creates a new one.
+* It's designed to work both as a standalone component and within a parent component
+* that provides ListBox state through context.
+*
+* @param {Record<string, unknown>} props - Configuration object for the ListBox state
+* @returns {object} An object containing the state instance and context state flag
+* @returns {ListState<unknown>} returns.state - The ListBox state instance
+* @returns {ListState<unknown> | null} returns.contextState - Existing context state, if any
+* @internal
+*/
+function useListBoxState(props) {
+	const contextState = useContext(ListStateContext);
+	const stateProps = {
+		...props,
+		children: void 0,
+		items: void 0
+	};
+	return {
+		state: contextState ?? useListState(stateProps),
+		contextState
+	};
+}
+/**
+* Renders content with optional context provider wrapper.
+* If no context state exists, wraps the content in a ListStateContext.Provider.
+* This allows the ListBox to work both standalone and as part of a larger component tree.
+*
+* @param {React.ReactNode} content - The React content to render
+* @param {ListState<unknown>} state - The ListBox state to provide via context
+* @param {ListState<unknown> | null} contextState - Existing context state, if any
+* @returns {React.ReactNode} The content, optionally wrapped in a context provider
+* @internal
+*/
+function renderWithOptionalContext(content, state, contextState) {
+	/* v8 ignore next */
+	return contextState ? content : /* @__PURE__ */ jsx(ListStateContext.Provider, {
+		value: state,
+		children: content
+	});
+}
+/**
+* Creates and memoizes a keyboard delegate for the ListBox.
+* The keyboard delegate handles keyboard navigation logic, including
+* arrow key navigation, home/end keys, and type-ahead functionality.
+*
+* @param {object} config - Configuration object for the keyboard delegate
+* @param {ListState<unknown>['collection']} config.collection - The collection of items in the ListBox
+* @param {Intl.Collator} config.collator - Intl collator for string comparison in type-ahead
+* @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to the ListBox DOM element
+* @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager from the state
+* @param {'stack' | 'grid'} [config.layout] - Layout mode (stack or grid)
+* @param {Orientation} [config.orientation] - Primary orientation of the items
+* @param {'ltr' | 'rtl'} config.direction - Text direction (ltr or rtl)
+* @param {ListKeyboardDelegate<unknown>} [config.keyboardDelegate] - Custom keyboard delegate to use instead of default
+* @returns {ListKeyboardDelegate<unknown>} A keyboard delegate instance for handling keyboard interactions
+* @internal
+*/
+function useKeyboardDelegate({ collection, collator, listBoxRef, selectionManager, layout, orientation, direction, keyboardDelegate: providedDelegate }) {
+	const { disabledBehavior, disabledKeys } = selectionManager;
+	return useMemo(function createKeyboardDelegate() {
+		return providedDelegate || new ListKeyboardDelegate({
+			collection,
+			collator,
+			ref: listBoxRef,
+			disabledKeys,
+			disabledBehavior,
+			layout,
+			orientation,
+			direction
+		});
+	}, [
+		collection,
+		collator,
+		listBoxRef,
+		selectionManager,
+		orientation,
+		direction,
+		layout,
+		providedDelegate
+	]);
+}
+/**
+* Generates data attributes for the ListBox element based on its current state.
+* These attributes are used for styling selectors and accessibility indicators.
+*
+* @param {object} config - Configuration object containing ListBox state flags
+* @param {boolean} config.isEmpty - Whether the listbox has no items
+* @param {boolean} config.isFocused - Whether the listbox is currently focused
+* @param {boolean} config.isFocusVisible - Whether focus should be visually indicated
+* @param {'stack' | 'grid'} [config.layout] - Layout mode (stack or grid)
+* @param {Orientation} [config.orientation] - Primary orientation of the items
+* @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager containing selection state
+* @param {boolean} [config.allowsTabNavigation] - Whether tab navigation is enabled
+* @param {boolean} [config.shouldFocusWrap] - Whether focus wraps at boundaries
+* @param {SelectionBehavior} [config.originalSelectionBehavior] - Original selection behavior setting
+* @returns {Record<string, unknown>} Object with data attributes for the ListBox element
+* @internal
+*/
+function useListBoxDataAttributes({ isEmpty, isFocused, isFocusVisible, layout, orientation, selectionManager, allowsTabNavigation, shouldFocusWrap, originalSelectionBehavior }) {
+	return useDataAttributes({
+		empty: isEmpty,
+		focused: isFocused,
+		"focus-visible": isFocusVisible,
+		layout,
+		orientation,
+		"selection-mode": selectionManager.selectionMode !== "none" ? selectionManager.selectionMode : void 0,
+		"selection-behavior": originalSelectionBehavior !== void 0 ? selectionManager.selectionBehavior : void 0,
+		"allows-tab-navigation": allowsTabNavigation,
+		"focus-wrap": shouldFocusWrap
+	});
+}
+/**
+* Composes all props for the ListBox element including DOM props, ARIA props,
+* focus props, and data attributes. Handles prop application through useProps
+* and manages ref assignment to avoid proxy extensibility issues.
+*
+* @param {object} config - Configuration object containing all props to compose
+* @param {Record<string, unknown>} config.otherProps - Additional props from the component
+* @param {ListBoxRenderProps} config.renderValues - Values available to render functions
+* @param {Record<string, unknown>} config.listBoxProps - Props from useListBox hook
+* @param {Record<string, unknown>} config.focusProps - Props from useFocusRing hook
+* @param {Record<string, unknown>} config.dataAttributes - Data attributes for styling/selectors
+* @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager for ARIA attributes
+* @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to attach to the final element
+* @returns {Record<string, unknown>} Composed props object ready for the ListBox element
+* @internal
+*/
+function useComposedProps({ otherProps, renderValues, listBoxProps, focusProps, dataAttributes, selectionManager, listBoxRef }) {
+	const { apply } = useProps(otherProps, renderValues);
+	const appliedUserProps = apply(otherProps, [
+		"renderEmptyState",
+		"selectionMode",
+		"defaultSelectedKeys",
+		"disabledKeys",
+		"disallowEmptySelection",
+		"shouldFocusWrap",
+		"items",
+		"children",
+		"selectionBehavior",
+		"keyboardDelegate"
+	]);
+	return {
+		...mergeProps(listBoxProps, focusProps),
+		...dataAttributes,
+		...selectionManager.selectionMode !== "none" && { "aria-multiselectable": selectionManager.selectionMode === "multiple" },
+		...appliedUserProps,
+		ref: listBoxRef
+	};
+}
+/**
+* Renders the empty state content for the ListBox when no items are present.
+* Handles both function-based render props and direct JSX elements.
+* If a function is provided, calls it with render values; otherwise returns as-is.
+*
+* @param {(props: ListBoxRenderProps) => React.ReactNode} renderEmptyStateFn - Function or JSX element to render for empty state
+* @param {ListBoxRenderProps} renderValues - Current render values to pass to render function
+* @returns {React.ReactNode} Rendered empty state content
+* @internal
+*/
+function renderEmptyState(renderEmptyStateFn, renderValues) {
+	if (typeof renderEmptyStateFn === "function") return renderEmptyStateFn(renderValues);
+	return renderEmptyStateFn;
+}
+/**
+* Renders all items in the collection as React elements.
+* Handles both regular items and section items, using the appropriate
+* components (ListBoxItemImpl for items, ListBoxSectionInner for sections).
+*
+* @param {ListState<unknown>['collection']} collection - The collection of items to render
+* @returns {React.ReactElement[]} Array of rendered React elements for all collection items
+* @internal
+*/
+function renderCollectionItems(collection) {
+	return [...collection].map(function renderCollectionItem(item) {
+		return item.type === "section" ? /* @__PURE__ */ jsx(ListBoxSectionInner, { section: item }, item.key) : /* @__PURE__ */ jsx(ListBoxItemImpl, {
+			__node: item,
+			children: item.rendered
+		}, item.key);
+	});
+}
+/**
+* Determines what content to render inside the ListBox based on its configuration.
+* Handles three cases:
+* 1. Function children without items (Bento render prop pattern with full render props)
+* 2. Empty state when no items and renderEmptyState is provided
+* 3. Normal collection rendering (including items with children functions for React Aria compatibility)
+*
+* @param {object} config - Configuration object for rendering
+* @param {React.ReactNode | ((item: unknown) => React.ReactNode) | ((props: ListBoxRenderProps) => React.ReactNode)} [config.children] - Children prop (static, item render function, or ListBox render prop)
+* @param {Iterable<unknown>} [config.items] - Items array for dynamic collections
+* @param {boolean} config.isEmpty - Whether the collection is empty
+* @param {(props: ListBoxRenderProps) => React.ReactNode} [config.renderEmptyStateProp] - Function to render empty state
+* @param {ListBoxRenderProps} config.renderValues - Current render values for render functions
+* @param {ListState<unknown>['collection']} config.collection - The collection state to render
+* @returns {React.ReactNode} The appropriate content to render inside the ListBox
+* @internal
+*/
+function renderListBoxContent({ children, items, isEmpty, renderEmptyStateProp, renderValues, collection }) {
+	/* v8 ignore next 3 */
+	if (typeof children === "function" && !items) return children(renderValues);
+	if (isEmpty && renderEmptyStateProp) return renderEmptyState(renderEmptyStateProp, renderValues);
+	return renderCollectionItems(collection);
+}
+/**
+* Internal ListBox component that handles the core rendering logic.
+* This component manages all the hooks, state, and prop composition needed
+* for a fully functional ListBox. It's wrapped by the main ListBox component
+* which handles collection building.
+*
+* @param {object} props - Component props
+* @param {ListState<unknown>} props.state - The ListBox state instance
+* @param {(props: ListBoxRenderProps) => React.ReactNode} [props.renderEmptyState] - Function to render when no items are present
+* @param {React.ReactNode | ((item: unknown) => React.ReactNode) | ((props: ListBoxRenderProps) => React.ReactNode)} [props.children] - Static children, item render function, or ListBox render function
+* @param {Iterable<unknown>} [props.items] - Items array for dynamic collections
+* @param {React.RefObject<HTMLDivElement>} props.listBoxRef - Reference to the ListBox DOM element
+* @param {'stack'} [props.layout] - Layout mode (stack or grid)
+* @param {Orientation} [props.orientation] - Primary orientation of the items
+* @param {boolean} [props.shouldSelectOnPressUp] - Whether selection occurs on pointer up
+* @param {ListKeyboardDelegate<unknown>} [props.keyboardDelegate] - Custom keyboard navigation delegate
+* @param {boolean} [props.allowsTabNavigation] - Whether tab key navigates between items
+* @param {boolean} [props.shouldFocusWrap] - Whether focus wraps at boundaries
+* @param {'none' | 'single' | 'multiple'} [props.selectionMode] - Selection mode (none, single, multiple)
+* @param {SelectionBehavior} [props.selectionBehavior] - Selection behavior (toggle, replace)
+* @returns {React.ReactElement} A fully functional ListBox element with focus scope
+* @internal
+*/
+const ListBoxInner = function ListBoxInner({ state, renderEmptyState: renderEmptyStateProp, children, items, listBoxRef, ...otherProps }) {
+	const { layout = "stack", orientation = "vertical", shouldSelectOnPressUp, selectionBehavior } = otherProps;
+	const { collection, selectionManager } = state;
+	const { direction } = useLocale();
+	const keyboardDelegate = useKeyboardDelegate({
+		collection,
+		collator: useCollator({
+			usage: "search",
+			sensitivity: "base"
+		}),
+		listBoxRef,
+		selectionManager,
+		layout,
+		orientation,
+		direction,
+		keyboardDelegate: otherProps.keyboardDelegate
+	});
+	const { listBoxProps } = useListBox({
+		...otherProps,
+		shouldSelectOnPressUp,
+		keyboardDelegate
+	}, state, listBoxRef);
+	const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+	const isEmpty = state.collection.size === 0;
+	const renderValues = {
+		isEmpty,
+		isFocused,
+		isFocusVisible,
+		isDropTarget: false,
+		layout,
+		state,
+		items
+	};
+	return /* @__PURE__ */ jsx(FocusScope, { children: /* @__PURE__ */ jsx("div", {
+		...useComposedProps({
+			otherProps,
+			renderValues,
+			listBoxProps,
+			focusProps,
+			dataAttributes: useListBoxDataAttributes({
+				isEmpty,
+				isFocused,
+				isFocusVisible,
+				layout,
+				orientation,
+				selectionManager,
+				allowsTabNavigation: otherProps.allowsTabNavigation,
+				shouldFocusWrap: otherProps.shouldFocusWrap,
+				originalSelectionBehavior: selectionBehavior
+			}),
+			selectionManager,
+			listBoxRef
+		}),
+		children: renderListBoxContent({
+			children,
+			items,
+			isEmpty,
+			renderEmptyStateProp,
+			renderValues,
+			collection
+		})
+	}) });
+};
+/**
+* A complete ListBox component providing accessible selection lists with keyboard navigation.
+* Supports both static children and dynamic collections, with single/multiple selection modes.
+* Built on React Aria with full ARIA compliance and keyboard accessibility.
+*
+* @component
+* @template T The type of items in the collection
+* @param {ListBoxProps<T>} args - The properties passed to the ListBox component
+* @param {React.ForwardedRef<HTMLDivElement>} ref - The ref to the listbox container
+* @returns {React.ReactElement} A ListBox component
+*
+* @example
+* ```tsx
+* <ListBox aria-label="Fruits" selectionMode="single">
+*   <ListBoxItem id="apple" textValue="Apple">Apple</ListBoxItem>
+*   <ListBoxItem id="banana" textValue="Banana">Banana</ListBoxItem>
+* </ListBox>
+* ```
+* @public
+*/
+function ListBoxComponent(...args) {
+	const [_args, ref] = args;
+	return /* @__PURE__ */ jsx(CollectionBuilder, {
+		content: /* @__PURE__ */ jsx(AriaCollection, { ..._args }),
+		children: function buildCollection(collection) {
+			return /* @__PURE__ */ jsx(StandaloneListBox, {
+				props: _args,
+				listBoxRef: ref,
+				collection
+			});
+		}
+	});
+}
+/**
+* Standalone ListBox component that manages its own state and collection.
+* This component is used internally by the main ListBox component after
+* collection building is complete. It handles prop processing, state creation,
+* and context management.
+*
+* @param {object} props - Component props
+* @param {ListBoxProps<unknown>} props.props - The original ListBox props
+* @param {React.ForwardedRef<HTMLDivElement>} props.listBoxRef - Reference to forward to the ListBox element
+* @param {unknown} props.collection - Built collection from CollectionBuilder
+* @returns {React.ReactElement} A complete ListBox with state management and optional context wrapping
+* @internal
+*/
+const StandaloneListBox = function StandaloneListBox({ props, listBoxRef, collection }) {
+	const originalRenderEmptyState = props.renderEmptyState;
+	const { props: processedProps } = useProps(props);
+	const processedRef = useSafeObjectRef(listBoxRef);
+	const { state, contextState } = useListBoxState({
+		...processedProps,
+		collection
+	});
+	const { renderEmptyState: _, ...cleanProcessedProps } = processedProps;
+	return renderWithOptionalContext(/* @__PURE__ */ jsx(ListBoxInner, {
+		state,
+		listBoxRef: processedRef,
+		renderEmptyState: originalRenderEmptyState,
+		...cleanProcessedProps
+	}), state, contextState);
+};
+/**
+* A complete ListBox component providing accessible selection lists with keyboard navigation.
+* Supports both static children and dynamic collections, with single/multiple selection modes.
+* Built on React Aria with full ARIA compliance and keyboard accessibility.
+*
+* @component
+* @example
+* ```tsx
+* <ListBox aria-label="Fruits" selectionMode="single">
+*   <ListBoxItem id="apple" textValue="Apple">Apple</ListBoxItem>
+*   <ListBoxItem id="banana" textValue="Banana">Banana</ListBoxItem>
+* </ListBox>
+* ```
+* @public
+*/
+const ListBox = withSlots("BentoListBox", ListBoxComponent);
+//#endregion
+//#region src/listbox-item.tsx
+/**
+* Internal context for providing text-related slot attributes to child components.
+* This context allows ListBoxItem to pass label and description attributes
+* to nested components that need them for accessibility.
+* @internal
+*/
+const TextContext = createContext({ slots: {} });
+/**
+* Enhanced ListBoxItem implementation with slots support.
+* This wraps the core ListBoxItemImplComponent with Bento's slot system
+* for advanced composition and styling capabilities.
+* @internal
+*/
+const ListBoxItemImpl = withSlots("BentoListBoxItem", function ListBoxItemImplComponent(...restArgs) {
+	const [{ __node, ...props }, ref] = restArgs;
+	const state = useContext(ListStateContext);
+	const safeRef = useSafeObjectRef(ref);
+	const { optionProps, labelProps, descriptionProps, ...states } = useOption({
+		key: __node.key,
+		"aria-label": props["aria-label"],
+		isDisabled: props.isDisabled
+	}, state, safeRef);
+	const { hoverProps, isHovered } = useHover({
+		isDisabled: states.isDisabled,
+		onHoverStart: props.onHoverStart,
+		onHoverChange: props.onHoverChange,
+		onHoverEnd: props.onHoverEnd
+	});
+	const renderValues = {
+		...states,
+		isHovered,
+		selectionMode: state.selectionManager.selectionMode,
+		selectionBehavior: state.selectionManager.selectionBehavior
+	};
+	const content = typeof props.children === "function" ? props.children(renderValues) : props.children;
+	const { apply } = useProps(props, renderValues);
+	const dataAttributes = useDataAttributes({
+		selected: states.isSelected,
+		disabled: states.isDisabled,
+		hovered: isHovered,
+		focused: states.isFocused,
+		"focus-visible": states.isFocusVisible,
+		pressed: states.isPressed,
+		level: __node.level,
+		"selection-mode": state.selectionManager.selectionMode,
+		"selection-behavior": state.selectionManager.selectionBehavior
+	});
+	const textContext = useMemo(function createTextContext() {
+		return { slots: {
+			label: labelProps,
+			description: descriptionProps
+		} };
+	}, [labelProps, descriptionProps]);
+	const ElementType = __node.props.href ? "a" : "div";
+	const appliedUserProps = apply(__node.props, ["ref"]);
+	const finalAttributes = {
+		...mergeProps(optionProps, hoverProps),
+		...dataAttributes,
+		...appliedUserProps,
+		ref: safeRef,
+		"data-text-value": __node.textValue
+	};
+	return /* @__PURE__ */ jsx(TextContext.Provider, {
+		value: textContext,
+		children: React.createElement(ElementType, finalAttributes, content)
+	});
+});
+/**
+* Adapter component that connects ListBoxItemImpl to React Aria's collection system.
+* This function serves as a bridge between React Aria's createLeafComponent and
+* the internal ListBoxItemImpl, ensuring proper prop forwarding and node injection.
+*
+* @template T - The type of the item value
+* @param {ListBoxItemProps<T>} props - ListBoxItem component props
+* @param {React.ForwardedRef<HTMLDivElement>} forwardedRef - Ref forwarded from the collection system
+* @param {Node<T>} item - React Aria node containing item metadata and collection info
+* @returns {React.ReactElement} The ListBoxItemImpl component with proper node and ref wiring
+* @internal
+*/
+function ListBoxItemComponent(props, forwardedRef, item) {
+	return /* @__PURE__ */ jsx(ListBoxItemImpl, {
+		...props,
+		ref: forwardedRef,
+		__node: item
+	});
+}
+/**
+* A single item within a ListBox component.
+* Handles user interactions, accessibility, and state management for individual options.
+*
+* @component
+* @template T The type of the item value
+* @example
+* ```tsx
+* <ListBoxItem>Simple option</ListBoxItem>
+* ```
+* @public
+*/
+const ListBoxItem = createLeafComponent("item", ListBoxItemComponent);
+//#endregion
+export { AriaCollection as Collection, Header, HeaderContext, ListBox, ListBoxItem, ListBoxSection };
+
+//# sourceMappingURL=index.mjs.map