@ark-ui/react 5.13.0 → 5.14.1

package/dist/components/date-picker/date-picker-range-text.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
+const utils = require('@zag-js/utils');
 const react = require('react');
 const factory = require('../factory.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
@@ -12,7 +13,11 @@ const useDatePickerContext = require('./use-date-picker-context.cjs');
 const DatePickerRangeText = react.forwardRef((props, ref) => {
   const datePicker = useDatePickerContext.useDatePickerContext();
   const mergedProps = react$1.mergeProps(datePicker.getRangeTextProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: datePicker.visibleRangeText.start });
+  const visibleRangeText = react.useMemo(() => {
+    const { start, end } = datePicker.visibleRangeText;
+    return utils.uniq([start, end]).filter(Boolean).join(" - ");
+  }, [datePicker.visibleRangeText]);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: visibleRangeText });
 });
 DatePickerRangeText.displayName = "DatePickerRangeText";
 

package/dist/components/date-picker/date-picker-range-text.js

@@ -1,14 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
+import { uniq } from '@zag-js/utils';
+import { forwardRef, useMemo } from 'react';
 import { ark } from '../factory.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
 
 const DatePickerRangeText = forwardRef((props, ref) => {
   const datePicker = useDatePickerContext();
   const mergedProps = mergeProps(datePicker.getRangeTextProps(), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: datePicker.visibleRangeText.start });
+  const visibleRangeText = useMemo(() => {
+    const { start, end } = datePicker.visibleRangeText;
+    return uniq([start, end]).filter(Boolean).join(" - ");
+  }, [datePicker.visibleRangeText]);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: visibleRangeText });
 });
 DatePickerRangeText.displayName = "DatePickerRangeText";
 

package/dist/components/index.cjs

@@ -281,6 +281,7 @@ const hoverCardTrigger = require('./hover-card/hover-card-trigger.cjs');
 const useHoverCard = require('./hover-card/use-hover-card.cjs');
 const useHoverCardContext = require('./hover-card/use-hover-card-context.cjs');
 const hoverCard$1 = require('./hover-card/hover-card.cjs');
+const listboxContext = require('./listbox/listbox-context.cjs');
 const listboxContent = require('./listbox/listbox-content.cjs');
 const listboxInput = require('./listbox/listbox-input.cjs');
 const listboxItem = require('./listbox/listbox-item.cjs');
@@ -996,6 +997,7 @@ exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
 exports.HoverCard = hoverCard$1;
+exports.ListboxContext = listboxContext.ListboxContext;
 exports.ListboxContent = listboxContent.ListboxContent;
 exports.ListboxInput = listboxInput.ListboxInput;
 exports.ListboxItem = listboxItem.ListboxItem;

package/dist/components/index.js

@@ -295,6 +295,7 @@ export { useHoverCard } from './hover-card/use-hover-card.js';
 export { useHoverCardContext } from './hover-card/use-hover-card-context.js';
 import * as hoverCard from './hover-card/hover-card.js';
 export { hoverCard as HoverCard };
+export { ListboxContext } from './listbox/listbox-context.js';
 export { ListboxContent } from './listbox/listbox-content.js';
 export { ListboxInput } from './listbox/listbox-input.js';
 export { ListboxItem } from './listbox/listbox-item.js';

package/dist/components/listbox/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const listCollection = require('../collection/list-collection.cjs');
+const listboxContext = require('./listbox-context.cjs');
 const listboxContent = require('./listbox-content.cjs');
 const listboxInput = require('./listbox-input.cjs');
 const listboxItem = require('./listbox-item.cjs');
@@ -23,6 +24,7 @@ const listbox = require('@zag-js/listbox');
 
 
 exports.createListCollection = listCollection.createListCollection;
+exports.ListboxContext = listboxContext.ListboxContext;
 exports.ListboxContent = listboxContent.ListboxContent;
 exports.ListboxInput = listboxInput.ListboxInput;
 exports.ListboxItem = listboxItem.ListboxItem;

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

@@ -1,5 +1,6 @@
 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 { ListboxContext, type ListboxContextProps } from './listbox-context';
 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';

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

@@ -1,5 +1,6 @@
 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 { ListboxContext, type ListboxContextProps } from './listbox-context';
 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';

