@ark-ui/react 5.20.0 → 5.22.0

package/dist/components/index.js

@@ -129,6 +129,7 @@ export { createFileTreeCollection, createTreeCollection } from './collection/tre
 export { useListCollection } from './collection/use-list-collection.js';
 export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.js';
 export { ComboboxContent } from './combobox/combobox-content.js';
+export { ComboboxEmpty } from './combobox/combobox-empty.js';
 export { ComboboxContext } from './combobox/combobox-context.js';
 export { ComboboxControl } from './combobox/combobox-control.js';
 export { ComboboxInput } from './combobox/combobox-input.js';
@@ -144,6 +145,7 @@ export { ComboboxPositioner } from './combobox/combobox-positioner.js';
 export { ComboboxRoot } from './combobox/combobox-root.js';
 export { ComboboxRootProvider } from './combobox/combobox-root-provider.js';
 export { ComboboxTrigger } from './combobox/combobox-trigger.js';
+export { comboboxAnatomy } from './combobox/combobox.anatomy.js';
 export { useCombobox } from './combobox/use-combobox.js';
 export { useComboboxContext } from './combobox/use-combobox-context.js';
 export { useComboboxItemContext } from './combobox/use-combobox-item-context.js';
@@ -304,6 +306,7 @@ import * as jsonTreeView from './json-tree-view/json-tree-view.js';
 export { jsonTreeView as JsonTreeView };
 export { ListboxContent } from './listbox/listbox-content.js';
 export { ListboxContext } from './listbox/listbox-context.js';
+export { ListboxEmpty } from './listbox/listbox-empty.js';
 export { ListboxInput } from './listbox/listbox-input.js';
 export { ListboxItem } from './listbox/listbox-item.js';
 export { ListboxItemContext } from './listbox/listbox-item-context.js';
@@ -315,6 +318,7 @@ 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 { listboxAnatomy } from './listbox/listbox.anatomy.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';
@@ -740,13 +744,11 @@ export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const listCollection = require('../collection/list-collection.cjs');
 const listboxContent = require('./listbox-content.cjs');
 const listboxContext = require('./listbox-context.cjs');
+const listboxEmpty = require('./listbox-empty.cjs');
 const listboxInput = require('./listbox-input.cjs');
 const listboxItem = require('./listbox-item.cjs');
 const listboxItemContext = require('./listbox-item-context.cjs');
@@ -16,17 +17,18 @@ 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 listbox_anatomy = require('./listbox.anatomy.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');
+const listbox = require('./listbox.cjs');
 
 
 
 exports.createListCollection = listCollection.createListCollection;
 exports.ListboxContent = listboxContent.ListboxContent;
 exports.ListboxContext = listboxContext.ListboxContext;
+exports.ListboxEmpty = listboxEmpty.ListboxEmpty;
 exports.ListboxInput = listboxInput.ListboxInput;
 exports.ListboxItem = listboxItem.ListboxItem;
 exports.ListboxItemContext = listboxItemContext.ListboxItemContext;
@@ -38,11 +40,8 @@ exports.ListboxLabel = listboxLabel.ListboxLabel;
 exports.ListboxRoot = listboxRoot.ListboxRoot;
 exports.ListboxRootProvider = listboxRootProvider.ListboxRootProvider;
 exports.ListboxValueText = listboxValueText.ListboxValueText;
+exports.listboxAnatomy = listbox_anatomy.listboxAnatomy;
 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
-});
+exports.Listbox = listbox;

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

@@ -2,6 +2,7 @@ export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToI
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { ListboxContent, type ListboxContentBaseProps, type ListboxContentProps } from './listbox-content';
 export { ListboxContext, type ListboxContextProps } from './listbox-context';
