@ark-ui/react 0.14.0 → 0.15.0-beta.0

package/color-picker/index.d.ts

@@ -1,5 +1,6 @@
 import { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps } from '@zag-js/color-picker';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
 import { type ColorPickerProps } from './color-picker';
@@ -21,66 +22,36 @@ import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './colo
 import { colorPickerAnatomy } from './color-picker.anatomy';
 declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
     Root: (props: ColorPickerProps) => JSX.Element;
-    Area: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Area: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
+    AreaGradient: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
-    AreaGradient: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    AreaThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    AreaThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    ChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLInputElement>>;
+    ChannelSliderBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    ChannelSliderBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    ChannelSliderThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ChannelSliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    ChannelSliderTrack: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ChannelSliderTrack: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    EyeDropperTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Swatch: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ColorSwatchProps> & ColorSwatchProps & RefAttributes<HTMLButtonElement>>;
+    SwatchBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    EyeDropperTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    SwatchGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Swatch: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof ColorSwatchProps> & ColorSwatchProps & RefAttributes<HTMLButtonElement>>;
-    SwatchBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    SwatchGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup, colorPickerAnatomy, useColorPickerAreaContext, useColorPickerContext, useColorPickerSwatchContext, };
 export type { ColorPickerAreaGradientProps, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderBackgroundProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerEyeDropperTriggerProps, ColorPickerProps, ColorPickerSwatchBackgroundProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, };

package/color-picker/use-color-picker.cjs