package/dist/components/listbox/index.js

@@ -1,4 +1,5 @@
 export { createListCollection } from '../collection/list-collection.js';
+export { ListboxContext } from './listbox-context.js';
 export { ListboxContent } from './listbox-content.js';
 export { ListboxInput } from './listbox-input.js';
 export { ListboxItem } from './listbox-item.js';

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

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxContext = (props) => props.children(useListboxContext.useListboxContext());
+
+exports.ListboxContext = ListboxContext;

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

@@ -0,0 +1,6 @@
+'use client';
+import { useListboxContext } from './use-listbox-context.js';
+
+const ListboxContext = (props) => props.children(useListboxContext());
+
+export { ListboxContext };

package/dist/components/listbox/listbox.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const listboxContext = require('./listbox-context.cjs');
 const listboxContent = require('./listbox-content.cjs');
 const listboxInput = require('./listbox-input.cjs');
 const listboxItem = require('./listbox-item.cjs');
@@ -16,6 +17,7 @@ const listboxValueText = require('./listbox-value-text.cjs');
 
 
 
+exports.Context = listboxContext.ListboxContext;
 exports.Content = listboxContent.ListboxContent;
 exports.Input = listboxInput.ListboxInput;
 exports.Item = listboxItem.ListboxItem;

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

@@ -1,4 +1,5 @@
 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 { 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';

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

@@ -1,4 +1,5 @@
 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 { 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';

package/dist/components/listbox/listbox.js

@@ -1,3 +1,4 @@
+export { ListboxContext as Context } from './listbox-context.js';
 export { ListboxContent as Content } from './listbox-content.js';
 export { ListboxInput as Input } from './listbox-input.js';
 export { ListboxItem as Item } from './listbox-item.js';

package/dist/components/menu/menu-checkbox-item.cjs

@@ -28,7 +28,7 @@ const MenuCheckboxItem = react.forwardRef((props, ref) => {
   const menu = useMenuContext.useMenuContext();
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
   const optionItemState = menu.getOptionItemState(optionItemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-checkbox-item.js

@@ -6,7 +6,7 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemProvider } from './use-menu-item-context.js';
-import { MenuOptionItemPropsProvider } from './use-menu-option-item-props-context.js';
+import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
 const MenuCheckboxItem = forwardRef((props, ref) => {
   const [partialOptionItemProps, localProps] = createSplitProps()(props, [
@@ -24,7 +24,7 @@ const MenuCheckboxItem = forwardRef((props, ref) => {
   const menu = useMenuContext();
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
   const optionItemState = menu.getOptionItemState(optionItemProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(MenuItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-item-indicator.cjs

@@ -12,8 +12,8 @@ const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-cont
 
 const MenuItemIndicator = react.forwardRef((props, ref) => {
   const menu = useMenuContext.useMenuContext();
-  const optionItemProps = useMenuOptionItemPropsContext.useMenuOptionItemPropsContext();
-  const mergedProps = react$1.mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
+  const itemProps = useMenuOptionItemPropsContext.useMenuItemPropsContext();
+  const mergedProps = react$1.mergeProps(menu.getItemIndicatorProps(itemProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 MenuItemIndicator.displayName = "MenuItemIndicator";

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

@@ -4,12 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
-import { useMenuOptionItemPropsContext } from './use-menu-option-item-props-context.js';
+import { useMenuItemPropsContext } from './use-menu-option-item-props-context.js';
 
 const MenuItemIndicator = forwardRef((props, ref) => {
   const menu = useMenuContext();
-  const optionItemProps = useMenuOptionItemPropsContext();
-  const mergedProps = mergeProps(menu.getItemIndicatorProps(optionItemProps), props);
+  const itemProps = useMenuItemPropsContext();
+  const mergedProps = mergeProps(menu.getItemIndicatorProps(itemProps), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 MenuItemIndicator.displayName = "MenuItemIndicator";

package/dist/components/menu/menu-item-text.cjs

@@ -12,8 +12,8 @@ const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-cont
 
 const MenuItemText = react.forwardRef((props, ref) => {
   const menu = useMenuContext.useMenuContext();
-  const optionItemProps = useMenuOptionItemPropsContext.useMenuOptionItemPropsContext();
-  const mergedProps = react$1.mergeProps(menu.getItemTextProps(optionItemProps), props);
+  const itemProps = useMenuOptionItemPropsContext.useMenuItemPropsContext();
+  const mergedProps = react$1.mergeProps(menu.getItemTextProps(itemProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 MenuItemText.displayName = "MenuItemText";

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

@@ -4,12 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
-import { useMenuOptionItemPropsContext } from './use-menu-option-item-props-context.js';
+import { useMenuItemPropsContext } from './use-menu-option-item-props-context.js';
 
 const MenuItemText = forwardRef((props, ref) => {
   const menu = useMenuContext();
-  const optionItemProps = useMenuOptionItemPropsContext();
-  const mergedProps = mergeProps(menu.getItemTextProps(optionItemProps), props);
+  const itemProps = useMenuItemPropsContext();
+  const mergedProps = mergeProps(menu.getItemTextProps(itemProps), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 MenuItemText.displayName = "MenuItemText";

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

@@ -10,6 +10,7 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemContext = require('./use-menu-item-context.cjs');
+const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
 const MenuItem = react.forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps.createSplitProps()(props, [
@@ -25,7 +26,7 @@ const MenuItem = react.forwardRef((props, ref) => {
   react.useEffect(() => {
     return menu.addItemListener({ id: itemState.id, onSelect: itemProps.onSelect });
   }, [itemState.id, itemProps.onSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -6,6 +6,7 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemProvider } from './use-menu-item-context.js';
+import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
 const MenuItem = forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps()(props, [
@@ -21,7 +22,7 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     return menu.addItemListener({ id: itemState.id, onSelect: itemProps.onSelect });
   }, [itemState.id, itemProps.onSelect]);
-  return /* @__PURE__ */ jsx(MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  return /* @__PURE__ */ jsx(MenuItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuItem.displayName = "MenuItem";
 

package/dist/components/menu/menu-radio-item.cjs

@@ -30,7 +30,7 @@ const MenuRadioItem = react.forwardRef((props, ref) => {
   };
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
   const optionItemState = menu.getOptionItemState(optionItemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/menu/menu-radio-item.js

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemProvider } from './use-menu-item-context.js';
 import { useMenuItemGroupContext } from './use-menu-item-group-context.js';
-import { MenuOptionItemPropsProvider } from './use-menu-option-item-props-context.js';
+import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
 const MenuRadioItem = forwardRef((props, ref) => {
   const [partialItemProps, localProps] = createSplitProps()(props, [
@@ -26,7 +26,7 @@ const MenuRadioItem = forwardRef((props, ref) => {
   };
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
   const optionItemState = menu.getOptionItemState(optionItemProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(MenuItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/menu/use-menu-option-item-props-context.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext.createContext({
-  name: "MenuOptionItemPropsContext",
-  hookName: "useMenuOptionItemPropsContext",
-  providerName: "<MenuOptionItemPropsProvider />"
+const [MenuItemPropsProvider, useMenuItemPropsContext] = createContext.createContext({
+  name: "MenuItemPropsContext",
+  hookName: "useMenuItemPropsContext",
+  providerName: "<MenuItemPropsProvider />"
 });
 
-exports.MenuOptionItemPropsProvider = MenuOptionItemPropsProvider;
-exports.useMenuOptionItemPropsContext = useMenuOptionItemPropsContext;
+exports.MenuItemPropsProvider = MenuItemPropsProvider;
+exports.useMenuItemPropsContext = useMenuItemPropsContext;

package/dist/components/menu/use-menu-option-item-props-context.d.cts

@@ -1,3 +1,3 @@
-import { OptionItemProps } from '@zag-js/menu';
+import { ItemBaseProps } from '@zag-js/menu';
 import { Provider } from 'react';
-export declare const MenuOptionItemPropsProvider: Provider<OptionItemProps>, useMenuOptionItemPropsContext: () => OptionItemProps;
+export declare const MenuItemPropsProvider: Provider<ItemBaseProps>, useMenuItemPropsContext: () => ItemBaseProps;

package/dist/components/menu/use-menu-option-item-props-context.d.ts

@@ -1,3 +1,3 @@
-import { OptionItemProps } from '@zag-js/menu';
+import { ItemBaseProps } from '@zag-js/menu';
 import { Provider } from 'react';
-export declare const MenuOptionItemPropsProvider: Provider<OptionItemProps>, useMenuOptionItemPropsContext: () => OptionItemProps;
+export declare const MenuItemPropsProvider: Provider<ItemBaseProps>, useMenuItemPropsContext: () => ItemBaseProps;

package/dist/components/menu/use-menu-option-item-props-context.js

@@ -1,10 +1,10 @@
 'use client';
 import { createContext } from '../../utils/create-context.js';
 
-const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
-  name: "MenuOptionItemPropsContext",
-  hookName: "useMenuOptionItemPropsContext",
-  providerName: "<MenuOptionItemPropsProvider />"
+const [MenuItemPropsProvider, useMenuItemPropsContext] = createContext({
+  name: "MenuItemPropsContext",
+  hookName: "useMenuItemPropsContext",
+  providerName: "<MenuItemPropsProvider />"
 });
 
-export { MenuOptionItemPropsProvider, useMenuOptionItemPropsContext };
+export { MenuItemPropsProvider, useMenuItemPropsContext };

package/dist/components/tree-view/tree-view-label.cjs

@@ -12,7 +12,7 @@ const useTreeViewContext = require('./use-tree-view-context.cjs');
 const TreeViewLabel = react.forwardRef((props, ref) => {
   const treeView = useTreeViewContext.useTreeViewContext();
   const mergedProps = react$1.mergeProps(treeView.getLabelProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.h3, { ...mergedProps, ref });
 });
 TreeViewLabel.displayName = "TreeViewLabel";
 

package/dist/components/tree-view/tree-view-label.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TreeViewLabelBaseProps extends PolymorphicProps {
 }
-export interface TreeViewLabelProps extends HTMLProps<'label'>, TreeViewLabelBaseProps {
+export interface TreeViewLabelProps extends HTMLProps<'h3'>, TreeViewLabelBaseProps {
 }
-export declare const TreeViewLabel: ForwardRefExoticComponent<TreeViewLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const TreeViewLabel: ForwardRefExoticComponent<TreeViewLabelProps & RefAttributes<HTMLHeadingElement>>;

package/dist/components/tree-view/tree-view-label.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TreeViewLabelBaseProps extends PolymorphicProps {
 }
-export interface TreeViewLabelProps extends HTMLProps<'label'>, TreeViewLabelBaseProps {
+export interface TreeViewLabelProps extends HTMLProps<'h3'>, TreeViewLabelBaseProps {
 }
-export declare const TreeViewLabel: ForwardRefExoticComponent<TreeViewLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const TreeViewLabel: ForwardRefExoticComponent<TreeViewLabelProps & RefAttributes<HTMLHeadingElement>>;

package/dist/components/tree-view/tree-view-label.js

@@ -8,7 +8,7 @@ import { useTreeViewContext } from './use-tree-view-context.js';
 const TreeViewLabel = forwardRef((props, ref) => {
   const treeView = useTreeViewContext();
   const mergedProps = mergeProps(treeView.getLabelProps(), props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.h3, { ...mergedProps, ref });
 });
 TreeViewLabel.displayName = "TreeViewLabel";
 

package/dist/index.cjs

@@ -281,6 +281,7 @@ const hoverCardTrigger = require('./components/hover-card/hover-card-trigger.cjs
 const useHoverCard = require('./components/hover-card/use-hover-card.cjs');
 const useHoverCardContext = require('./components/hover-card/use-hover-card-context.cjs');
 const hoverCard$1 = require('./components/hover-card/hover-card.cjs');
+const listboxContext = require('./components/listbox/listbox-context.cjs');
 const listboxContent = require('./components/listbox/listbox-content.cjs');
 const listboxInput = require('./components/listbox/listbox-input.cjs');
 const listboxItem = require('./components/listbox/listbox-item.cjs');
@@ -1001,6 +1002,7 @@ exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
 exports.HoverCard = hoverCard$1;
+exports.ListboxContext = listboxContext.ListboxContext;
 exports.ListboxContent = listboxContent.ListboxContent;
 exports.ListboxInput = listboxInput.ListboxInput;
 exports.ListboxItem = listboxItem.ListboxItem;

package/dist/index.js

@@ -295,6 +295,7 @@ export { useHoverCard } from './components/hover-card/use-hover-card.js';
 export { useHoverCardContext } from './components/hover-card/use-hover-card-context.js';
 import * as hoverCard from './components/hover-card/hover-card.js';
 export { hoverCard as HoverCard };
+export { ListboxContext } from './components/listbox/listbox-context.js';
 export { ListboxContent } from './components/listbox/listbox-content.js';
 export { ListboxInput } from './components/listbox/listbox-input.js';
 export { ListboxItem } from './components/listbox/listbox-item.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.13.0",
+  "version": "5.14.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -80,16 +80,6 @@
         "default": "./dist/components/anatomy.cjs"
       }
     },
-    "./collection": {
-      "import": {
-        "types": "./dist/components/collection.d.ts",
-        "default": "./dist/components/collection.js"
-      },
-      "require": {
-        "types": "./dist/components/collection.d.cts",
-        "default": "./dist/components/collection.cjs"
-      }
-    },
     "./factory": {
       "import": {
         "types": "./dist/components/factory.d.ts",
@@ -150,96 +140,94 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.8.1",
-    "@zag-js/accordion": "1.15.0",
-    "@zag-js/angle-slider": "1.15.0",
-    "@zag-js/anatomy": "1.15.0",
-    "@zag-js/auto-resize": "1.15.0",
-    "@zag-js/avatar": "1.15.0",
-    "@zag-js/carousel": "1.15.0",
-    "@zag-js/checkbox": "1.15.0",
-    "@zag-js/clipboard": "1.15.0",
-    "@zag-js/collapsible": "1.15.0",
-    "@zag-js/collection": "1.15.0",
-    "@zag-js/color-picker": "1.15.0",
-    "@zag-js/color-utils": "1.15.0",
-    "@zag-js/combobox": "1.15.0",
-    "@zag-js/core": "1.15.0",
-    "@zag-js/date-picker": "1.15.0",
-    "@zag-js/date-utils": "1.15.0",
-    "@zag-js/dialog": "1.15.0",
-    "@zag-js/dom-query": "1.15.0",
-    "@zag-js/editable": "1.15.0",
-    "@zag-js/file-upload": "1.15.0",
-    "@zag-js/file-utils": "1.15.0",
-    "@zag-js/focus-trap": "1.15.0",
-    "@zag-js/floating-panel": "1.15.0",
-    "@zag-js/highlight-word": "1.15.0",
-    "@zag-js/hover-card": "1.15.0",
-    "@zag-js/i18n-utils": "1.15.0",
-    "@zag-js/listbox": "1.15.0",
-    "@zag-js/menu": "1.15.0",
-    "@zag-js/number-input": "1.15.0",
-    "@zag-js/pagination": "1.15.0",
-    "@zag-js/password-input": "1.15.0",
-    "@zag-js/pin-input": "1.15.0",
-    "@zag-js/popover": "1.15.0",
-    "@zag-js/presence": "1.15.0",
-    "@zag-js/progress": "1.15.0",
-    "@zag-js/qr-code": "1.15.0",
-    "@zag-js/radio-group": "1.15.0",
-    "@zag-js/rating-group": "1.15.0",
-    "@zag-js/react": "1.15.0",
-    "@zag-js/select": "1.15.0",
-    "@zag-js/signature-pad": "1.15.0",
-    "@zag-js/slider": "1.15.0",
-    "@zag-js/splitter": "1.15.0",
-    "@zag-js/steps": "1.15.0",
-    "@zag-js/switch": "1.15.0",
-    "@zag-js/tabs": "1.15.0",
-    "@zag-js/tags-input": "1.15.0",
-    "@zag-js/time-picker": "1.15.0",
-    "@zag-js/timer": "1.15.0",
-    "@zag-js/toast": "1.15.0",
-    "@zag-js/toggle": "1.15.0",
-    "@zag-js/toggle-group": "1.15.0",
-    "@zag-js/tooltip": "1.15.0",
-    "@zag-js/tour": "1.15.0",
-    "@zag-js/tree-view": "1.15.0",
-    "@zag-js/types": "1.15.0",
-    "@zag-js/utils": "1.15.0"
+    "@internationalized/date": "3.8.2",
+    "@zag-js/accordion": "1.15.5",
+    "@zag-js/angle-slider": "1.15.5",
+    "@zag-js/anatomy": "1.15.5",
+    "@zag-js/auto-resize": "1.15.5",
+    "@zag-js/avatar": "1.15.5",
+    "@zag-js/carousel": "1.15.5",
+    "@zag-js/checkbox": "1.15.5",
+    "@zag-js/clipboard": "1.15.5",
+    "@zag-js/collapsible": "1.15.5",
+    "@zag-js/collection": "1.15.5",
+    "@zag-js/color-picker": "1.15.5",
+    "@zag-js/color-utils": "1.15.5",
+    "@zag-js/combobox": "1.15.5",
+    "@zag-js/core": "1.15.5",
+    "@zag-js/date-picker": "1.15.5",
+    "@zag-js/date-utils": "1.15.5",
+    "@zag-js/dialog": "1.15.5",
+    "@zag-js/dom-query": "1.15.5",
+    "@zag-js/editable": "1.15.5",
+    "@zag-js/file-upload": "1.15.5",
+    "@zag-js/file-utils": "1.15.5",
+    "@zag-js/focus-trap": "1.15.5",
+    "@zag-js/floating-panel": "1.15.5",
+    "@zag-js/highlight-word": "1.15.5",
+    "@zag-js/hover-card": "1.15.5",
+    "@zag-js/i18n-utils": "1.15.5",
+    "@zag-js/listbox": "1.15.5",
+    "@zag-js/menu": "1.15.5",
+    "@zag-js/number-input": "1.15.5",
+    "@zag-js/pagination": "1.15.5",
+    "@zag-js/password-input": "1.15.5",
+    "@zag-js/pin-input": "1.15.5",
+    "@zag-js/popover": "1.15.5",
+    "@zag-js/presence": "1.15.5",
+    "@zag-js/progress": "1.15.5",
+    "@zag-js/qr-code": "1.15.5",
+    "@zag-js/radio-group": "1.15.5",
+    "@zag-js/rating-group": "1.15.5",
+    "@zag-js/react": "1.15.5",
+    "@zag-js/select": "1.15.5",
+    "@zag-js/signature-pad": "1.15.5",
+    "@zag-js/slider": "1.15.5",
+    "@zag-js/splitter": "1.15.5",
+    "@zag-js/steps": "1.15.5",
+    "@zag-js/switch": "1.15.5",
+    "@zag-js/tabs": "1.15.5",
+    "@zag-js/tags-input": "1.15.5",
+    "@zag-js/time-picker": "1.15.5",
+    "@zag-js/timer": "1.15.5",
+    "@zag-js/toast": "1.15.5",
+    "@zag-js/toggle": "1.15.5",
+    "@zag-js/toggle-group": "1.15.5",
+    "@zag-js/tooltip": "1.15.5",
+    "@zag-js/tour": "1.15.5",
+    "@zag-js/tree-view": "1.15.5",
+    "@zag-js/types": "1.15.5",
+    "@zag-js/utils": "1.15.5"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-a11y": "8.6.12",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/react": "8.6.12",
-    "@storybook/react-vite": "8.6.12",
+    "@storybook/addon-a11y": "9.0.10",
+    "@storybook/react-vite": "9.0.10",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jsdom": "21.1.7",
-    "@types/react": "19.1.6",
-    "@types/react-dom": "19.1.5",
-    "@vitejs/plugin-react": "4.5.0",
-    "@zag-js/stringify-state": "1.15.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@vitejs/plugin-react": "4.5.2",
+    "@zag-js/stringify-state": "1.15.5",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
-    "happy-dom": "17.4.6",
-    "lucide-react": "0.507.0",
+    "happy-dom": "18.0.1",
+    "lucide-react": "0.515.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-shadow": "20.6.0",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.56.2",
+    "react-hook-form": "7.57.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.6.12",
+    "storybook": "9.0.10",
     "typescript": "5.8.3",
     "vite": "6.3.5",
-    "vite-plugin-dts": "4.5.3",
-    "vitest": "3.1.2",
-    "@vitest/coverage-v8": "3.1.2",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "3.2.3",
+    "@vitest/coverage-v8": "3.2.3",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {