@ark-ui/react 5.22.0 → 5.24.0

package/dist/components/fieldset/fieldset-legend.js

@@ -8,7 +8,7 @@ import { useFieldsetContext } from './use-fieldset-context.js';
 const FieldsetLegend = forwardRef((props, ref) => {
   const fieldset = useFieldsetContext();
   const mergedProps = mergeProps(fieldset.getLegendProps(), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.legend, { ...mergedProps, ref });
 });
 FieldsetLegend.displayName = "FieldsetLegend";
 

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

@@ -1,3 +1,3 @@
 import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const fieldsetAnatomy: AnatomyInstance<"legend" | "root" | "errorText" | "helperText">;
-export declare const parts: Record<"legend" | "root" | "errorText" | "helperText", AnatomyPart>;
+export declare const fieldsetAnatomy: AnatomyInstance<"root" | "errorText" | "helperText" | "legend">;
+export declare const parts: Record<"root" | "errorText" | "helperText" | "legend", AnatomyPart>;

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

@@ -1,3 +1,3 @@
 import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const fieldsetAnatomy: AnatomyInstance<"legend" | "root" | "errorText" | "helperText">;
-export declare const parts: Record<"legend" | "root" | "errorText" | "helperText", AnatomyPart>;
+export declare const fieldsetAnatomy: AnatomyInstance<"root" | "errorText" | "helperText" | "legend">;
+export declare const parts: Record<"root" | "errorText" | "helperText" | "legend", AnatomyPart>;

package/dist/components/file-upload/file-upload-item-group.cjs

@@ -6,13 +6,16 @@ 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 useFileUploadContext = require('./use-file-upload-context.cjs');
+const useFileUploadItemGroupPropsContext = require('./use-file-upload-item-group-props-context.cjs');
 
 const FileUploadItemGroup = react.forwardRef((props, ref) => {
+  const [itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["type"]);
   const fileUpload = useFileUploadContext.useFileUploadContext();
-  const mergedProps = react$1.mergeProps(fileUpload.getItemGroupProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
+  const mergedProps = react$1.mergeProps(fileUpload.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useFileUploadItemGroupPropsContext.FileUploadItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref }) });
 });
 FileUploadItemGroup.displayName = "FileUploadItemGroup";
 

package/dist/components/file-upload/file-upload-item-group.d.cts

@@ -1,6 +1,7 @@
+import { ItemGroupProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadItemGroupBaseProps extends PolymorphicProps {
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps, ItemGroupProps {
 }
 export interface FileUploadItemGroupProps extends HTMLProps<'ul'>, FileUploadItemGroupBaseProps {
 }

package/dist/components/file-upload/file-upload-item-group.d.ts

@@ -1,6 +1,7 @@
+import { ItemGroupProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadItemGroupBaseProps extends PolymorphicProps {
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps, ItemGroupProps {
 }
 export interface FileUploadItemGroupProps extends HTMLProps<'ul'>, FileUploadItemGroupBaseProps {
 }

package/dist/components/file-upload/file-upload-item-group.js

@@ -2,13 +2,16 @@
 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 { useFileUploadContext } from './use-file-upload-context.js';
+import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context.js';
 
 const FileUploadItemGroup = forwardRef((props, ref) => {
+  const [itemGroupProps, localProps] = createSplitProps()(props, ["type"]);
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps(fileUpload.getItemGroupProps(), props);
-  return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
+  const mergedProps = mergeProps(fileUpload.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsx(FileUploadItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref }) });
 });
 FileUploadItemGroup.displayName = "FileUploadItemGroup";
 

package/dist/components/file-upload/file-upload-item.cjs

@@ -9,13 +9,16 @@ const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
+const useFileUploadItemGroupPropsContext = require('./use-file-upload-item-group-props-context.cjs');
 const useFileUploadItemPropsContext = require('./use-file-upload-item-props-context.cjs');
 
 const FileUploadItem = react.forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["file"]);
   const fileUpload = useFileUploadContext.useFileUploadContext();
-  const mergedProps = react$1.mergeProps(fileUpload.getItemProps(itemProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useFileUploadItemPropsContext.FileUploadItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) });
+  const itemGroupProps = useFileUploadItemGroupPropsContext.useFileUploadItemGroupPropsContext();
+  const itemPropsWithType = { ...itemProps, type: itemGroupProps.type };
+  const mergedProps = react$1.mergeProps(fileUpload.getItemProps(itemPropsWithType), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useFileUploadItemPropsContext.FileUploadItemPropsProvider, { value: itemPropsWithType, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref }) });
 });
 FileUploadItem.displayName = "FileUploadItem";
 

