@bento/listbox 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -1,380 +1,744 @@
-'use strict';
-
-var React4 = require('react');
-var collections = require('@react-aria/collections');
-var useProps = require('@bento/use-props');
-var slots = require('@bento/slots');
-var reactAria = require('react-aria');
-var useDataAttributes = require('@bento/use-data-attributes');
-var reactStately = require('react-stately');
-var reactAriaComponents = require('react-aria-components');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-
-// src/header.tsx
-var HeaderContext = React4.createContext({});
-var BentoHeaderImpl = slots.withSlots(
-  "BentoHeader",
-  function BentoHeader(props, ref) {
-    const { props: processedProps, apply } = useProps.useProps(props);
-    const contextProps = React4.useContext(HeaderContext);
-    const appliedUserProps = apply(processedProps);
-    const composed = {
-      ...contextProps,
-      ...appliedUserProps
-      // User props take precedence over context
-    };
-    return /* @__PURE__ */ React4__default.default.createElement("header", { ...composed, ref: contextProps.ref || ref }, processedProps.children);
-  }
-);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react, 1);
+let _react_aria_collections = require("@react-aria/collections");
+let _bento_use_props = require("@bento/use-props");
+let _bento_slots = require("@bento/slots");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria = require("react-aria");
+let _bento_use_data_attributes = require("@bento/use-data-attributes");
+let react_stately = require("react-stately");
+let react_aria_components = require("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 = (0, react.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 = (0, _bento_slots.withSlots)("BentoHeader", function BentoHeader(...args) {
+	const [props, ref] = args;
+	const { props: processedProps, apply } = (0, _bento_use_props.useProps)(props);
+	const contextProps = (0, react.useContext)(HeaderContext);
+	const appliedUserProps = apply(processedProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ React4__default.default.createElement(BentoHeaderImpl, { ...props, ref });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BentoHeaderImpl, {
+		...props,
+		ref
+	});
 }
-var HeaderBase = collections.createLeafComponent("header", HeaderWrapper);
-var Header = HeaderBase;
-var BentoListBoxSectionImpl = slots.withSlots("BentoListBoxSection", function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
-  const { props, apply } = useProps.useProps(rest);
-  const data = useDataAttributes.useDataAttributes({ level: __node?.level });
-  const headingRef = React4.useRef(null);
-  const title = titleProp ?? props.title ?? __node?.rendered;
-  const { groupProps, headingProps } = reactAria.useListBoxSection({
-    heading: title,
-    "aria-label": props["aria-label"]
-  });
-  const composed = reactAria.mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
-  const sectionContent = children || props.children;
-  return /* @__PURE__ */ React4__default.default.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4__default.default.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4__default.default.createElement("div", { ...headingProps }, title), sectionContent));
+/**
+* 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 = (0, _react_aria_collections.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 = (0, _bento_slots.withSlots)("BentoListBoxSection", function BentoListBoxSectionImpl(...restArgs) {
+	const [{ __node, children, title: titleProp, ...rest }, ref] = restArgs;
+	const { props, apply } = (0, _bento_use_props.useProps)(rest);
+	const data = (0, _bento_use_data_attributes.useDataAttributes)({ level: __node?.level });
+	const headingRef = (0, react.useRef)(null);
+	const title = titleProp ?? props.title ?? __node?.rendered;
+	const { groupProps, headingProps } = (0, react_aria.useListBoxSection)({
+		heading: title,
+		"aria-label": props["aria-label"]
+	});
+	const composed = (0, react_aria.mergeProps)(apply({
+		...data,
+		...props
+	}, [
+		"children",
+		"title",
+		"slot"
+	]), groupProps);
+	const sectionContent = children || props.children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		...composed,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderContext.Provider, {
+			value: {
+				...headingProps,
+				ref: headingRef
+			},
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ React4__default.default.createElement(BentoListBoxSectionImpl, { ...props, __node: section, ref });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BentoListBoxSectionImpl, {
+		...props,
+		__node: section,
+		ref
+	});
 }
-var ListBoxSectionBase = collections.createBranchComponent("section", ListBoxSectionWrapper);
-var ListBoxSectionInner = function ListBoxSectionInner2({ section }) {
-  const state = React4.useContext(ListStateContext);
-  const { CollectionBranch } = React4.useContext(reactAriaComponents.CollectionRendererContext);
-  return /* @__PURE__ */ React4__default.default.createElement(BentoListBoxSectionImpl, { ...section.props, __node: section }, CollectionBranch && state?.collection ? /* @__PURE__ */ React4__default.default.createElement(CollectionBranch, { collection: state.collection, parent: section }) : null);
+/* 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 = (0, _react_aria_collections.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 = (0, react.useContext)(ListStateContext);
+	const { CollectionBranch } = (0, react.useContext)(react_aria_components.CollectionRendererContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BentoListBoxSectionImpl, {
+		...section.props,
+		__node: section,
+		children: CollectionBranch && state?.collection ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollectionBranch, {
+			collection: state.collection,
+			parent: section
+		}) : null
+	});
 };
-var ListBoxSection = ListBoxSectionBase;
+/**
+* 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 = React4.useRef(null);
-  React4.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;
+	const internalRef = (0, react.useRef)(null);
+	(0, react.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;
 }
-
-// src/listbox.tsx
-var ListStateContext = React4.createContext(null);
+//#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 = (0, react.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 = React4.useContext(ListStateContext);
-  const stateProps = {
-    ...props,
-    children: void 0,
-    items: void 0
-  };
-  const state = contextState ?? reactStately.useListState(stateProps);
-  return { state, contextState };
+	const contextState = (0, react.useContext)(ListStateContext);
+	const stateProps = {
+		...props,
+		children: void 0,
+		items: void 0
+	};
+	return {
+		state: contextState ?? (0, react_stately.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) {
-  return contextState ? content : /* @__PURE__ */ React4__default.default.createElement(ListStateContext.Provider, { value: state }, content);
+	/* v8 ignore next */
+	return contextState ? content : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListStateContext.Provider, {
+		value: state,
+		children: content
+	});
 }
