@ark-ui/react 5.5.0 → 5.7.0

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 };

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;