package/dist/components/file-upload/file-upload-item.d.cts

@@ -1,8 +1,10 @@
 import { ItemProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps {
+type ItemBaseProps = Omit<ItemProps, 'type'>;
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps {
 }
 export interface FileUploadItemProps extends HTMLProps<'li'>, FileUploadItemBaseProps {
 }
 export declare const FileUploadItem: ForwardRefExoticComponent<FileUploadItemProps & RefAttributes<HTMLLIElement>>;
+export {};

package/dist/components/file-upload/file-upload-item.d.ts

@@ -1,8 +1,10 @@
 import { ItemProps } from '@zag-js/file-upload';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps {
+type ItemBaseProps = Omit<ItemProps, 'type'>;
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps {
 }
 export interface FileUploadItemProps extends HTMLProps<'li'>, FileUploadItemBaseProps {
 }
 export declare const FileUploadItem: ForwardRefExoticComponent<FileUploadItemProps & RefAttributes<HTMLLIElement>>;
+export {};

package/dist/components/file-upload/file-upload-item.js

@@ -5,13 +5,16 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useFileUploadContext } from './use-file-upload-context.js';
+import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context.js';
 import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context.js';
 
 const FileUploadItem = forwardRef((props, ref) => {
   const [itemProps, localProps] = createSplitProps()(props, ["file"]);
   const fileUpload = useFileUploadContext();
-  const mergedProps = mergeProps(fileUpload.getItemProps(itemProps), localProps);
-  return /* @__PURE__ */ jsx(FileUploadItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) });
+  const itemGroupProps = useFileUploadItemGroupPropsContext();
+  const itemPropsWithType = { ...itemProps, type: itemGroupProps.type };
+  const mergedProps = mergeProps(fileUpload.getItemProps(itemPropsWithType), localProps);
+  return /* @__PURE__ */ jsx(FileUploadItemPropsProvider, { value: itemPropsWithType, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref }) });
 });
 FileUploadItem.displayName = "FileUploadItem";
 

package/dist/components/file-upload/use-file-upload-item-group-props-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext.createContext({
+  name: "FileUploadItemGroupPropsContext",
+  hookName: "useFileUploadItemGroupPropsContext",
+  providerName: "<FileUploadItemGroupPropsProvider />"
+});
+
+exports.FileUploadItemGroupPropsProvider = FileUploadItemGroupPropsProvider;
+exports.useFileUploadItemGroupPropsContext = useFileUploadItemGroupPropsContext;

package/dist/components/file-upload/use-file-upload-item-group-props-context.d.cts

@@ -0,0 +1,5 @@
+import { ItemGroupProps } from '@zag-js/file-upload';
+import { Provider } from 'react';
+export interface UseFileUploadItemGroupContext extends ItemGroupProps {
+}
+export declare const FileUploadItemGroupPropsProvider: Provider<UseFileUploadItemGroupContext>, useFileUploadItemGroupPropsContext: () => UseFileUploadItemGroupContext;

package/dist/components/file-upload/use-file-upload-item-group-props-context.d.ts

@@ -0,0 +1,5 @@
+import { ItemGroupProps } from '@zag-js/file-upload';
+import { Provider } from 'react';
+export interface UseFileUploadItemGroupContext extends ItemGroupProps {
+}
+export declare const FileUploadItemGroupPropsProvider: Provider<UseFileUploadItemGroupContext>, useFileUploadItemGroupPropsContext: () => UseFileUploadItemGroupContext;

package/dist/components/file-upload/use-file-upload-item-group-props-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext({
+  name: "FileUploadItemGroupPropsContext",
+  hookName: "useFileUploadItemGroupPropsContext",
+  providerName: "<FileUploadItemGroupPropsProvider />"
+});
+
+export { FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext };

package/dist/components/frame/frame.cjs

@@ -39,10 +39,12 @@ const Frame = react.forwardRef((props, ref) => {
     const mountNode2 = getMountNode(frameRef);
     if (!mountNode2) return;
     const exec = () => {
-      const rootEl = frameRef.contentDocument?.documentElement;
-      if (!rootEl) return;
-      frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
-      frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+      win.requestAnimationFrame(() => {
+        const rootEl = frameRef.contentDocument?.documentElement;
+        if (!rootEl) return;
+        frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
+        frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+      });
     };
     const resizeObserver = new win.ResizeObserver(exec);
     exec();

package/dist/components/frame/frame.js

@@ -35,10 +35,12 @@ const Frame = forwardRef((props, ref) => {
     const mountNode2 = getMountNode(frameRef);
     if (!mountNode2) return;
     const exec = () => {
-      const rootEl = frameRef.contentDocument?.documentElement;
-      if (!rootEl) return;
-      frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
-      frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+      win.requestAnimationFrame(() => {
+        const rootEl = frameRef.contentDocument?.documentElement;
+        if (!rootEl) return;
+        frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
+        frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+      });
     };
     const resizeObserver = new win.ResizeObserver(exec);
     exec();

package/dist/components/index.cjs

@@ -589,23 +589,6 @@ const useTagsInput = require('./tags-input/use-tags-input.cjs');
 const useTagsInputContext = require('./tags-input/use-tags-input-context.cjs');
 const useTagsInputItemContext = require('./tags-input/use-tags-input-item-context.cjs');
 const tagsInput$1 = require('./tags-input/tags-input.cjs');
-const date = require('@internationalized/date');
-const timePickerCell = require('./time-picker/time-picker-cell.cjs');
-const timePickerClearTrigger = require('./time-picker/time-picker-clear-trigger.cjs');
-const timePickerColumn = require('./time-picker/time-picker-column.cjs');
-const timePickerContent = require('./time-picker/time-picker-content.cjs');
-const timePickerContext = require('./time-picker/time-picker-context.cjs');
-const timePickerControl = require('./time-picker/time-picker-control.cjs');
-const timePickerInput = require('./time-picker/time-picker-input.cjs');
-const timePickerLabel = require('./time-picker/time-picker-label.cjs');
-const timePickerPositioner = require('./time-picker/time-picker-positioner.cjs');
-const timePickerRoot = require('./time-picker/time-picker-root.cjs');
-const timePickerRootProvider = require('./time-picker/time-picker-root-provider.cjs');
-const timePickerSpacer = require('./time-picker/time-picker-spacer.cjs');
-const timePickerTrigger = require('./time-picker/time-picker-trigger.cjs');
-const useTimePicker = require('./time-picker/use-time-picker.cjs');
-const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
-const timePicker$1 = require('./time-picker/time-picker.cjs');
 const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
 const timerArea = require('./timer/timer-area.cjs');
 const timerContext = require('./timer/timer-context.cjs');
@@ -724,7 +707,6 @@ const steps = require('@zag-js/steps');
 const zagSwitch = require('@zag-js/switch');
 const tabs = require('@zag-js/tabs');
 const tagsInput = require('@zag-js/tags-input');
-const timePicker = require('@zag-js/time-picker');
 const timer = require('@zag-js/timer');
 const toast = require('@zag-js/toast');
 const toggleGroup = require('@zag-js/toggle-group');
@@ -1329,26 +1311,6 @@ exports.useTagsInput = useTagsInput.useTagsInput;
 exports.useTagsInputContext = useTagsInputContext.useTagsInputContext;
 exports.useTagsInputItemContext = useTagsInputItemContext.useTagsInputItemContext;
 exports.TagsInput = tagsInput$1;
-Object.defineProperty(exports, "parseTime", {
-	enumerable: true,
-	get: () => date.parseTime
-});
-exports.TimePickerCell = timePickerCell.TimePickerCell;
-exports.TimePickerClearTrigger = timePickerClearTrigger.TimePickerClearTrigger;
-exports.TimePickerColumn = timePickerColumn.TimePickerColumn;
-exports.TimePickerContent = timePickerContent.TimePickerContent;
-exports.TimePickerContext = timePickerContext.TimePickerContext;
-exports.TimePickerControl = timePickerControl.TimePickerControl;
-exports.TimePickerInput = timePickerInput.TimePickerInput;
-exports.TimePickerLabel = timePickerLabel.TimePickerLabel;
-exports.TimePickerPositioner = timePickerPositioner.TimePickerPositioner;
-exports.TimePickerRoot = timePickerRoot.TimePickerRoot;
-exports.TimePickerRootProvider = timePickerRootProvider.TimePickerRootProvider;
-exports.TimePickerSpacer = timePickerSpacer.TimePickerSpacer;
-exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
-exports.useTimePicker = useTimePicker.useTimePicker;
-exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
-exports.TimePicker = timePicker$1;
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
 exports.TimerArea = timerArea.TimerArea;
 exports.TimerContext = timerContext.TimerContext;
@@ -1557,10 +1519,6 @@ Object.defineProperty(exports, "tagsInputAnatomy", {
 	enumerable: true,
 	get: () => tagsInput.anatomy
 });
-Object.defineProperty(exports, "timePickerAnatomy", {
-	enumerable: true,
-	get: () => timePicker.anatomy
-});
 Object.defineProperty(exports, "timerAnatomy", {
 	enumerable: true,
 	get: () => timer.anatomy

package/dist/components/index.d.cts

@@ -46,7 +46,6 @@ export * from './steps';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';
-export * from './time-picker';
 export * from './timer';
 export * from './toast';
 export * from './toggle';

package/dist/components/index.d.ts

@@ -46,7 +46,6 @@ export * from './steps';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';
-export * from './time-picker';
 export * from './timer';
 export * from './toast';
 export * from './toggle';

package/dist/components/index.js

@@ -625,24 +625,6 @@ export { useTagsInputContext } from './tags-input/use-tags-input-context.js';
 export { useTagsInputItemContext } from './tags-input/use-tags-input-item-context.js';
 import * as tagsInput from './tags-input/tags-input.js';
 export { tagsInput as TagsInput };
-export { parseTime } from '@internationalized/date';
-export { TimePickerCell } from './time-picker/time-picker-cell.js';
-export { TimePickerClearTrigger } from './time-picker/time-picker-clear-trigger.js';
-export { TimePickerColumn } from './time-picker/time-picker-column.js';
-export { TimePickerContent } from './time-picker/time-picker-content.js';
-export { TimePickerContext } from './time-picker/time-picker-context.js';
-export { TimePickerControl } from './time-picker/time-picker-control.js';
-export { TimePickerInput } from './time-picker/time-picker-input.js';
-export { TimePickerLabel } from './time-picker/time-picker-label.js';
-export { TimePickerPositioner } from './time-picker/time-picker-positioner.js';
-export { TimePickerRoot } from './time-picker/time-picker-root.js';
-export { TimePickerRootProvider } from './time-picker/time-picker-root-provider.js';
-export { TimePickerSpacer } from './time-picker/time-picker-spacer.js';
-export { TimePickerTrigger } from './time-picker/time-picker-trigger.js';
-export { useTimePicker } from './time-picker/use-time-picker.js';
-export { useTimePickerContext } from './time-picker/use-time-picker-context.js';
-import * as timePicker from './time-picker/time-picker.js';
-export { timePicker as TimePicker };
 export { TimerActionTrigger } from './timer/timer-action-trigger.js';
 export { TimerArea } from './timer/timer-area.js';
 export { TimerContext } from './timer/timer-context.js';
@@ -768,7 +750,6 @@ export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
-export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';
 export { anatomy as timerAnatomy } from '@zag-js/timer';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';

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

@@ -11,8 +11,8 @@ export { ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type Listbo
 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 { ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, } from './listbox-root';
+export { ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, type ListboxRootProviderComponent, } 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';

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

@@ -11,8 +11,8 @@ export { ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type Listbo
 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 { ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, } from './listbox-root';
+export { ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, type ListboxRootProviderComponent, } 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';

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Assign } from '../../types';
 import { CollectionItem } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseListboxReturn } from './use-listbox';
@@ -9,6 +10,6 @@ export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
 }
-export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const ListboxRootProvider: ListboxComponent;
+export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxRootProviderComponent;
 export {};

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Assign } from '../../types';
 import { CollectionItem } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseListboxReturn } from './use-listbox';
@@ -9,6 +10,6 @@ export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
 }
-export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const ListboxRootProvider: ListboxComponent;
+export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxRootProviderComponent;
 export {};

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

@@ -7,5 +7,5 @@ export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListb
 }
 export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
 }
