@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/color-picker/use-color-picker.js

@@ -4,15 +4,15 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
-const useColorPicker = (props = {}) => {
+const useColorPicker = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       input: field?.ids.control
@@ -23,19 +23,10 @@ const useColorPicker = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onValueChangeEnd: useEvent(props.onValueChangeEnd)
-  };
-  const [state, send] = useMachine(colorPicker.machine(initialContext), { context });
-  return colorPicker.connect(state, send, normalizeProps);
+  const service = useMachine(colorPicker.machine, machineProps);
+  return colorPicker.connect(service, normalizeProps);
 };
 
 export { useColorPicker };

package/dist/components/combobox/combobox-clear-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 
-const ComboboxClearTrigger = react.forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(combobox.getClearTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const ComboboxClearTrigger = react.forwardRef((props, ref) => {
+  const combobox = useComboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(combobox.getClearTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
 
 exports.ComboboxClearTrigger = ComboboxClearTrigger;

package/dist/components/combobox/combobox-clear-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useComboboxContext } from './use-combobox-context.js';
 
-const ComboboxClearTrigger = forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext();
-    const mergedProps = mergeProps(combobox.getClearTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const ComboboxClearTrigger = forwardRef((props, ref) => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps(combobox.getClearTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
 
 export { ComboboxClearTrigger };

package/dist/components/combobox/combobox-context.d.cts

@@ -4,4 +4,4 @@ import { UseComboboxContext } from './use-combobox-context';
 export interface ComboboxContextProps<T extends CollectionItem> {
     children: (context: UseComboboxContext<T>) => ReactNode;
 }
-export declare const ComboboxContext: <T extends unknown>(props: ComboboxContextProps<T>) => ReactNode;
+export declare const ComboboxContext: <T extends CollectionItem>(props: ComboboxContextProps<T>) => ReactNode;

package/dist/components/combobox/combobox-context.d.ts

@@ -4,4 +4,4 @@ import { UseComboboxContext } from './use-combobox-context';
 export interface ComboboxContextProps<T extends CollectionItem> {
     children: (context: UseComboboxContext<T>) => ReactNode;
 }
-export declare const ComboboxContext: <T extends unknown>(props: ComboboxContextProps<T>) => ReactNode;
+export declare const ComboboxContext: <T extends CollectionItem>(props: ComboboxContextProps<T>) => ReactNode;

package/dist/components/combobox/combobox-item-group-label.cjs

@@ -10,17 +10,12 @@ const factory = require('../factory.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 const useComboboxItemGroupPropsContext = require('./use-combobox-item-group-props-context.cjs');
 
-const ComboboxItemGroupLabel = react.forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext.useComboboxContext();
-    const itemGroupProps = useComboboxItemGroupPropsContext.useComboboxItemGroupPropsContext();
-    const mergedProps = react$1.mergeProps(
-      combobox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }),
-      props
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const ComboboxItemGroupLabel = react.forwardRef((props, ref) => {
+  const combobox = useComboboxContext.useComboboxContext();
+  const itemGroupProps = useComboboxItemGroupPropsContext.useComboboxItemGroupPropsContext();
+  const mergedProps = react$1.mergeProps(combobox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 ComboboxItemGroupLabel.displayName = "ComboboxItemGroupLabel";
 
 exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;

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

@@ -6,17 +6,12 @@ import { ark } from '../factory.js';
 import { useComboboxContext } from './use-combobox-context.js';
 import { useComboboxItemGroupPropsContext } from './use-combobox-item-group-props-context.js';
 
-const ComboboxItemGroupLabel = forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext();
-    const itemGroupProps = useComboboxItemGroupPropsContext();
-    const mergedProps = mergeProps(
-      combobox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }),
-      props
-    );
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const ComboboxItemGroupLabel = forwardRef((props, ref) => {
+  const combobox = useComboboxContext();
+  const itemGroupProps = useComboboxItemGroupPropsContext();
+  const mergedProps = mergeProps(combobox.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ComboboxItemGroupLabel.displayName = "ComboboxItemGroupLabel";
 
 export { ComboboxItemGroupLabel };

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

@@ -11,16 +11,14 @@ const factory = require('../factory.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 const useComboboxItemGroupPropsContext = require('./use-combobox-item-group-props-context.cjs');
 
-const ComboboxItemGroup = react.forwardRef(
-  (props, ref) => {
-    const id = react.useId();
-    const [_itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
-    const itemGroupProps = { id, ..._itemGroupProps };
-    const combobox = useComboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(combobox.getItemGroupProps(itemGroupProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useComboboxItemGroupPropsContext.ComboboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ComboboxItemGroup = react.forwardRef((props, ref) => {
+  const id = react.useId();
+  const [_itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const itemGroupProps = { id, ..._itemGroupProps };
+  const combobox = useComboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(combobox.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useComboboxItemGroupPropsContext.ComboboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 ComboboxItemGroup.displayName = "ComboboxItemGroup";
 
 exports.ComboboxItemGroup = ComboboxItemGroup;

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

@@ -7,16 +7,14 @@ import { ark } from '../factory.js';
 import { useComboboxContext } from './use-combobox-context.js';
 import { ComboboxItemGroupPropsProvider } from './use-combobox-item-group-props-context.js';
 
-const ComboboxItemGroup = forwardRef(
-  (props, ref) => {
-    const id = useId();
-    const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
-    const itemGroupProps = { id, ..._itemGroupProps };
-    const combobox = useComboboxContext();
-    const mergedProps = mergeProps(combobox.getItemGroupProps(itemGroupProps), localProps);
-    return /* @__PURE__ */ jsx(ComboboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ComboboxItemGroup = forwardRef((props, ref) => {
+  const id = useId();
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+  const itemGroupProps = { id, ..._itemGroupProps };
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps(combobox.getItemGroupProps(itemGroupProps), localProps);
+  return /* @__PURE__ */ jsx(ComboboxItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 ComboboxItemGroup.displayName = "ComboboxItemGroup";
 
 export { ComboboxItemGroup };

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

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 const useComboboxItemPropsContext = require('./use-combobox-item-props-context.cjs');
 
-const ComboboxItemIndicator = react.forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext.useComboboxContext();
-    const itemProps = useComboboxItemPropsContext.useComboboxItemPropsContext();
-    const mergedProps = react$1.mergeProps(combobox.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const ComboboxItemIndicator = react.forwardRef((props, ref) => {
+  const combobox = useComboboxContext.useComboboxContext();
+  const itemProps = useComboboxItemPropsContext.useComboboxItemPropsContext();
+  const mergedProps = react$1.mergeProps(combobox.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
 
 exports.ComboboxItemIndicator = ComboboxItemIndicator;

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

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useComboboxContext } from './use-combobox-context.js';
 import { useComboboxItemPropsContext } from './use-combobox-item-props-context.js';
 
-const ComboboxItemIndicator = forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext();
-    const itemProps = useComboboxItemPropsContext();
-    const mergedProps = mergeProps(combobox.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const ComboboxItemIndicator = forwardRef((props, ref) => {
+  const combobox = useComboboxContext();
+  const itemProps = useComboboxItemPropsContext();
+  const mergedProps = mergeProps(combobox.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
 
 export { ComboboxItemIndicator };

package/dist/components/combobox/combobox-positioner.cjs

@@ -10,17 +10,15 @@ const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 
-const ComboboxPositioner = react.forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext.useComboboxContext();
-    const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(combobox.getPositionerProps(), props);
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+const ComboboxPositioner = react.forwardRef((props, ref) => {
+  const combobox = useComboboxContext.useComboboxContext();
+  const presence = usePresenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(combobox.getPositionerProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 ComboboxPositioner.displayName = "ComboboxPositioner";
 
 exports.ComboboxPositioner = ComboboxPositioner;

package/dist/components/combobox/combobox-positioner.js

@@ -6,17 +6,15 @@ import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useComboboxContext } from './use-combobox-context.js';
 
-const ComboboxPositioner = forwardRef(
-  (props, ref) => {
-    const combobox = useComboboxContext();
-    const presence = usePresenceContext();
-    const mergedProps = mergeProps(combobox.getPositionerProps(), props);
-    if (presence.unmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+const ComboboxPositioner = forwardRef((props, ref) => {
+  const combobox = useComboboxContext();
+  const presence = usePresenceContext();
+  const mergedProps = mergeProps(combobox.getPositionerProps(), props);
+  if (presence.unmounted) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ComboboxPositioner.displayName = "ComboboxPositioner";
 
 export { ComboboxPositioner };

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

@@ -15,10 +15,7 @@ const useComboboxContext = require('./use-combobox-context.cjs');
 
 const ComboboxImpl = (props, ref) => {
   const [presenceProps, comboboxProps] = splitPresenceProps.splitPresenceProps(props);
-  const [{ value: combobox }, localProps] = createSplitProps.createSplitProps()(
-    comboboxProps,
-    ["value"]
-  );
+  const [{ value: combobox }, localProps] = createSplitProps.createSplitProps()(comboboxProps, ["value"]);
   const presence = usePresence.usePresence(react$1.mergeProps({ present: combobox.open }, presenceProps));
   const mergedProps = react$1.mergeProps(combobox.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useComboboxContext.ComboboxProvider, { value: combobox, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });

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

@@ -11,10 +11,7 @@ import { ComboboxProvider } from './use-combobox-context.js';
 
 const ComboboxImpl = (props, ref) => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [{ value: combobox }, localProps] = createSplitProps()(
-    comboboxProps,
-    ["value"]
-  );
+  const [{ value: combobox }, localProps] = createSplitProps()(comboboxProps, ["value"]);
   const presence = usePresence(mergeProps({ present: combobox.open }, presenceProps));
   const mergedProps = mergeProps(combobox.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(ComboboxProvider, { value: combobox, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });

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

@@ -20,8 +20,10 @@ const ComboboxImpl = (props, ref) => {
     "allowCustomValue",
     "autoFocus",
     "closeOnSelect",
-    "composite",
     "collection",
+    "composite",
+    "defaultHighlightedValue",
+    "defaultInputValue",
     "defaultOpen",
     "defaultValue",
     "disabled",

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

@@ -16,8 +16,10 @@ const ComboboxImpl = (props, ref) => {
     "allowCustomValue",
     "autoFocus",
     "closeOnSelect",
-    "composite",
     "collection",
+    "composite",
+    "defaultHighlightedValue",
+    "defaultInputValue",
     "defaultOpen",
     "defaultValue",
     "disabled",

package/dist/components/combobox/combobox.d.cts

@@ -2,7 +2,7 @@ export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails
 export type { CollectionItem } from '../collection';
 export { ComboboxClearTrigger as ClearTrigger, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, type ComboboxClearTriggerProps as ClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent as Content, type ComboboxContentBaseProps as ContentBaseProps, type ComboboxContentProps as ContentProps, } from './combobox-content';
-export { ComboboxContext as Context, type ComboboxContextProps as ContextProps, } from './combobox-context';
+export { ComboboxContext as Context, type ComboboxContextProps as ContextProps } from './combobox-context';
 export { ComboboxControl as Control, type ComboboxControlBaseProps as ControlBaseProps, type ComboboxControlProps as ControlProps, } from './combobox-control';
 export { ComboboxInput as Input, type ComboboxInputBaseProps as InputBaseProps, type ComboboxInputProps as InputProps, } from './combobox-input';
 export { ComboboxItem as Item, type ComboboxItemBaseProps as ItemBaseProps, type ComboboxItemProps as ItemProps, } from './combobox-item';

package/dist/components/combobox/combobox.d.ts

@@ -2,7 +2,7 @@ export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails
 export type { CollectionItem } from '../collection';
 export { ComboboxClearTrigger as ClearTrigger, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, type ComboboxClearTriggerProps as ClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent as Content, type ComboboxContentBaseProps as ContentBaseProps, type ComboboxContentProps as ContentProps, } from './combobox-content';
-export { ComboboxContext as Context, type ComboboxContextProps as ContextProps, } from './combobox-context';
+export { ComboboxContext as Context, type ComboboxContextProps as ContextProps } from './combobox-context';
 export { ComboboxControl as Control, type ComboboxControlBaseProps as ControlBaseProps, type ComboboxControlProps as ControlProps, } from './combobox-control';
 export { ComboboxInput as Input, type ComboboxInputBaseProps as InputBaseProps, type ComboboxInputProps as InputProps, } from './combobox-input';
 export { ComboboxItem as Item, type ComboboxItemBaseProps as ItemBaseProps, type ComboboxItemProps as ItemProps, } from './combobox-item';

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

@@ -1,22 +1,22 @@
 export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
-export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps, } from './combobox-content';
+export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';
 export { ComboboxContext, type ComboboxContextProps } from './combobox-context';
-export { ComboboxControl, type ComboboxControlBaseProps, type ComboboxControlProps, } from './combobox-control';
-export { ComboboxInput, type ComboboxInputBaseProps, type ComboboxInputProps, } from './combobox-input';
+export { ComboboxControl, type ComboboxControlBaseProps, type ComboboxControlProps } from './combobox-control';
+export { ComboboxInput, type ComboboxInputBaseProps, type ComboboxInputProps } from './combobox-input';
 export { ComboboxItem, type ComboboxItemBaseProps, type ComboboxItemProps } from './combobox-item';
 export { ComboboxItemContext, type ComboboxItemContextProps } from './combobox-item-context';
-export { ComboboxItemGroup, type ComboboxItemGroupBaseProps, type ComboboxItemGroupProps, } from './combobox-item-group';
+export { ComboboxItemGroup, type ComboboxItemGroupBaseProps, type ComboboxItemGroupProps } from './combobox-item-group';
 export { ComboboxItemGroupLabel, type ComboboxItemGroupLabelBaseProps, type ComboboxItemGroupLabelProps, } from './combobox-item-group-label';
 export { ComboboxItemIndicator, type ComboboxItemIndicatorBaseProps, type ComboboxItemIndicatorProps, } from './combobox-item-indicator';
-export { ComboboxItemText, type ComboboxItemTextBaseProps, type ComboboxItemTextProps, } from './combobox-item-text';
-export { ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps, } from './combobox-label';
+export { ComboboxItemText, type ComboboxItemTextBaseProps, type ComboboxItemTextProps } from './combobox-item-text';
+export { ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps } from './combobox-label';
 export { ComboboxList, type ComboboxListBaseProps, type ComboboxListProps } from './combobox-list';
 export { ComboboxPositioner, type ComboboxPositionerBaseProps, type ComboboxPositionerProps, } from './combobox-positioner';
 export { ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps } from './combobox-root';
 export { ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, } from './combobox-root-provider';
-export { ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps, } from './combobox-trigger';
+export { ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps } from './combobox-trigger';
 export { comboboxAnatomy } from './combobox.anatomy';
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
 export { useComboboxContext, type UseComboboxContext } from './use-combobox-context';

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

@@ -1,22 +1,22 @@
 export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
-export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps, } from './combobox-content';
+export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';
 export { ComboboxContext, type ComboboxContextProps } from './combobox-context';
-export { ComboboxControl, type ComboboxControlBaseProps, type ComboboxControlProps, } from './combobox-control';
-export { ComboboxInput, type ComboboxInputBaseProps, type ComboboxInputProps, } from './combobox-input';
+export { ComboboxControl, type ComboboxControlBaseProps, type ComboboxControlProps } from './combobox-control';
+export { ComboboxInput, type ComboboxInputBaseProps, type ComboboxInputProps } from './combobox-input';
 export { ComboboxItem, type ComboboxItemBaseProps, type ComboboxItemProps } from './combobox-item';
 export { ComboboxItemContext, type ComboboxItemContextProps } from './combobox-item-context';
-export { ComboboxItemGroup, type ComboboxItemGroupBaseProps, type ComboboxItemGroupProps, } from './combobox-item-group';
+export { ComboboxItemGroup, type ComboboxItemGroupBaseProps, type ComboboxItemGroupProps } from './combobox-item-group';
 export { ComboboxItemGroupLabel, type ComboboxItemGroupLabelBaseProps, type ComboboxItemGroupLabelProps, } from './combobox-item-group-label';
 export { ComboboxItemIndicator, type ComboboxItemIndicatorBaseProps, type ComboboxItemIndicatorProps, } from './combobox-item-indicator';
-export { ComboboxItemText, type ComboboxItemTextBaseProps, type ComboboxItemTextProps, } from './combobox-item-text';
-export { ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps, } from './combobox-label';
+export { ComboboxItemText, type ComboboxItemTextBaseProps, type ComboboxItemTextProps } from './combobox-item-text';
+export { ComboboxLabel, type ComboboxLabelBaseProps, type ComboboxLabelProps } from './combobox-label';
 export { ComboboxList, type ComboboxListBaseProps, type ComboboxListProps } from './combobox-list';
 export { ComboboxPositioner, type ComboboxPositionerBaseProps, type ComboboxPositionerProps, } from './combobox-positioner';
 export { ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps } from './combobox-root';
 export { ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, } from './combobox-root-provider';
-export { ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps, } from './combobox-trigger';
+export { ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps } from './combobox-trigger';
 export { comboboxAnatomy } from './combobox.anatomy';
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
 export { useComboboxContext, type UseComboboxContext } from './use-combobox-context';

package/dist/components/combobox/use-combobox-item-context.cjs

@@ -5,13 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [ComboboxItemProvider, useComboboxItemContext] = createContext.createContext(
-  {
-    name: "ComboboxItemContext",
-    hookName: "useComboboxItemContext",
-    providerName: "<ComboboxItemProvider />"
-  }
-);
+const [ComboboxItemProvider, useComboboxItemContext] = createContext.createContext({
+  name: "ComboboxItemContext",
+  hookName: "useComboboxItemContext",
+  providerName: "<ComboboxItemProvider />"
+});
 
 exports.ComboboxItemProvider = ComboboxItemProvider;
 exports.useComboboxItemContext = useComboboxItemContext;

package/dist/components/combobox/use-combobox-item-context.js

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

package/dist/components/combobox/use-combobox.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -31,12 +30,12 @@ function _interopNamespaceDefault(e) {
 const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 
 const useCombobox = (props) => {
-  const { collection, ...comboboxProps } = props;
+  const id = react.useId();
   const { dir } = useLocaleContext.useLocaleContext();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       input: field?.ids.control
@@ -47,30 +46,10 @@ const useCombobox = (props) => {
     invalid: field?.invalid,
     dir,
     getRootNode,
-    collection,
-    open: props.defaultOpen,
-    value: props.defaultValue,
-    "open.controlled": props.open !== void 0,
-    ...comboboxProps
+    ...props
   };
-  const context = (() => {
-    const { collection: _, ...restProps } = initialContext;
-    return {
-      ...restProps,
-      value: props.value,
-      onValueChange: useEvent.useEvent(props.onValueChange),
-      onInputValueChange: useEvent.useEvent(props.onInputValueChange, { sync: true }),
-      onHighlightChange: useEvent.useEvent(props.onHighlightChange),
-      onOpenChange: useEvent.useEvent(props.onOpenChange)
-    };
-  })();
-  const [state, send, service] = react$1.useMachine(combobox__namespace.machine(initialContext), {
-    context
-  });
-  react.useEffect(() => {
-    service.setContext({ collection });
-  }, [collection]);
-  return combobox__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(combobox__namespace.machine, machineProps);
+  return combobox__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useCombobox = useCombobox;

package/dist/components/combobox/use-combobox.d.cts

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { CollectionItem, ListCollection } from '../collection';
 import * as combobox from '@zag-js/combobox';
-export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the combobox when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: combobox.Context['open'];
-    /**
-     * The initial value of the combobox when it is first rendered.
-     * Use when you do not need to control the state of the combobox.
-     */
-    defaultValue?: combobox.Context<T>['value'];
+export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omit<combobox.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of items
      */
@@ -20,4 +10,4 @@ export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omi
 }
 export interface UseComboboxReturn<T extends CollectionItem> extends combobox.Api<PropTypes, T> {
 }
-export declare const useCombobox: <T extends unknown>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;
+export declare const useCombobox: <T extends CollectionItem>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;

package/dist/components/combobox/use-combobox.d.ts

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { CollectionItem, ListCollection } from '../collection';
 import * as combobox from '@zag-js/combobox';
-export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled'>, 'id'> {
-    /**
-     * The initial open state of the combobox when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: combobox.Context['open'];
-    /**
-     * The initial value of the combobox when it is first rendered.
-     * Use when you do not need to control the state of the combobox.
-     */
-    defaultValue?: combobox.Context<T>['value'];
+export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omit<combobox.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of items
      */
@@ -20,4 +10,4 @@ export interface UseComboboxProps<T extends CollectionItem> extends Optional<Omi
 }
 export interface UseComboboxReturn<T extends CollectionItem> extends combobox.Api<PropTypes, T> {
 }
-export declare const useCombobox: <T extends unknown>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;
+export declare const useCombobox: <T extends CollectionItem>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;