+export { ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps } from './listbox-empty';
 export { ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input';
 export { ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item';
 export { ListboxItemContext, type ListboxItemContextProps } from './listbox-item-context';

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

@@ -2,6 +2,7 @@ export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToI
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { ListboxContent, type ListboxContentBaseProps, type ListboxContentProps } from './listbox-content';
 export { ListboxContext, type ListboxContextProps } from './listbox-context';
+export { ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps } from './listbox-empty';
 export { ListboxInput, type ListboxInputBaseProps, type ListboxInputProps } from './listbox-input';
 export { ListboxItem, type ListboxItemBaseProps, type ListboxItemProps } from './listbox-item';
 export { ListboxItemContext, type ListboxItemContextProps } from './listbox-item-context';

package/dist/components/listbox/index.js

@@ -1,6 +1,7 @@
 export { createListCollection } from '../collection/list-collection.js';
 export { ListboxContent } from './listbox-content.js';
 export { ListboxContext } from './listbox-context.js';
+export { ListboxEmpty } from './listbox-empty.js';
 export { ListboxInput } from './listbox-input.js';
 export { ListboxItem } from './listbox-item.js';
 export { ListboxItemContext } from './listbox-item-context.js';
@@ -12,9 +13,9 @@ 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 { listboxAnatomy } from './listbox.anatomy.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-empty.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const factory = require('../factory.cjs');
+const listbox_anatomy = require('./listbox.anatomy.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const parts = listbox_anatomy.listboxAnatomy.build();
+const ListboxEmpty = react.forwardRef((props, ref) => {
+  const listbox = useListboxContext.useListboxContext();
+  if (listbox.collection.size !== 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...parts.empty.attrs, ...props, role: "presentation", ref });
+});
+ListboxEmpty.displayName = "ListboxEmpty";
+
+exports.ListboxEmpty = ListboxEmpty;

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

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

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

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

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { listboxAnatomy } from './listbox.anatomy.js';
+import { useListboxContext } from './use-listbox-context.js';
+
+const parts = listboxAnatomy.build();
+const ListboxEmpty = forwardRef((props, ref) => {
+  const listbox = useListboxContext();
+  if (listbox.collection.size !== 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...parts.empty.attrs, ...props, role: "presentation", ref });
+});
+ListboxEmpty.displayName = "ListboxEmpty";
+
+export { ListboxEmpty };

package/dist/components/listbox/listbox.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const listbox = require('@zag-js/listbox');
+
+const listboxAnatomy = listbox.anatomy.extendWith("empty");
+
+exports.listboxAnatomy = listboxAnatomy;

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

@@ -1 +1,2 @@
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const listboxAnatomy: AnatomyInstance<"input" | "label" | "content" | "root" | "item" | "valueText" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

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

@@ -1 +1,2 @@
-export { anatomy as listboxAnatomy } from '@zag-js/listbox';
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const listboxAnatomy: AnatomyInstance<"input" | "label" | "content" | "root" | "item" | "valueText" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/listbox/listbox.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/listbox';
+
+const listboxAnatomy = anatomy.extendWith("empty");
+
+export { listboxAnatomy };

package/dist/components/listbox/listbox.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const listboxContext = require('./listbox-context.cjs');
 const listboxContent = require('./listbox-content.cjs');
+const listboxEmpty = require('./listbox-empty.cjs');
 const listboxInput = require('./listbox-input.cjs');
 const listboxItem = require('./listbox-item.cjs');
 const listboxItemContext = require('./listbox-item-context.cjs');
@@ -20,6 +21,7 @@ const listboxValueText = require('./listbox-value-text.cjs');
 
 exports.Context = listboxContext.ListboxContext;
 exports.Content = listboxContent.ListboxContent;
+exports.Empty = listboxEmpty.ListboxEmpty;
 exports.Input = listboxInput.ListboxInput;
 exports.Item = listboxItem.ListboxItem;
 exports.ItemContext = listboxItemContext.ListboxItemContext;

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

@@ -1,6 +1,7 @@
 export type { HighlightChangeDetails, ScrollToIndexDetails, SelectionDetails, SelectionMode, ValueChangeDetails, } from '@zag-js/listbox';
 export { ListboxContext as Context, type ListboxContextProps as ContextProps } from './listbox-context';
 export { ListboxContent as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content';
+export { ListboxEmpty as Empty, type ListboxEmptyBaseProps as EmptyBaseProps, type ListboxEmptyProps as EmptyProps, } from './listbox-empty';
 export { ListboxInput as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input';
 export { ListboxItem as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item';
 export { ListboxItemContext as ItemContext, type ListboxItemContextProps as ItemContextProps, } from './listbox-item-context';

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

@@ -1,6 +1,7 @@
 export type { HighlightChangeDetails, ScrollToIndexDetails, SelectionDetails, SelectionMode, ValueChangeDetails, } from '@zag-js/listbox';
 export { ListboxContext as Context, type ListboxContextProps as ContextProps } from './listbox-context';
 export { ListboxContent as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content';
+export { ListboxEmpty as Empty, type ListboxEmptyBaseProps as EmptyBaseProps, type ListboxEmptyProps as EmptyProps, } from './listbox-empty';
 export { ListboxInput as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input';
 export { ListboxItem as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item';
 export { ListboxItemContext as ItemContext, type ListboxItemContextProps as ItemContextProps, } from './listbox-item-context';

package/dist/components/listbox/listbox.js

@@ -1,5 +1,6 @@
 export { ListboxContext as Context } from './listbox-context.js';
 export { ListboxContent as Content } from './listbox-content.js';
+export { ListboxEmpty as Empty } from './listbox-empty.js';
 export { ListboxInput as Input } from './listbox-input.js';
 export { ListboxItem as Item } from './listbox-item.js';
 export { ListboxItemContext as ItemContext } from './listbox-item-context.js';

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

@@ -36,6 +36,7 @@ const MenuRoot = (props) => {
     "onInteractOutside",
     "onOpenChange",
     "onPointerDownOutside",
+    "onRequestDismiss",
     "onSelect",
     "open",
     "positioning",

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

@@ -32,6 +32,7 @@ const MenuRoot = (props) => {
     "onInteractOutside",
     "onOpenChange",
     "onPointerDownOutside",
+    "onRequestDismiss",
     "onSelect",
     "open",
     "positioning",

package/dist/components/segment-group/segment-group.anatomy.d.cts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/tabs/tab-content.cjs

@@ -9,7 +9,6 @@ const react = require('react');
 const composeRefs = require('../../utils/compose-refs.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
-const useDebounce = require('../../utils/use-debounce.cjs');
 const factory = require('../factory.cjs');
 const usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
@@ -21,7 +20,7 @@ const TabContent = react.forwardRef((props, ref) => {
   const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
   const presence = usePresence.usePresence({
     ...renderStrategyProps,
-    present: useDebounce.useDebounce(tabs.value === props.value, 0),
+    present: tabs.value === props.value,
     immediate: true
   });
   const mergedProps = react$1.mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);

package/dist/components/tabs/tab-content.js

@@ -5,7 +5,6 @@ import { forwardRef } from 'react';
 import { composeRefs } from '../../utils/compose-refs.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
-import { useDebounce } from '../../utils/use-debounce.js';
 import { ark } from '../factory.js';
 import { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
@@ -17,7 +16,7 @@ const TabContent = forwardRef((props, ref) => {
   const renderStrategyProps = useRenderStrategyPropsContext();
   const presence = usePresence({
     ...renderStrategyProps,
-    present: useDebounce(tabs.value === props.value, 0),
+    present: tabs.value === props.value,
     immediate: true
   });
   const mergedProps = mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);

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

@@ -1,3 +1,4 @@
+export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
 export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';

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

@@ -1,3 +1,4 @@
+export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
 export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
 export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';

package/dist/index.cjs

@@ -125,6 +125,7 @@ const treeCollection = require('./components/collection/tree-collection.cjs');
 const useListCollection = require('./components/collection/use-list-collection.cjs');
 const comboboxClearTrigger = require('./components/combobox/combobox-clear-trigger.cjs');
 const comboboxContent = require('./components/combobox/combobox-content.cjs');
+const comboboxEmpty = require('./components/combobox/combobox-empty.cjs');
 const comboboxContext = require('./components/combobox/combobox-context.cjs');
 const comboboxControl = require('./components/combobox/combobox-control.cjs');
 const comboboxInput = require('./components/combobox/combobox-input.cjs');
@@ -140,10 +141,11 @@ const comboboxPositioner = require('./components/combobox/combobox-positioner.cj
 const comboboxRoot = require('./components/combobox/combobox-root.cjs');
 const comboboxRootProvider = require('./components/combobox/combobox-root-provider.cjs');
 const comboboxTrigger = require('./components/combobox/combobox-trigger.cjs');
+const combobox_anatomy = require('./components/combobox/combobox.anatomy.cjs');
 const useCombobox = require('./components/combobox/use-combobox.cjs');
 const useComboboxContext = require('./components/combobox/use-combobox-context.cjs');
 const useComboboxItemContext = require('./components/combobox/use-combobox-item-context.cjs');
-const combobox$1 = require('./components/combobox/combobox.cjs');
+const combobox = require('./components/combobox/combobox.cjs');
 const datePicker = require('@zag-js/date-picker');
 const datePickerClearTrigger = require('./components/date-picker/date-picker-clear-trigger.cjs');
 const datePickerContent = require('./components/date-picker/date-picker-content.cjs');
@@ -289,6 +291,7 @@ const useJsonTreeView = require('./components/json-tree-view/use-json-tree-view.
 const jsonTreeView = require('./components/json-tree-view/json-tree-view.cjs');
 const listboxContent = require('./components/listbox/listbox-content.cjs');
 const listboxContext = require('./components/listbox/listbox-context.cjs');
+const listboxEmpty = require('./components/listbox/listbox-empty.cjs');
 const listboxInput = require('./components/listbox/listbox-input.cjs');
 const listboxItem = require('./components/listbox/listbox-item.cjs');
 const listboxItemContext = require('./components/listbox/listbox-item-context.cjs');
@@ -300,10 +303,11 @@ const listboxLabel = require('./components/listbox/listbox-label.cjs');
 const listboxRoot = require('./components/listbox/listbox-root.cjs');
 const listboxRootProvider = require('./components/listbox/listbox-root-provider.cjs');
 const listboxValueText = require('./components/listbox/listbox-value-text.cjs');
+const listbox_anatomy = require('./components/listbox/listbox.anatomy.cjs');
 const useListbox = require('./components/listbox/use-listbox.cjs');
 const useListboxContext = require('./components/listbox/use-listbox-context.cjs');
 const useListboxItemContext = require('./components/listbox/use-listbox-item-context.cjs');
-const listbox$1 = require('./components/listbox/listbox.cjs');
+const listbox = require('./components/listbox/listbox.cjs');
 const menuArrow = require('./components/menu/menu-arrow.cjs');
 const menuArrowTip = require('./components/menu/menu-arrow-tip.cjs');
 const menuCheckboxItem = require('./components/menu/menu-checkbox-item.cjs');
@@ -693,6 +697,7 @@ const treeView$1 = require('./components/tree-view/tree-view.cjs');
 const environmentProvider = require('./providers/environment/environment-provider.cjs');
 const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
 const localeProvider = require('./providers/locale/locale-provider.cjs');
+const useCollator = require('./providers/locale/use-collator.cjs');
 const useFilter = require('./providers/locale/use-filter.cjs');
 const useLocaleContext = require('./providers/locale/use-locale-context.cjs');
 const accordion = require('@zag-js/accordion');
@@ -701,13 +706,11 @@ const avatar = require('@zag-js/avatar');
 const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
-const combobox = require('@zag-js/combobox');
 const dialog = require('@zag-js/dialog');
 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');
@@ -863,6 +866,7 @@ exports.createTreeCollection = treeCollection.createTreeCollection;
 exports.useListCollection = useListCollection.useListCollection;
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
+exports.ComboboxEmpty = comboboxEmpty.ComboboxEmpty;
 exports.ComboboxContext = comboboxContext.ComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
@@ -878,10 +882,11 @@ exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxRoot = comboboxRoot.ComboboxRoot;
 exports.ComboboxRootProvider = comboboxRootProvider.ComboboxRootProvider;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
+exports.comboboxAnatomy = combobox_anatomy.comboboxAnatomy;
 exports.useCombobox = useCombobox.useCombobox;
 exports.useComboboxContext = useComboboxContext.useComboboxContext;
 exports.useComboboxItemContext = useComboboxItemContext.useComboboxItemContext;
-exports.Combobox = combobox$1;
+exports.Combobox = combobox;
 Object.defineProperty(exports, "parseDate", {
 	enumerable: true,
 	get: () => datePicker.parse
@@ -1031,6 +1036,7 @@ exports.useJsonTreeView = useJsonTreeView.useJsonTreeView;
 exports.JsonTreeView = jsonTreeView;
 exports.ListboxContent = listboxContent.ListboxContent;
 exports.ListboxContext = listboxContext.ListboxContext;
+exports.ListboxEmpty = listboxEmpty.ListboxEmpty;
 exports.ListboxInput = listboxInput.ListboxInput;
 exports.ListboxItem = listboxItem.ListboxItem;
 exports.ListboxItemContext = listboxItemContext.ListboxItemContext;
@@ -1042,10 +1048,11 @@ exports.ListboxLabel = listboxLabel.ListboxLabel;
 exports.ListboxRoot = listboxRoot.ListboxRoot;
 exports.ListboxRootProvider = listboxRootProvider.ListboxRootProvider;
 exports.ListboxValueText = listboxValueText.ListboxValueText;
+exports.listboxAnatomy = listbox_anatomy.listboxAnatomy;
 exports.useListbox = useListbox.useListbox;
 exports.useListboxContext = useListboxContext.useListboxContext;
 exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
-exports.Listbox = listbox$1;
+exports.Listbox = listbox;
 exports.MenuArrow = menuArrow.MenuArrow;
 exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
 exports.MenuCheckboxItem = menuCheckboxItem.MenuCheckboxItem;
@@ -1439,6 +1446,7 @@ exports.TreeView = treeView$1;
 exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider.LocaleProvider;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;
 Object.defineProperty(exports, "accordionAnatomy", {
@@ -1465,10 +1473,6 @@ Object.defineProperty(exports, "collapsibleAnatomy", {
 	enumerable: true,
 	get: () => collapsible.anatomy
 });
-Object.defineProperty(exports, "comboboxAnatomy", {
-	enumerable: true,
-	get: () => combobox.anatomy
-});
 Object.defineProperty(exports, "dialogAnatomy", {
 	enumerable: true,
 	get: () => dialog.anatomy
@@ -1489,10 +1493,6 @@ 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/index.js

@@ -129,6 +129,7 @@ export { createFileTreeCollection, createTreeCollection } from './components/col
 export { useListCollection } from './components/collection/use-list-collection.js';
 export { ComboboxClearTrigger } from './components/combobox/combobox-clear-trigger.js';
 export { ComboboxContent } from './components/combobox/combobox-content.js';
+export { ComboboxEmpty } from './components/combobox/combobox-empty.js';
 export { ComboboxContext } from './components/combobox/combobox-context.js';
 export { ComboboxControl } from './components/combobox/combobox-control.js';
 export { ComboboxInput } from './components/combobox/combobox-input.js';
@@ -144,6 +145,7 @@ export { ComboboxPositioner } from './components/combobox/combobox-positioner.js
 export { ComboboxRoot } from './components/combobox/combobox-root.js';
 export { ComboboxRootProvider } from './components/combobox/combobox-root-provider.js';
 export { ComboboxTrigger } from './components/combobox/combobox-trigger.js';
+export { comboboxAnatomy } from './components/combobox/combobox.anatomy.js';
 export { useCombobox } from './components/combobox/use-combobox.js';
 export { useComboboxContext } from './components/combobox/use-combobox-context.js';
 export { useComboboxItemContext } from './components/combobox/use-combobox-item-context.js';
@@ -304,6 +306,7 @@ import * as jsonTreeView from './components/json-tree-view/json-tree-view.js';
 export { jsonTreeView as JsonTreeView };
 export { ListboxContent } from './components/listbox/listbox-content.js';
 export { ListboxContext } from './components/listbox/listbox-context.js';
+export { ListboxEmpty } from './components/listbox/listbox-empty.js';
 export { ListboxInput } from './components/listbox/listbox-input.js';
 export { ListboxItem } from './components/listbox/listbox-item.js';
 export { ListboxItemContext } from './components/listbox/listbox-item-context.js';
@@ -315,6 +318,7 @@ export { ListboxLabel } from './components/listbox/listbox-label.js';
 export { ListboxRoot } from './components/listbox/listbox-root.js';
 export { ListboxRootProvider } from './components/listbox/listbox-root-provider.js';
 export { ListboxValueText } from './components/listbox/listbox-value-text.js';
+export { listboxAnatomy } from './components/listbox/listbox.anatomy.js';
 export { useListbox } from './components/listbox/use-listbox.js';
 export { useListboxContext } from './components/listbox/use-listbox-context.js';
 export { useListboxItemContext } from './components/listbox/use-listbox-item-context.js';
@@ -737,6 +741,7 @@ export { treeView as TreeView };
 export { EnvironmentProvider } from './providers/environment/environment-provider.js';
 export { useEnvironmentContext } from './providers/environment/use-environment-context.js';
 export { LocaleProvider } from './providers/locale/locale-provider.js';
+export { useCollator } from './providers/locale/use-collator.js';
 export { useFilter } from './providers/locale/use-filter.js';
 export { useLocaleContext } from './providers/locale/use-locale-context.js';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
@@ -745,13 +750,11 @@ export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 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/providers/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const environmentProvider = require('./environment/environment-provider.cjs');
 const useEnvironmentContext = require('./environment/use-environment-context.cjs');
 const localeProvider = require('./locale/locale-provider.cjs');
+const useCollator = require('./locale/use-collator.cjs');
 const useFilter = require('./locale/use-filter.cjs');
 const useLocaleContext = require('./locale/use-locale-context.cjs');
 
@@ -13,5 +14,6 @@ const useLocaleContext = require('./locale/use-locale-context.cjs');
 exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider.LocaleProvider;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/providers/index.js

@@ -1,5 +1,6 @@
 export { EnvironmentProvider } from './environment/environment-provider.js';
 export { useEnvironmentContext } from './environment/use-environment-context.js';
 export { LocaleProvider } from './locale/locale-provider.js';
+export { useCollator } from './locale/use-collator.js';
 export { useFilter } from './locale/use-filter.js';
 export { useLocaleContext } from './locale/use-locale-context.js';

package/dist/providers/locale/index.cjs

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const localeProvider = require('./locale-provider.cjs');
+const useCollator = require('./use-collator.cjs');
 const useFilter = require('./use-filter.cjs');
 const useLocaleContext = require('./use-locale-context.cjs');
 
 
 
 exports.LocaleProvider = localeProvider.LocaleProvider;
+exports.useCollator = useCollator.useCollator;
 exports.useFilter = useFilter.useFilter;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/providers/locale/index.d.cts

@@ -1,3 +1,4 @@
 export { LocaleProvider, type LocaleProviderProps } from './locale-provider';
+export { useCollator, type UseCollatorProps } from './use-collator';
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context';

package/dist/providers/locale/index.d.ts

@@ -1,3 +1,4 @@
 export { LocaleProvider, type LocaleProviderProps } from './locale-provider';
+export { useCollator, type UseCollatorProps } from './use-collator';
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context';

package/dist/providers/locale/index.js

@@ -1,3 +1,4 @@
 export { LocaleProvider } from './locale-provider.js';
+export { useCollator } from './use-collator.js';
 export { useFilter } from './use-filter.js';
 export { useLocaleContext } from './use-locale-context.js';

package/dist/providers/locale/use-collator.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const i18nUtils = require('@zag-js/i18n-utils');
+const useLocaleContext = require('./use-locale-context.cjs');
+const react = require('react');
+
+function useCollator(props = {}) {
+  const env = useLocaleContext.useLocaleContext();
+  const locale = props.locale ?? env.locale;
+  return react.useMemo(() => {
+    const { locale: _, ...options } = props;
+    return i18nUtils.createCollator(locale, options);
+  }, [locale, props]);
+}
+
+exports.useCollator = useCollator;

package/dist/providers/locale/use-collator.d.cts

@@ -0,0 +1,4 @@
+export interface UseCollatorProps extends Intl.CollatorOptions {
+    locale?: string;
+}
+export declare function useCollator(props?: UseCollatorProps): Intl.Collator;