-export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const ListboxRoot: ListboxComponent;
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxRootComponent;

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

@@ -7,5 +7,5 @@ export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListb
 }
 export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
 }
-export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const ListboxRoot: ListboxComponent;
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxRootComponent;

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

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

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

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

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

@@ -10,6 +10,6 @@ export { ListboxItemGroupLabel as ItemGroupLabel, type ListboxItemGroupLabelBase
 export { ListboxItemIndicator as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator';
 export { ListboxItemText as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text';
 export { ListboxLabel as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label';
-export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root';
-export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider';
+export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, } from './listbox-root';
+export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, type ListboxRootProviderComponent as RootProviderComponent, } from './listbox-root-provider';
 export { ListboxValueText as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text';

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

@@ -10,6 +10,6 @@ export { ListboxItemGroupLabel as ItemGroupLabel, type ListboxItemGroupLabelBase
 export { ListboxItemIndicator as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator';
 export { ListboxItemText as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text';
 export { ListboxLabel as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label';
-export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root';
-export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider';
+export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, } from './listbox-root';
+export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, type ListboxRootProviderComponent as RootProviderComponent, } from './listbox-root-provider';
 export { ListboxValueText as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text';

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

@@ -8,11 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const useMenuTriggerItemContext = require('./use-menu-trigger-item-context.cjs');
+const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
 const MenuTriggerItem = react.forwardRef((props, ref) => {
   const getTriggerItemProps = useMenuTriggerItemContext.useMenuTriggerItemContext();
   const mergedProps = react$1.mergeProps(getTriggerItemProps?.() ?? {}, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuItemPropsProvider, { value: { value: mergedProps["data-value"] }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 MenuTriggerItem.displayName = "MenuTriggerItem";
 

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

@@ -4,11 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useMenuTriggerItemContext } from './use-menu-trigger-item-context.js';
+import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
 const MenuTriggerItem = forwardRef((props, ref) => {
   const getTriggerItemProps = useMenuTriggerItemContext();
   const mergedProps = mergeProps(getTriggerItemProps?.() ?? {}, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(MenuItemPropsProvider, { value: { value: mergedProps["data-value"] }, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 MenuTriggerItem.displayName = "MenuTriggerItem";
 

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" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl">;
+export declare const parts: Record<"root" | "label" | "indicator" | "item" | "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" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl">;
+export declare const parts: Record<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;

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

@@ -15,8 +15,8 @@ export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps
 export { SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label';
 export { SelectList, type SelectListBaseProps, type SelectListProps } from './select-list';
 export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps } from './select-positioner';
-export { SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root';
-export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider';
+export { SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent } from './select-root';
+export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, type SelectRootProviderComponent, } from './select-root-provider';
 export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger';
 export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps } from './select-value-text';
 export { selectAnatomy } from './select.anatomy';

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

@@ -15,8 +15,8 @@ export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps
 export { SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label';
 export { SelectList, type SelectListBaseProps, type SelectListProps } from './select-list';
 export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps } from './select-positioner';
-export { SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root';
-export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider';
+export { SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent } from './select-root';
+export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, type SelectRootProviderComponent, } from './select-root-provider';
 export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger';
 export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps } from './select-value-text';
 export { selectAnatomy } from './select.anatomy';

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Assign } from '../../types';
 import { CollectionItem } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
@@ -10,6 +11,6 @@ export interface SelectRootProviderBaseProps<T extends CollectionItem> extends R
 }
 export interface SelectRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, SelectRootProviderBaseProps<T> {
 }
-export type SelectComponent = <T extends CollectionItem>(props: SelectRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const SelectRootProvider: SelectComponent;
+export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SelectRootProvider: SelectRootProviderComponent;
 export {};

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Assign } from '../../types';
 import { CollectionItem } from '../collection';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
@@ -10,6 +11,6 @@ export interface SelectRootProviderBaseProps<T extends CollectionItem> extends R
 }
 export interface SelectRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, SelectRootProviderBaseProps<T> {
 }
-export type SelectComponent = <T extends CollectionItem>(props: SelectRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const SelectRootProvider: SelectComponent;
+export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SelectRootProvider: SelectRootProviderComponent;
 export {};

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

@@ -8,5 +8,5 @@ export interface SelectRootBaseProps<T extends CollectionItem> extends UseSelect
 }
 export interface SelectRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
-export type SelectComponent = <T extends CollectionItem>(props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const SelectRoot: SelectComponent;
+export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SelectRoot: SelectRootComponent;

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

@@ -8,5 +8,5 @@ export interface SelectRootBaseProps<T extends CollectionItem> extends UseSelect
 }
 export interface SelectRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
-export type SelectComponent = <T extends CollectionItem>(props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-export declare const SelectRoot: SelectComponent;
+export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const SelectRoot: SelectRootComponent;