@ark-ui/react 5.6.0 → 5.7.0

package/dist/components/collection.d.cts

@@ -1,5 +1,5 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
-export type { CollectionItem, ListCollection } from '@zag-js/collection';
+export type { CollectionItem, ListCollection, SelectionMode } from '@zag-js/collection';
 export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
 export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;

package/dist/components/collection.d.ts

@@ -1,5 +1,5 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
-export type { CollectionItem, ListCollection } from '@zag-js/collection';
+export type { CollectionItem, ListCollection, SelectionMode } from '@zag-js/collection';
 export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
 export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;

package/dist/components/floating-panel/floating-panel-body.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
-const FloatingPanelBody = react.forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
-    const mergedProps = react$1.mergeProps(floatingPanel.getBodyProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelBody = react.forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
+  const mergedProps = react$1.mergeProps(floatingPanel.getBodyProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 FloatingPanelBody.displayName = "FloatingPanelBody";
 
 exports.FloatingPanelBody = FloatingPanelBody;

package/dist/components/floating-panel/floating-panel-body.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
-const FloatingPanelBody = forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext();
-    const mergedProps = mergeProps(floatingPanel.getBodyProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelBody = forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = mergeProps(floatingPanel.getBodyProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 FloatingPanelBody.displayName = "FloatingPanelBody";
 
 export { FloatingPanelBody };

package/dist/components/floating-panel/floating-panel-content.cjs

@@ -11,21 +11,15 @@ const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
-const FloatingPanelContent = react.forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
-    const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(
-      floatingPanel.getContentProps(),
-      presence.getPresenceProps(),
-      props
-    );
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
+const FloatingPanelContent = react.forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
+  const presence = usePresenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(floatingPanel.getContentProps(), presence.getPresenceProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
+});
 FloatingPanelContent.displayName = "FloatingPanelContent";
 
 exports.FloatingPanelContent = FloatingPanelContent;

package/dist/components/floating-panel/floating-panel-content.js

@@ -7,21 +7,15 @@ import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
-const FloatingPanelContent = forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext();
-    const presence = usePresenceContext();
-    const mergedProps = mergeProps(
-      floatingPanel.getContentProps(),
-      presence.getPresenceProps(),
-      props
-    );
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
+const FloatingPanelContent = forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext();
+  const presence = usePresenceContext();
+  const mergedProps = mergeProps(floatingPanel.getContentProps(), presence.getPresenceProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
+});
 FloatingPanelContent.displayName = "FloatingPanelContent";
 
 export { FloatingPanelContent };

package/dist/components/floating-panel/floating-panel-drag-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
-const FloatingPanelDragTrigger = react.forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
-    const mergedProps = react$1.mergeProps(floatingPanel.getDragTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelDragTrigger = react.forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
+  const mergedProps = react$1.mergeProps(floatingPanel.getDragTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 FloatingPanelDragTrigger.displayName = "FloatingPanelDragTrigger";
 
 exports.FloatingPanelDragTrigger = FloatingPanelDragTrigger;

package/dist/components/floating-panel/floating-panel-drag-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
-const FloatingPanelDragTrigger = forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext();
-    const mergedProps = mergeProps(floatingPanel.getDragTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelDragTrigger = forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = mergeProps(floatingPanel.getDragTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 FloatingPanelDragTrigger.displayName = "FloatingPanelDragTrigger";
 
 export { FloatingPanelDragTrigger };

package/dist/components/floating-panel/floating-panel-header.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
-const FloatingPanelHeader = react.forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
-    const mergedProps = react$1.mergeProps(floatingPanel.getHeaderProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelHeader = react.forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
+  const mergedProps = react$1.mergeProps(floatingPanel.getHeaderProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 FloatingPanelHeader.displayName = "FloatingPanelHeader";
 
 exports.FloatingPanelHeader = FloatingPanelHeader;

package/dist/components/floating-panel/floating-panel-header.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
-const FloatingPanelHeader = forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext();
-    const mergedProps = mergeProps(floatingPanel.getHeaderProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const FloatingPanelHeader = forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = mergeProps(floatingPanel.getHeaderProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 FloatingPanelHeader.displayName = "FloatingPanelHeader";
 
 export { FloatingPanelHeader };

package/dist/components/floating-panel/floating-panel-positioner.cjs

@@ -10,17 +10,15 @@ const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
-const FloatingPanelPositioner = react.forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
-    const mergedProps = react$1.mergeProps(floatingPanel.getPositionerProps(), props);
-    const presence = usePresenceContext.usePresenceContext();
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+const FloatingPanelPositioner = react.forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
+  const mergedProps = react$1.mergeProps(floatingPanel.getPositionerProps(), props);
+  const presence = usePresenceContext.usePresenceContext();
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 FloatingPanelPositioner.displayName = "FloatingPanelPositioner";
 
 exports.FloatingPanelPositioner = FloatingPanelPositioner;

package/dist/components/floating-panel/floating-panel-positioner.js

@@ -6,17 +6,15 @@ import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
-const FloatingPanelPositioner = forwardRef(
-  (props, ref) => {
-    const floatingPanel = useFloatingPanelContext();
-    const mergedProps = mergeProps(floatingPanel.getPositionerProps(), props);
-    const presence = usePresenceContext();
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+const FloatingPanelPositioner = forwardRef((props, ref) => {
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = mergeProps(floatingPanel.getPositionerProps(), props);
+  const presence = usePresenceContext();
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 FloatingPanelPositioner.displayName = "FloatingPanelPositioner";
 
 export { FloatingPanelPositioner };

package/dist/components/index.cjs

@@ -277,6 +277,21 @@ const hoverCardTrigger = require('./hover-card/hover-card-trigger.cjs');
 const useHoverCard = require('./hover-card/use-hover-card.cjs');
 const useHoverCardContext = require('./hover-card/use-hover-card-context.cjs');
 const hoverCard$1 = require('./hover-card/hover-card.cjs');
+const listboxContent = require('./listbox/listbox-content.cjs');
+const listboxInput = require('./listbox/listbox-input.cjs');
+const listboxItem = require('./listbox/listbox-item.cjs');
+const listboxItemGroup = require('./listbox/listbox-item-group.cjs');
+const listboxItemGroupLabel = require('./listbox/listbox-item-group-label.cjs');
+const listboxItemIndicator = require('./listbox/listbox-item-indicator.cjs');
+const listboxItemText = require('./listbox/listbox-item-text.cjs');
+const listboxLabel = require('./listbox/listbox-label.cjs');
+const listboxRoot = require('./listbox/listbox-root.cjs');
+const listboxRootProvider = require('./listbox/listbox-root-provider.cjs');
+const listboxValueText = require('./listbox/listbox-value-text.cjs');
+const useListbox = require('./listbox/use-listbox.cjs');
+const useListboxContext = require('./listbox/use-listbox-context.cjs');
+const useListboxItemContext = require('./listbox/use-listbox-item-context.cjs');
+const listbox$1 = require('./listbox/listbox.cjs');
 const menuArrow = require('./menu/menu-arrow.cjs');
 const menuArrowTip = require('./menu/menu-arrow-tip.cjs');
 const menuCheckboxItem = require('./menu/menu-checkbox-item.cjs');
@@ -649,6 +664,7 @@ const editable = require('@zag-js/editable');
 const fileUpload = require('@zag-js/file-upload');
 const floatingPanel = require('@zag-js/floating-panel');
 const hoverCard = require('@zag-js/hover-card');
+const listbox = require('@zag-js/listbox');
 const menu = require('@zag-js/menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
@@ -959,6 +975,21 @@ exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
 exports.HoverCard = hoverCard$1;
+exports.ListboxContent = listboxContent.ListboxContent;
+exports.ListboxInput = listboxInput.ListboxInput;
+exports.ListboxItem = listboxItem.ListboxItem;
+exports.ListboxItemGroup = listboxItemGroup.ListboxItemGroup;
+exports.ListboxItemGroupLabel = listboxItemGroupLabel.ListboxItemGroupLabel;
+exports.ListboxItemIndicator = listboxItemIndicator.ListboxItemIndicator;
+exports.ListboxItemText = listboxItemText.ListboxItemText;
+exports.ListboxLabel = listboxLabel.ListboxLabel;
+exports.ListboxRoot = listboxRoot.ListboxRoot;
+exports.ListboxRootProvider = listboxRootProvider.ListboxRootProvider;
+exports.ListboxValueText = listboxValueText.ListboxValueText;
+exports.useListbox = useListbox.useListbox;
+exports.useListboxContext = useListboxContext.useListboxContext;
+exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
+exports.Listbox = listbox$1;
 exports.MenuArrow = menuArrow.MenuArrow;
 exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
 exports.MenuCheckboxItem = menuCheckboxItem.MenuCheckboxItem;
@@ -1371,6 +1402,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
 	enumerable: true,
 	get: () => hoverCard.anatomy
 });
+Object.defineProperty(exports, "listboxAnatomy", {
+	enumerable: true,
+	get: () => listbox.anatomy
+});
 Object.defineProperty(exports, "menuAnatomy", {
 	enumerable: true,
 	get: () => menu.anatomy

package/dist/components/index.d.cts

@@ -22,6 +22,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './listbox';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './format';
 export * from './frame';
 export * from './highlight';
 export * from './hover-card';
+export * from './listbox';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/dist/components/index.js

@@ -291,6 +291,22 @@ export { useHoverCard } from './hover-card/use-hover-card.js';
 export { useHoverCardContext } from './hover-card/use-hover-card-context.js';
 import * as hoverCard from './hover-card/hover-card.js';
 export { hoverCard as HoverCard };
+export { ListboxContent } from './listbox/listbox-content.js';
+export { ListboxInput } from './listbox/listbox-input.js';
+export { ListboxItem } from './listbox/listbox-item.js';
+export { ListboxItemGroup } from './listbox/listbox-item-group.js';
+export { ListboxItemGroupLabel } from './listbox/listbox-item-group-label.js';
+export { ListboxItemIndicator } from './listbox/listbox-item-indicator.js';
+export { ListboxItemText } from './listbox/listbox-item-text.js';
+export { ListboxLabel } from './listbox/listbox-label.js';
+export { ListboxRoot } from './listbox/listbox-root.js';
+export { ListboxRootProvider } from './listbox/listbox-root-provider.js';
+export { ListboxValueText } from './listbox/listbox-value-text.js';
+export { useListbox } from './listbox/use-listbox.js';
+export { useListboxContext } from './listbox/use-listbox-context.js';
+export { useListboxItemContext } from './listbox/use-listbox-item-context.js';
+import * as listbox from './listbox/listbox.js';
+export { listbox as Listbox };
 export { MenuArrow } from './menu/menu-arrow.js';
 export { MenuArrowTip } from './menu/menu-arrow-tip.js';
 export { MenuCheckboxItem } from './menu/menu-checkbox-item.js';
@@ -689,6 +705,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/components/listbox/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collection = require('../collection.cjs');
+const listboxContent = require('./listbox-content.cjs');
+const listboxInput = require('./listbox-input.cjs');
+const listboxItem = require('./listbox-item.cjs');
+const listboxItemGroup = require('./listbox-item-group.cjs');
+const listboxItemGroupLabel = require('./listbox-item-group-label.cjs');
+const listboxItemIndicator = require('./listbox-item-indicator.cjs');
+const listboxItemText = require('./listbox-item-text.cjs');
+const listboxLabel = require('./listbox-label.cjs');
+const listboxRoot = require('./listbox-root.cjs');
+const listboxRootProvider = require('./listbox-root-provider.cjs');
+const listboxValueText = require('./listbox-value-text.cjs');
+const useListbox = require('./use-listbox.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+const useListboxItemContext = require('./use-listbox-item-context.cjs');
+const listbox$1 = require('./listbox.cjs');
+const listbox = require('@zag-js/listbox');
+
+
+
+exports.createListCollection = collection.createListCollection;
+exports.ListboxContent = listboxContent.ListboxContent;
+exports.ListboxInput = listboxInput.ListboxInput;
+exports.ListboxItem = listboxItem.ListboxItem;
+exports.ListboxItemGroup = listboxItemGroup.ListboxItemGroup;
+exports.ListboxItemGroupLabel = listboxItemGroupLabel.ListboxItemGroupLabel;
+exports.ListboxItemIndicator = listboxItemIndicator.ListboxItemIndicator;
+exports.ListboxItemText = listboxItemText.ListboxItemText;
+exports.ListboxLabel = listboxLabel.ListboxLabel;
+exports.ListboxRoot = listboxRoot.ListboxRoot;
+exports.ListboxRootProvider = listboxRootProvider.ListboxRootProvider;
+exports.ListboxValueText = listboxValueText.ListboxValueText;
+exports.useListbox = useListbox.useListbox;
+exports.useListboxContext = useListboxContext.useListboxContext;
+exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
+exports.Listbox = listbox$1;
+Object.defineProperty(exports, "listboxAnatomy", {
+  enumerable: true,
+  get: () => listbox.anatomy
+});

package/dist/components/listbox/index.d.cts

@@ -0,0 +1,18 @@
+export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToIndexDetails as ListboxScrollToIndexDetails, SelectionDetails as ListboxSelectionDetails, SelectionMode as ListboxSelectionMode, ValueChangeDetails as ListboxValueChangeDetails, } from '@zag-js/listbox';
+export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
+export { ListboxContent, type ListboxContentBaseProps, type ListboxContentProps } from './listbox-content';
+export { ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input';
+export { ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item';
+export { ListboxItemGroup, type ListboxItemGroupBaseProps, type ListboxItemGroupProps } from './listbox-item-group';
+export { ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type ListboxItemGroupLabelProps, } from './listbox-item-group-label';
+export { ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, } from './listbox-item-indicator';
+export { ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps } from './listbox-item-text';
+export { ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label';
+export { ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps } from './listbox-root';
+export { ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, } from './listbox-root-provider';
+export { ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps } from './listbox-value-text';
+export { listboxAnatomy } from './listbox.anatomy';
+export { useListbox, type UseListboxProps, type UseListboxReturn } from './use-listbox';
+export { useListboxContext, type UseListboxContext } from './use-listbox-context';
+export { useListboxItemContext, type UseListboxItemContext } from './use-listbox-item-context';
+export * as Listbox from './listbox';

package/dist/components/listbox/index.d.ts

@@ -0,0 +1,18 @@
+export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToIndexDetails as ListboxScrollToIndexDetails, SelectionDetails as ListboxSelectionDetails, SelectionMode as ListboxSelectionMode, ValueChangeDetails as ListboxValueChangeDetails, } from '@zag-js/listbox';
+export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
+export { ListboxContent, type ListboxContentBaseProps, type ListboxContentProps } from './listbox-content';
+export { ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input';
+export { ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item';
+export { ListboxItemGroup, type ListboxItemGroupBaseProps, type ListboxItemGroupProps } from './listbox-item-group';
+export { ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type ListboxItemGroupLabelProps, } from './listbox-item-group-label';
+export { ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, } from './listbox-item-indicator';
+export { ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps } from './listbox-item-text';
+export { ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label';
+export { ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps } from './listbox-root';
+export { ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, } from './listbox-root-provider';
+export { ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps } from './listbox-value-text';
+export { listboxAnatomy } from './listbox.anatomy';
+export { useListbox, type UseListboxProps, type UseListboxReturn } from './use-listbox';
+export { useListboxContext, type UseListboxContext } from './use-listbox-context';
+export { useListboxItemContext, type UseListboxItemContext } from './use-listbox-item-context';
+export * as Listbox from './listbox';

package/dist/components/listbox/index.js

@@ -0,0 +1,18 @@
+export { createListCollection } from '../collection.js';
+export { ListboxContent } from './listbox-content.js';
+export { ListboxInput } from './listbox-input.js';
+export { ListboxItem } from './listbox-item.js';
+export { ListboxItemGroup } from './listbox-item-group.js';
+export { ListboxItemGroupLabel } from './listbox-item-group-label.js';
+export { ListboxItemIndicator } from './listbox-item-indicator.js';
+export { ListboxItemText } from './listbox-item-text.js';
+export { ListboxLabel } from './listbox-label.js';
+export { ListboxRoot } from './listbox-root.js';
+export { ListboxRootProvider } from './listbox-root-provider.js';
+export { ListboxValueText } from './listbox-value-text.js';
+export { useListbox } from './use-listbox.js';
+export { useListboxContext } from './use-listbox-context.js';
+export { useListboxItemContext } from './use-listbox-item-context.js';
+import * as listbox from './listbox.js';
+export { listbox as Listbox };
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';

package/dist/components/listbox/listbox-content.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxContent = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getContentProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ListboxContent.displayName = "ListboxContent";
+
+exports.ListboxContent = ListboxContent;

package/dist/components/listbox/listbox-content.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxContentBaseProps extends PolymorphicProps {
+}
+export interface ListboxContentProps extends HTMLProps<'div'>, ListboxContentBaseProps {
+}
+export declare const ListboxContent: ForwardRefExoticComponent<ListboxContentProps & RefAttributes<HTMLDivElement>>;

package/dist/components/listbox/listbox-content.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxContentBaseProps extends PolymorphicProps {
+}
+export interface ListboxContentProps extends HTMLProps<'div'>, ListboxContentBaseProps {
+}
+export declare const ListboxContent: ForwardRefExoticComponent<ListboxContentProps & RefAttributes<HTMLDivElement>>;

package/dist/components/listbox/listbox-content.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useListboxContext } from './use-listbox-context.js';
+
+const ListboxContent = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getContentProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ListboxContent.displayName = "ListboxContent";
+
+export { ListboxContent };

package/dist/components/listbox/listbox-context.d.cts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { CollectionItem } from '../collection';
+import { UseListboxContext } from './use-listbox-context';
+export interface ListboxContextProps<T extends CollectionItem> {
+    children: (context: UseListboxContext<T>) => ReactNode;
+}
+export declare const ListboxContext: <T extends CollectionItem>(props: ListboxContextProps<T>) => ReactNode;

package/dist/components/listbox/listbox-context.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { CollectionItem } from '../collection';
+import { UseListboxContext } from './use-listbox-context';
+export interface ListboxContextProps<T extends CollectionItem> {
+    children: (context: UseListboxContext<T>) => ReactNode;
+}
+export declare const ListboxContext: <T extends CollectionItem>(props: ListboxContextProps<T>) => ReactNode;

package/dist/components/listbox/listbox-input.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxInput = react.forwardRef((props, ref) => {
+  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, ["autoHighlight"]);
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getInputProps(inputProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+ListboxInput.displayName = "ListboxInput";
+
+exports.ListboxInput = ListboxInput;

package/dist/components/listbox/listbox-input.d.cts

@@ -0,0 +1,8 @@
+import { InputProps } from '@zag-js/listbox';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxInputBaseProps extends InputProps, PolymorphicProps {
+}
+export interface ListboxInputProps extends HTMLProps<'input'>, ListboxInputBaseProps {
+}
+export declare const ListboxInput: ForwardRefExoticComponent<ListboxInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/listbox/listbox-input.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from '@zag-js/listbox';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxInputBaseProps extends InputProps, PolymorphicProps {
+}
+export interface ListboxInputProps extends HTMLProps<'input'>, ListboxInputBaseProps {
+}
+export declare const ListboxInput: ForwardRefExoticComponent<ListboxInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/listbox/listbox-input.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useListboxContext } from './use-listbox-context.js';
+
+const ListboxInput = forwardRef((props, ref) => {
+  const [inputProps, localProps] = createSplitProps()(props, ["autoHighlight"]);
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getInputProps(inputProps), localProps);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
+ListboxInput.displayName = "ListboxInput";
+
+export { ListboxInput };