@@ -6,8 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const colorPicker = require('@zag-js/color-picker');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const reactDom = require('react-dom');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -37,15 +37,10 @@ const useColorPicker = (props) => {
     ...props,
     value: props.defaultValue ?? props.value
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = react.useCallback(
-    (e) => reactDom.flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent.useEvent(props.onChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(colorPicker__namespace.machine(initialContext), { context });
   return colorPicker__namespace.connect(state, send, react$1.normalizeProps);

package/color-picker/use-color-picker.d.ts

@@ -1,7 +1,7 @@
 import * as colorPicker from '@zag-js/color-picker';
 import type { Optional } from '../types';
-export type UseColorPickerProps = Optional<colorPicker.Context, 'id'> & {
+export interface UseColorPickerProps extends Optional<colorPicker.Context, 'id'> {
     defaultValue?: colorPicker.Context['value'];
-};
+}
 export type UseColorPickerReturn = colorPicker.Api;
 export declare const useColorPicker: (props: UseColorPickerProps) => UseColorPickerReturn;

package/color-picker/use-color-picker.mjs

@@ -1,9 +1,9 @@
 'use client';
 import * as colorPicker from '@zag-js/color-picker';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId, useCallback } from 'react';
-import { flushSync } from 'react-dom';
+import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useColorPicker = (props) => {
@@ -14,15 +14,10 @@ const useColorPicker = (props) => {
     ...props,
     value: props.defaultValue ?? props.value
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = useCallback(
-    (e) => flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent(props.onChange, { sync: true })
   };
   const [state, send] = useMachine(colorPicker.machine(initialContext), { context });
   return colorPicker.connect(state, send, normalizeProps);

package/combobox/combobox-clear-trigger.cjs

@@ -11,8 +11,8 @@ const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxClearTrigger = react.forwardRef(
   (props, ref) => {
-    const { clearTriggerProps } = comboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(clearTriggerProps, props);
+    const api = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(api.clearTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/combobox/combobox-clear-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ComboboxClearTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const ComboboxClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ComboboxClearTriggerProps = HTMLArkProps<'button'>;
+export declare const ComboboxClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/combobox/combobox-clear-trigger.mjs

@@ -7,8 +7,8 @@ import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxClearTrigger = forwardRef(
   (props, ref) => {
-    const { clearTriggerProps } = useComboboxContext();
-    const mergedProps = mergeProps(clearTriggerProps, props);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(api.clearTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/combobox/combobox-content.cjs

@@ -7,23 +7,22 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const index = require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
-const comboboxPresence = require('./combobox-presence.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const ComboboxContent = react.forwardRef((props, ref) => {
-  const [presenceProps, comboboxContentProps] = splitPresenceProps.splitPresenceProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(comboboxPresence.ComboboxPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerComboboxContent, { ref, ...comboboxContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = comboboxContext.useComboboxContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
-const InnerComboboxContent = react.forwardRef(
-  (props, ref) => {
-    const { contentProps } = comboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(contentProps, props);
+const ComboboxInnerContent = react.forwardRef(
+  function ComboboxInnerContent2(props, ref) {
+    const api = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-InnerComboboxContent.displayName = "InnerComboboxContent";
 
 exports.ComboboxContent = ComboboxContent;

package/combobox/combobox-content.d.ts

@@ -1,10 +1,7 @@
-import { PresenceProps } from '../presence';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-import { type ComboboxPresenceProps } from './combobox-presence';
-export type ComboboxContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<ComboboxPresenceProps, 'children'>;
-export declare const ComboboxContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export type ComboboxContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
+export declare const ComboboxContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-content.mjs

@@ -3,23 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
-import { ComboboxPresence } from './combobox-presence.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const ComboboxContent = forwardRef((props, ref) => {
-  const [presenceProps, comboboxContentProps] = splitPresenceProps(props);
-  return /* @__PURE__ */ jsx(ComboboxPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerComboboxContent, { ref, ...comboboxContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useComboboxContext();
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
-const InnerComboboxContent = forwardRef(
-  (props, ref) => {
-    const { contentProps } = useComboboxContext();
-    const mergedProps = mergeProps(contentProps, props);
+const ComboboxInnerContent = forwardRef(
+  function ComboboxInnerContent2(props, ref) {
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-InnerComboboxContent.displayName = "InnerComboboxContent";
 
 export { ComboboxContent };

package/combobox/combobox-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
+import type { CollectionItem } from '../types';
 import { type UseComboboxReturn } from './use-combobox';
-export type ComboboxContext = UseComboboxReturn;
-export declare const ComboboxProvider: Provider<UseComboboxReturn>, useComboboxContext: () => UseComboboxReturn;
+export type ComboboxContext<T extends CollectionItem> = UseComboboxReturn<T>;
+export declare const ComboboxProvider: Provider<ComboboxContext<any>>, useComboboxContext: () => ComboboxContext<any>;

package/combobox/combobox-control.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxControl = react.forwardRef((props, ref) => {
-  const { controlProps } = comboboxContext.useComboboxContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
+  const api = comboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 ComboboxControl.displayName = "ComboboxControl";

package/combobox/combobox-control.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ComboboxControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ComboboxControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ComboboxControlProps = HTMLArkProps<'div'>;
+export declare const ComboboxControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-control.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxControl = forwardRef((props, ref) => {
-  const { controlProps } = useComboboxContext();
-  const mergedProps = mergeProps(controlProps, props);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 ComboboxControl.displayName = "ComboboxControl";

package/combobox/combobox-input.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxInput = react.forwardRef((props, ref) => {
-  const { inputProps } = comboboxContext.useComboboxContext();
-  const mergedProps = react$1.mergeProps(inputProps, props);
+  const api = comboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
 ComboboxInput.displayName = "ComboboxInput";

package/combobox/combobox-input.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ComboboxInputProps = ComponentPropsWithoutRef<typeof ark.input>;
-export declare const ComboboxInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ComboboxInputProps = HTMLArkProps<'input'>;
+export declare const ComboboxInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLInputElement>>;

package/combobox/combobox-input.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxInput = forwardRef((props, ref) => {
-  const { inputProps } = useComboboxContext();
-  const mergedProps = mergeProps(inputProps, props);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 ComboboxInput.displayName = "ComboboxInput";

package/combobox/combobox-item-context.cjs

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

package/combobox/combobox-item-context.d.ts

@@ -0,0 +1,5 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/combobox';
+export type ComboboxItemContext = ItemProps;
+export declare const ComboboxItemProvider: Provider<ItemProps>, useComboboxItemContext: () => ItemProps;

package/combobox/combobox-item-context.mjs

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

package/combobox/{combobox-option-group.cjs → combobox-item-group-label.cjs}

@@ -10,14 +10,14 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
-const ComboboxOptionGroup = react.forwardRef(
+const ComboboxItemGroupLabel = react.forwardRef(
   (props, ref) => {
-    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
-    const { getOptionGroupProps } = comboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
+    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
+    const api = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(api.getItemGroupLabelProps(optionProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+ComboboxItemGroupLabel.displayName = "ComboboxItemGroupLabel";
 
-exports.ComboboxOptionGroup = ComboboxOptionGroup;
+exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;

package/combobox/combobox-item-group-label.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemGroupLabelProps } from '@zag-js/combobox';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+export type ComboboxItemGroupLabelProps = Assign<HTMLArkProps<'div'>, ItemGroupLabelProps>;
+export declare const ComboboxItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;

package/combobox/{combobox-option-group.mjs → combobox-item-group-label.mjs}

@@ -6,14 +6,14 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
-const ComboboxOptionGroup = forwardRef(
+const ComboboxItemGroupLabel = forwardRef(
   (props, ref) => {
-    const [optionProps, localProps] = createSplitProps()(props, ["id"]);
-    const { getOptionGroupProps } = useComboboxContext();
-    const mergedProps = mergeProps(getOptionGroupProps(optionProps), localProps);
+    const [optionProps, localProps] = createSplitProps()(props, ["htmlFor"]);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(api.getItemGroupLabelProps(optionProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+ComboboxItemGroupLabel.displayName = "ComboboxItemGroupLabel";
 
-export { ComboboxOptionGroup };
+export { ComboboxItemGroupLabel };

package/combobox/{combobox-option-group-label.cjs → combobox-item-group.cjs}

@@ -10,14 +10,14 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
-const ComboboxOptionGroupLabel = react.forwardRef(
+const ComboboxItemGroup = react.forwardRef(
   (props, ref) => {
-    const [optionProps, labelProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
-    const { getOptionGroupLabelProps } = comboboxContext.useComboboxContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+    const api = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(api.getItemGroupProps(itemProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+ComboboxItemGroup.displayName = "ComboboxItemGroup";
 
-exports.ComboboxOptionGroupLabel = ComboboxOptionGroupLabel;
+exports.ComboboxItemGroup = ComboboxItemGroup;

package/combobox/combobox-item-group.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemGroupProps } from '@zag-js/combobox';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxItemGroupProps = Assign<HTMLArkProps<'div'>, ItemGroupProps>;
+export declare const ComboboxItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;

package/combobox/{combobox-option-group-label.mjs → combobox-item-group.mjs}

@@ -6,14 +6,14 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
-const ComboboxOptionGroupLabel = forwardRef(
+const ComboboxItemGroup = forwardRef(
   (props, ref) => {
-    const [optionProps, labelProps] = createSplitProps()(props, ["htmlFor"]);
-    const { getOptionGroupLabelProps } = useComboboxContext();
-    const mergedProps = mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    const [itemProps, localProps] = createSplitProps()(props, ["id"]);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(api.getItemGroupProps(itemProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+ComboboxItemGroup.displayName = "ComboboxItemGroup";
 
-export { ComboboxOptionGroupLabel };
+export { ComboboxItemGroup };

package/combobox/combobox-item-indicator.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItemIndicator = react.forwardRef(
+  (props, ref) => {
+    const api = comboboxContext.useComboboxContext();
+    const item = comboboxItemContext.useComboboxItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemIndicatorProps(item), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+
+exports.ComboboxItemIndicator = ComboboxItemIndicator;

package/combobox/combobox-item-indicator.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ComboboxItemIndicatorProps = HTMLArkProps<'div'>;
+export declare const ComboboxItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-item-indicator.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+import { useComboboxItemContext } from './combobox-item-context.mjs';
+
+const ComboboxItemIndicator = forwardRef(
+  (props, ref) => {
+    const api = useComboboxContext();
+    const item = useComboboxItemContext();
+    const mergedProps = mergeProps(api.getItemIndicatorProps(item), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+
+export { ComboboxItemIndicator };

package/combobox/combobox-item-text.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItemText = react.forwardRef((props, ref) => {
+  const api = comboboxContext.useComboboxContext();
+  const itemProps = comboboxItemContext.useComboboxItemContext();
+  const mergedProps = react$1.mergeProps(api.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+ComboboxItemText.displayName = "ComboboxItemText";
+
+exports.ComboboxItemText = ComboboxItemText;