-function useKeyboardDelegate({
-  collection,
-  collator,
-  listBoxRef,
-  selectionManager,
-  layout,
-  orientation,
-  direction,
-  keyboardDelegate: providedDelegate
-}) {
-  const { disabledBehavior, disabledKeys } = selectionManager;
-  return React4.useMemo(
-    function createKeyboardDelegate() {
-      return providedDelegate || new reactAria.ListKeyboardDelegate({
-        collection,
-        collator,
-        ref: listBoxRef,
-        disabledKeys,
-        disabledBehavior,
-        layout,
-        orientation,
-        direction
-      });
-    },
-    [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]
-  );
+/**
+* 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 (0, react.useMemo)(function createKeyboardDelegate() {
+		return providedDelegate || new react_aria.ListKeyboardDelegate({
+			collection,
+			collator,
+			ref: listBoxRef,
+			disabledKeys,
+			disabledBehavior,
+			layout,
+			orientation,
+			direction
+		});
+	}, [
+		collection,
+		collator,
+		listBoxRef,
+		selectionManager,
+		orientation,
+		direction,
+		layout,
+		providedDelegate
+	]);
 }
-function useListBoxDataAttributes({
-  isEmpty,
-  isFocused,
-  isFocusVisible,
-  layout,
-  orientation,
-  selectionManager,
-  allowsTabNavigation,
-  shouldFocusWrap,
-  originalSelectionBehavior
-}) {
-  return useDataAttributes.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
-  });
+/**
+* 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 (0, _bento_use_data_attributes.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
+	});
 }
-function useComposedProps({
-  otherProps,
-  renderValues,
-  listBoxProps,
-  focusProps,
-  dataAttributes,
-  selectionManager,
-  listBoxRef
-}) {
-  const { apply } = useProps.useProps(otherProps, renderValues);
-  const propsToExclude = [
-    "renderEmptyState",
-    "selectionMode",
-    "defaultSelectedKeys",
-    "disabledKeys",
-    "disallowEmptySelection",
-    "shouldFocusWrap",
-    "items",
-    "children",
-    "selectionBehavior",
-    "keyboardDelegate"
-  ];
-  const appliedUserProps = apply(otherProps, propsToExclude);
-  const baseProps = {
-    ...reactAria.mergeProps(listBoxProps, focusProps),
-    ...dataAttributes,
-    ...selectionManager.selectionMode !== "none" && {
-      "aria-multiselectable": selectionManager.selectionMode === "multiple"
-    }
-  };
-  const finalProps = {
-    ...baseProps,
-    ...appliedUserProps,
-    ref: listBoxRef
-    // Set ref directly to avoid extensibility issues
-  };
-  return finalProps;
+/**
+* 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 } = (0, _bento_use_props.useProps)(otherProps, renderValues);
+	const appliedUserProps = apply(otherProps, [
+		"renderEmptyState",
+		"selectionMode",
+		"defaultSelectedKeys",
+		"disabledKeys",
+		"disallowEmptySelection",
+		"shouldFocusWrap",
+		"items",
+		"children",
+		"selectionBehavior",
+		"keyboardDelegate"
+	]);
+	return {
+		...(0, react_aria.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;
+	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__ */ React4__default.default.createElement(ListBoxSectionInner, { key: item.key, section: item }) : /* @__PURE__ */ React4__default.default.createElement(ListBoxItemImpl, { key: item.key, __node: item }, item.rendered);
-  });
+	return [...collection].map(function renderCollectionItem(item) {
+		return item.type === "section" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxSectionInner, { section: item }, item.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxItemImpl, {
+			__node: item,
+			children: item.rendered
+		}, item.key);
+	});
 }
