@ark-ui/react 5.6.0 → 5.7.0

package/dist/components/listbox/listbox-item-group-label.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 factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+const useListboxItemGroupProps = require('./use-listbox-item-group-props.cjs');
+
+const ListboxItemGroupLabel = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  const itemGroupProps = useListboxItemGroupProps.useListboxItemGroupPropsContext();
+  const mergedProps = react$1.mergeProps(listbox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ListboxItemGroupLabel.displayName = "ListboxItemGroupLabel";
+
+exports.ListboxItemGroupLabel = ListboxItemGroupLabel;

package/dist/components/listbox/listbox-item-group-label.d.cts

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

package/dist/components/listbox/listbox-item-group-label.d.ts

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

package/dist/components/listbox/listbox-item-group-label.js

@@ -0,0 +1,17 @@
+'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';
+import { useListboxItemGroupPropsContext } from './use-listbox-item-group-props.js';
+
+const ListboxItemGroupLabel = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  const itemGroupProps = useListboxItemGroupPropsContext();
+  const mergedProps = mergeProps(listbox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ListboxItemGroupLabel.displayName = "ListboxItemGroupLabel";
+
+export { ListboxItemGroupLabel };

package/dist/components/listbox/listbox-item-group.cjs

@@ -0,0 +1,24 @@
+'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 useListboxItemGroupProps = require('./use-listbox-item-group-props.cjs');
+
+const ListboxItemGroup = react.forwardRef((props, ref) => {
+  const id = react.useId();
+  const [_itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const itemGroupProps = { id, ..._itemGroupProps };
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useListboxItemGroupProps.ListboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
+ListboxItemGroup.displayName = "ListboxItemGroup";
+
+exports.ListboxItemGroup = ListboxItemGroup;

package/dist/components/listbox/listbox-item-group.d.cts

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

package/dist/components/listbox/listbox-item-group.d.ts

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

package/dist/components/listbox/listbox-item-group.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef, useId } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useListboxContext } from './use-listbox-context.js';
+import { ListboxItemGroupPropsProvider } from './use-listbox-item-group-props.js';
+
+const ListboxItemGroup = forwardRef((props, ref) => {
+  const id = useId();
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+  const itemGroupProps = { id, ..._itemGroupProps };
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsx(ListboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+ListboxItemGroup.displayName = "ListboxItemGroup";
+
+export { ListboxItemGroup };

package/dist/components/listbox/listbox-item-indicator.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 factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+const useListboxItemPropsContext = require('./use-listbox-item-props-context.cjs');
+
+const ListboxItemIndicator = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  const itemProps = useListboxItemPropsContext.useListboxItemPropsContext();
+  const mergedProps = react$1.mergeProps(listbox.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ListboxItemIndicator.displayName = "ListboxItemIndicator";
+
+exports.ListboxItemIndicator = ListboxItemIndicator;

package/dist/components/listbox/listbox-item-indicator.d.cts

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

package/dist/components/listbox/listbox-item-indicator.d.ts

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

package/dist/components/listbox/listbox-item-indicator.js

@@ -0,0 +1,17 @@
+'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';
+import { useListboxItemPropsContext } from './use-listbox-item-props-context.js';
+
+const ListboxItemIndicator = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  const itemProps = useListboxItemPropsContext();
+  const mergedProps = mergeProps(listbox.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ListboxItemIndicator.displayName = "ListboxItemIndicator";
+
+export { ListboxItemIndicator };

package/dist/components/listbox/listbox-item-text.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 factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+const useListboxItemPropsContext = require('./use-listbox-item-props-context.cjs');
+
+const ListboxItemText = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  const itemProps = useListboxItemPropsContext.useListboxItemPropsContext();
+  const mergedProps = react$1.mergeProps(listbox.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ListboxItemText.displayName = "ListboxItemText";
+
+exports.ListboxItemText = ListboxItemText;

package/dist/components/listbox/listbox-item-text.d.cts

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

package/dist/components/listbox/listbox-item-text.d.ts

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

package/dist/components/listbox/listbox-item-text.js

@@ -0,0 +1,17 @@
+'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';
+import { useListboxItemPropsContext } from './use-listbox-item-props-context.js';
+
+const ListboxItemText = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  const itemProps = useListboxItemPropsContext();
+  const mergedProps = mergeProps(listbox.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ListboxItemText.displayName = "ListboxItemText";
+
+export { ListboxItemText };

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

@@ -0,0 +1,24 @@
+'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 useListboxItemContext = require('./use-listbox-item-context.cjs');
+const useListboxItemPropsContext = require('./use-listbox-item-props-context.cjs');
+
+const ListboxItem = react.forwardRef((props, ref) => {
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["item", "highlightOnHover"]);
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getItemProps(itemProps), localProps);
+  const itemState = listbox.getItemState(itemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useListboxItemPropsContext.ListboxItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useListboxItemContext.ListboxItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+});
+ListboxItem.displayName = "ListboxItem";
+
+exports.ListboxItem = ListboxItem;

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

@@ -0,0 +1,8 @@
+import { ItemProps } from '@zag-js/listbox';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps {
+}
+export interface ListboxItemProps extends HTMLProps<'div'>, ListboxItemBaseProps {
+}
+export declare const ListboxItem: ForwardRefExoticComponent<ListboxItemProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import { ItemProps } from '@zag-js/listbox';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps {
+}
+export interface ListboxItemProps extends HTMLProps<'div'>, ListboxItemBaseProps {
+}
+export declare const ListboxItem: ForwardRefExoticComponent<ListboxItemProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+'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';
+import { ListboxItemProvider } from './use-listbox-item-context.js';
+import { ListboxItemPropsProvider } from './use-listbox-item-props-context.js';
+
+const ListboxItem = forwardRef((props, ref) => {
+  const [itemProps, localProps] = createSplitProps()(props, ["item", "highlightOnHover"]);
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getItemProps(itemProps), localProps);
+  const itemState = listbox.getItemState(itemProps);
+  return /* @__PURE__ */ jsx(ListboxItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ListboxItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+});
+ListboxItem.displayName = "ListboxItem";
+
+export { ListboxItem };

package/dist/components/listbox/listbox-label.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 ListboxLabel = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+ListboxLabel.displayName = "ListboxLabel";
+
+exports.ListboxLabel = ListboxLabel;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxLabelBaseProps extends PolymorphicProps {
+}
+export interface ListboxLabelProps extends HTMLProps<'label'>, ListboxLabelBaseProps {
+}
+export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxLabelBaseProps extends PolymorphicProps {
+}
+export interface ListboxLabelProps extends HTMLProps<'label'>, ListboxLabelBaseProps {
+}
+export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLLabelElement>>;

package/dist/components/listbox/listbox-label.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 ListboxLabel = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getLabelProps(), props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+ListboxLabel.displayName = "ListboxLabel";
+
+export { ListboxLabel };

package/dist/components/listbox/listbox-root-provider.cjs

@@ -0,0 +1,20 @@
+'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 ListboxImpl = (props, ref) => {
+  const [{ value: listbox }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useListboxContext.ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRootProvider = react.forwardRef(ListboxImpl);
+
+exports.ListboxRootProvider = ListboxRootProvider;

package/dist/components/listbox/listbox-root-provider.d.cts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxReturn } from './use-listbox';
+interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>;
+}
+export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxComponent;
+export {};

package/dist/components/listbox/listbox-root-provider.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxReturn } from './use-listbox';
+interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>;
+}
+export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxComponent;
+export {};

package/dist/components/listbox/listbox-root-provider.js

@@ -0,0 +1,16 @@
+'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 { ListboxProvider } from './use-listbox-context.js';
+
+const ListboxImpl = (props, ref) => {
+  const [{ value: listbox }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRootProvider = forwardRef(ListboxImpl);
+
+export { ListboxRootProvider };

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

@@ -0,0 +1,42 @@
+'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 useListbox = require('./use-listbox.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxImpl = (props, ref) => {
+  const [useListboxProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "collection",
+    "defaultHighlightedValue",
+    "defaultValue",
+    "deselectable",
+    "disabled",
+    "disallowSelectAll",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "onHighlightChange",
+    "onSelect",
+    "onValueChange",
+    "orientation",
+    "scrollToIndexFn",
+    "selectionMode",
+    "selectOnHighlight",
+    "typeahead",
+    "value"
+  ]);
+  const listbox = useListbox.useListbox(useListboxProps);
+  const mergedProps = react$1.mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useListboxContext.ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRoot = react.forwardRef(ListboxImpl);
+
+exports.ListboxRoot = ListboxRoot;

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

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { Assign } from '../../types';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxProps } from './use-listbox';
+export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxComponent;

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

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { Assign } from '../../types';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxProps } from './use-listbox';
+export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxComponent;

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

@@ -0,0 +1,38 @@
+'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 { useListbox } from './use-listbox.js';
+import { ListboxProvider } from './use-listbox-context.js';
+
+const ListboxImpl = (props, ref) => {
+  const [useListboxProps, localProps] = createSplitProps()(props, [
+    "collection",
+    "defaultHighlightedValue",
+    "defaultValue",
+    "deselectable",
+    "disabled",
+    "disallowSelectAll",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "onHighlightChange",
+    "onSelect",
+    "onValueChange",
+    "orientation",
+    "scrollToIndexFn",
+    "selectionMode",
+    "selectOnHighlight",
+    "typeahead",
+    "value"
+  ]);
+  const listbox = useListbox(useListboxProps);
+  const mergedProps = mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRoot = forwardRef(ListboxImpl);
+
+export { ListboxRoot };

package/dist/components/listbox/listbox-value-text.cjs

@@ -0,0 +1,20 @@
+'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 ListboxValueText = react.forwardRef((props, ref) => {
+  const { children, placeholder, ...localprops } = props;
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || listbox.valueAsString || placeholder });
+});
+ListboxValueText.displayName = "ListboxValueText";
+
+exports.ListboxValueText = ListboxValueText;

package/dist/components/listbox/listbox-value-text.d.cts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxValueTextBaseProps extends PolymorphicProps {
+    /**
+     * Text to display when no value is listboxed.
+     */
+    placeholder?: string;
+}
+export interface ListboxValueTextProps extends HTMLProps<'span'>, ListboxValueTextBaseProps {
+}
+export declare const ListboxValueText: ForwardRefExoticComponent<ListboxValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-value-text.d.ts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxValueTextBaseProps extends PolymorphicProps {
+    /**
+     * Text to display when no value is listboxed.
+     */
+    placeholder?: string;
+}
+export interface ListboxValueTextProps extends HTMLProps<'span'>, ListboxValueTextBaseProps {
+}
+export declare const ListboxValueText: ForwardRefExoticComponent<ListboxValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-value-text.js

@@ -0,0 +1,16 @@
+'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 ListboxValueText = forwardRef((props, ref) => {
+  const { children, placeholder, ...localprops } = props;
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || listbox.valueAsString || placeholder });
+});
+ListboxValueText.displayName = "ListboxValueText";
+
+export { ListboxValueText };

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

@@ -0,0 +1 @@
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';

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

@@ -0,0 +1 @@
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';