-function renderListBoxContent({
-  children,
-  items,
-  isEmpty,
-  renderEmptyStateProp,
-  renderValues,
-  collection
-}) {
-  const hasRenderChildren = typeof children === "function" && !items;
-  if (hasRenderChildren) {
-    return children(renderValues);
-  }
-  if (isEmpty && renderEmptyStateProp) {
-    return renderEmptyState(renderEmptyStateProp, renderValues);
-  }
-  return renderCollectionItems(collection);
+/**
+* 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);
 }
-var ListBoxInner = function ListBoxInner2({
-  state,
-  renderEmptyState: renderEmptyStateProp,
-  children,
-  items,
-  listBoxRef,
-  ...otherProps
-}) {
-  const { layout = "stack", orientation = "vertical", shouldSelectOnPressUp, selectionBehavior } = otherProps;
-  const { collection, selectionManager } = state;
-  const { direction } = reactAria.useLocale();
-  const collator = reactAria.useCollator({ usage: "search", sensitivity: "base" });
-  const keyboardDelegate = useKeyboardDelegate({
-    collection,
-    collator,
-    listBoxRef,
-    selectionManager,
-    layout,
-    orientation,
-    direction,
-    keyboardDelegate: otherProps.keyboardDelegate
-  });
-  const { listBoxProps } = reactAria.useListBox(
-    {
-      ...otherProps,
-      shouldSelectOnPressUp,
-      keyboardDelegate
-    },
-    state,
-    listBoxRef
-  );
-  const { focusProps, isFocused, isFocusVisible } = reactAria.useFocusRing();
-  const isEmpty = state.collection.size === 0;
-  const renderValues = {
-    isEmpty,
-    isFocused,
-    isFocusVisible,
-    isDropTarget: false,
-    layout,
-    state,
-    items
-  };
-  const dataAttributes = useListBoxDataAttributes({
-    isEmpty,
-    isFocused,
-    isFocusVisible,
-    layout,
-    orientation,
-    selectionManager,
-    allowsTabNavigation: otherProps.allowsTabNavigation,
-    shouldFocusWrap: otherProps.shouldFocusWrap,
-    originalSelectionBehavior: selectionBehavior
-  });
-  const composedProps = useComposedProps({
-    otherProps,
-    renderValues,
-    listBoxProps,
-    focusProps,
-    dataAttributes,
-    selectionManager,
-    listBoxRef
-  });
-  return /* @__PURE__ */ React4__default.default.createElement(reactAria.FocusScope, null, /* @__PURE__ */ React4__default.default.createElement("div", { ...composedProps }, renderListBoxContent({
-    children,
-    items,
-    isEmpty,
-    renderEmptyStateProp,
-    renderValues,
-    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 } = (0, react_aria.useLocale)();
+	const keyboardDelegate = useKeyboardDelegate({
+		collection,
+		collator: (0, react_aria.useCollator)({
+			usage: "search",
+			sensitivity: "base"
+		}),
+		listBoxRef,
+		selectionManager,
+		layout,
+		orientation,
+		direction,
+		keyboardDelegate: otherProps.keyboardDelegate
+	});
+	const { listBoxProps } = (0, react_aria.useListBox)({
+		...otherProps,
+		shouldSelectOnPressUp,
+		keyboardDelegate
+	}, state, listBoxRef);
+	const { focusProps, isFocused, isFocusVisible } = (0, react_aria.useFocusRing)();
+	const isEmpty = state.collection.size === 0;
+	const renderValues = {
+		isEmpty,
+		isFocused,
+		isFocusVisible,
+		isDropTarget: false,
+		layout,
+		state,
+		items
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.FocusScope, { children: /* @__PURE__ */ (0, react_jsx_runtime.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
+		})
+	}) });
 };
-function ListBoxComponent(args, ref) {
-  return /* @__PURE__ */ React4__default.default.createElement(collections.CollectionBuilder, { content: /* @__PURE__ */ React4__default.default.createElement(collections.Collection, { ...args }) }, function buildCollection(collection) {
-    return /* @__PURE__ */ React4__default.default.createElement(StandaloneListBox, { props: args, listBoxRef: ref, 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__ */ (0, react_jsx_runtime.jsx)(_react_aria_collections.CollectionBuilder, {
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_collections.Collection, { ..._args }),
+		children: function buildCollection(collection) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandaloneListBox, {
+				props: _args,
+				listBoxRef: ref,
+				collection
+			});
+		}
+	});
 }
-var StandaloneListBox = function StandaloneListBox2({ props, listBoxRef, collection }) {
-  const originalRenderEmptyState = props.renderEmptyState;
-  const { props: processedProps } = useProps.useProps(props);
-  const processedRef = useSafeObjectRef(listBoxRef);
-  const { state, contextState } = useListBoxState({ ...processedProps, collection });
-  const { renderEmptyState: _, ...cleanProcessedProps } = processedProps;
-  const content = /* @__PURE__ */ React4__default.default.createElement(
-    ListBoxInner,
-    {
-      state,
-      listBoxRef: processedRef,
-      renderEmptyState: originalRenderEmptyState,
-      ...cleanProcessedProps
-    }
-  );
-  return renderWithOptionalContext(content, state, contextState);
-};
-var ListBox = slots.withSlots("BentoListBox", ListBoxComponent);
-var TextContext = React4.createContext({ slots: {} });
-var ListBoxItemImplComponent = function ListBoxItemImplComponent2({ __node, ...props }, ref) {
-  const state = React4.useContext(ListStateContext);
-  const safeRef = useSafeObjectRef(ref);
-  const { optionProps, labelProps, descriptionProps, ...states } = reactAria.useOption(
-    {
-      key: __node.key,
-      "aria-label": props["aria-label"],
-      isDisabled: props.isDisabled
-    },
-    state,
-    safeRef
-  );
-  const { hoverProps, isHovered } = reactAria.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.useProps(props, renderValues);
-  const dataAttributes = useDataAttributes.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 = React4.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 = {
-    ...reactAria.mergeProps(optionProps, hoverProps),
-    // React Aria props
-    ...dataAttributes,
-    // Bento data attributes
-    ...appliedUserProps,
-    ref: safeRef,
-    "data-text-value": __node.textValue
-  };
-  return /* @__PURE__ */ React4__default.default.createElement(TextContext.Provider, { value: textContext }, React4__default.default.createElement(ElementType, finalAttributes, content));
+/**
+* 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 } = (0, _bento_use_props.useProps)(props);
+	const processedRef = useSafeObjectRef(listBoxRef);
+	const { state, contextState } = useListBoxState({
+		...processedProps,
+		collection
+	});
+	const { renderEmptyState: _, ...cleanProcessedProps } = processedProps;
+	return renderWithOptionalContext(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxInner, {
+		state,
+		listBoxRef: processedRef,
+		renderEmptyState: originalRenderEmptyState,
+		...cleanProcessedProps
+	}), state, contextState);
 };
-var ListBoxItemImpl = slots.withSlots("BentoListBoxItem", ListBoxItemImplComponent);
+/**
+* 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 = (0, _bento_slots.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 = (0, react.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 = (0, _bento_slots.withSlots)("BentoListBoxItem", function ListBoxItemImplComponent(...restArgs) {
+	const [{ __node, ...props }, ref] = restArgs;
+	const state = (0, react.useContext)(ListStateContext);
+	const safeRef = useSafeObjectRef(ref);
+	const { optionProps, labelProps, descriptionProps, ...states } = (0, react_aria.useOption)({
+		key: __node.key,
+		"aria-label": props["aria-label"],
+		isDisabled: props.isDisabled
+	}, state, safeRef);
+	const { hoverProps, isHovered } = (0, react_aria.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 } = (0, _bento_use_props.useProps)(props, renderValues);
+	const dataAttributes = (0, _bento_use_data_attributes.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 = (0, react.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 = {
+		...(0, react_aria.mergeProps)(optionProps, hoverProps),
+		...dataAttributes,
+		...appliedUserProps,
+		ref: safeRef,
+		"data-text-value": __node.textValue
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextContext.Provider, {
+		value: textContext,
+		children: react.default.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__ */ React4__default.default.createElement(ListBoxItemImpl, { ...props, ref: forwardedRef, __node: item });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxItemImpl, {
+		...props,
+		ref: forwardedRef,
+		__node: item
+	});
 }
-var ListBoxItemBase = collections.createLeafComponent("item", ListBoxItemComponent);
-var ListBoxItem = ListBoxItemBase;
-
-Object.defineProperty(exports, "Collection", {
-  enumerable: true,
-  get: function () { return collections.Collection; }
-});
+/**
+* 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 = (0, _react_aria_collections.createLeafComponent)("item", ListBoxItemComponent);
+//#endregion
+exports.Collection = _react_aria_collections.Collection;
 exports.Header = Header;
 exports.HeaderContext = HeaderContext;
 exports.ListBox = ListBox;
 exports.ListBoxItem = ListBoxItem;
 exports.ListBoxSection = ListBoxSection;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map