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

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;

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

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

package/combobox/combobox-item-text.mjs

@@ -0,0 +1,17 @@
+'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 ComboboxItemText = forwardRef((props, ref) => {
+  const api = useComboboxContext();
+  const itemProps = useComboboxItemContext();
+  const mergedProps = mergeProps(api.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+ComboboxItemText.displayName = "ComboboxItemText";
+
+export { ComboboxItemText };

package/combobox/combobox-item.cjs

@@ -0,0 +1,25 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItem = react.forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, ["item"]);
+  const api = comboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(comboboxItemContext.ComboboxItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+ComboboxItem.displayName = "ComboboxItem";
+
+exports.ComboboxItem = ComboboxItem;

package/{select/select-option.d.ts → combobox/combobox-item.d.ts}

@@ -1,10 +1,10 @@
-import type { OptionProps } from '@zag-js/select';
+import type { ItemProps } from '@zag-js/combobox';
 import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
-import type { Assign } from '../types';
-export type SelectOptionProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionProps>;
-export declare const SelectOption: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+import { type Assign } from '../types';
+export type ComboboxItemProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ItemProps>;
+export declare const ComboboxItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, keyof OptionProps> & OptionProps & RefAttributes<HTMLDivElement>>;
+}, "ref">, "item"> & ItemProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-item.mjs

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+import { ComboboxItemProvider } from './combobox-item-context.mjs';
+
+const ComboboxItem = forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, ["item"]);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(ComboboxItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+ComboboxItem.displayName = "ComboboxItem";
+
+export { ComboboxItem };

package/combobox/combobox-label.cjs

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

package/combobox/combobox-label.d.ts

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

package/combobox/combobox-label.mjs

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

package/combobox/combobox-positioner.cjs

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

package/combobox/combobox-positioner.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ComboboxPositionerProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ComboboxPositioner: 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 ComboboxPositionerProps = HTMLArkProps<'div'>;
+export declare const ComboboxPositioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-positioner.mjs

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

package/combobox/combobox-trigger.cjs

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

package/combobox/combobox-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ComboboxTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const ComboboxTrigger: 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 ComboboxTriggerProps = HTMLArkProps<'button'>;
+export declare const ComboboxTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/combobox/combobox-trigger.mjs

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

package/combobox/combobox.cjs

@@ -12,52 +12,54 @@ const runIfFn = require('../run-if-fn.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
 
-const Combobox = react.forwardRef((props, ref) => {
-  const [useComboboxProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+const ComboboxImpl = (props, ref) => {
+  const [useComboboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
       "allowCustomValue",
-      "ariaHidden",
       "autoFocus",
-      "blurOnSelect",
+      "closeOnSelect",
+      "defaultValue",
       "dir",
       "disabled",
-      "focusOnClear",
       "form",
       "getRootNode",
+      "highlightedValue",
       "id",
       "ids",
       "inputBehavior",
       "inputValue",
       "invalid",
-      "isCustomValue",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
       "loop",
+      "multiple",
       "name",
+      "onChange",
       "onClose",
       "onFocusOutside",
       "onHighlight",
       "onInputChange",
-      "onInputChange",
       "onInteractOutside",
       "onOpen",
       "onPointerDownOutside",
-      "onSelect",
       "openOnClick",
       "placeholder",
       "positioning",
       "readOnly",
-      "selectInputOnFocus",
       "selectionBehavior",
-      "selectionData",
-      "selectOnTab",
-      "translations"
+      "selectOnBlur",
+      "translations",
+      "value"
     ]
   );
-  const combobox = useCombobox.useCombobox(useComboboxProps);
-  const mergedProps = react$1.mergeProps(combobox.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, combobox);
-  return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: combobox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
-});
-Combobox.displayName = "Combobox";
+  const api = useCombobox.useCombobox(useComboboxProps);
+  const view = runIfFn.runIfFn(children, api);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+};
+const Combobox = react.forwardRef(ComboboxImpl);
 
 exports.Combobox = Combobox;

package/combobox/combobox.d.ts

@@ -1,15 +1,11 @@
-import { Context } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-import { type Assign } from '../types';
+import { type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign, type CollectionItem } from '../types';
 import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
-export type ComboboxProps = Assign<Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'>, UseComboboxProps> & {
-    children?: React.ReactNode | ((props: UseComboboxReturn) => React.ReactNode);
+export type ComboboxProps<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseComboboxProps<T>> & {
+    children?: ReactNode | ((state: UseComboboxReturn<T>) => ReactNode);
 };
-export declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    children?: ReactNode | ((props: UseComboboxReturn) => React.ReactNode);
-} & RefAttributes<HTMLDivElement>>;
+export interface ComboboxComponent {
+    <T extends CollectionItem>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+}
+export declare const Combobox: ComboboxComponent;

package/combobox/combobox.mjs

@@ -8,52 +8,54 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
 
-const Combobox = forwardRef((props, ref) => {
-  const [useComboboxProps, { children, ...divProps }] = createSplitProps()(
+const ComboboxImpl = (props, ref) => {
+  const [useComboboxProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
       "allowCustomValue",
-      "ariaHidden",
       "autoFocus",
-      "blurOnSelect",
+      "closeOnSelect",
+      "defaultValue",
       "dir",
       "disabled",
-      "focusOnClear",
       "form",
       "getRootNode",
+      "highlightedValue",
       "id",
       "ids",
       "inputBehavior",
       "inputValue",
       "invalid",
-      "isCustomValue",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
       "loop",
+      "multiple",
       "name",
+      "onChange",
       "onClose",
       "onFocusOutside",
       "onHighlight",
       "onInputChange",
-      "onInputChange",
       "onInteractOutside",
       "onOpen",
       "onPointerDownOutside",
-      "onSelect",
       "openOnClick",
       "placeholder",
       "positioning",
       "readOnly",
-      "selectInputOnFocus",
       "selectionBehavior",
-      "selectionData",
-      "selectOnTab",
-      "translations"
+      "selectOnBlur",
+      "translations",
+      "value"
     ]
   );
-  const combobox = useCombobox(useComboboxProps);
-  const mergedProps = mergeProps(combobox.rootProps, divProps);
-  const view = runIfFn(children, combobox);
-  return /* @__PURE__ */ jsx(ComboboxProvider, { value: combobox, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
-});
-Combobox.displayName = "Combobox";
+  const api = useCombobox(useComboboxProps);
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+};
+const Combobox = forwardRef(ComboboxImpl);
 
 export { Combobox };

package/combobox/combobox.stories.d.ts

@@ -5,3 +5,4 @@ type ComboboxType = typeof Combobox;
 declare const meta: Meta<ComboboxType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Advanced: () => JSX.Element;

package/combobox/index.cjs

@@ -9,10 +9,12 @@ const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxControl = require('./combobox-control.cjs');
 const comboboxInput = require('./combobox-input.cjs');
+const comboboxItem = require('./combobox-item.cjs');
+const comboboxItemGroup = require('./combobox-item-group.cjs');
+const comboboxItemGroupLabel = require('./combobox-item-group-label.cjs');
+const comboboxItemIndicator = require('./combobox-item-indicator.cjs');
+const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
-const comboboxOption = require('./combobox-option.cjs');
-const comboboxOptionGroup = require('./combobox-option-group.cjs');
-const comboboxOptionGroupLabel = require('./combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
 const combobox = require('@zag-js/combobox');
@@ -23,10 +25,12 @@ const Combobox = Object.assign(combobox$1.Combobox, {
   Content: comboboxContent.ComboboxContent,
   Control: comboboxControl.ComboboxControl,
   Input: comboboxInput.ComboboxInput,
+  Item: comboboxItem.ComboboxItem,
+  ItemGroup: comboboxItemGroup.ComboboxItemGroup,
+  ItemGroupLabel: comboboxItemGroupLabel.ComboboxItemGroupLabel,
+  ItemIndicator: comboboxItemIndicator.ComboboxItemIndicator,
+  ItemText: comboboxItemText.ComboboxItemText,
   Label: comboboxLabel.ComboboxLabel,
-  Option: comboboxOption.ComboboxOption,
-  OptionGroup: comboboxOptionGroup.ComboboxOptionGroup,
-  OptionGroupLabel: comboboxOptionGroupLabel.ComboboxOptionGroupLabel,
   Positioner: comboboxPositioner.ComboboxPositioner,
   Trigger: comboboxTrigger.ComboboxTrigger
 });
@@ -36,10 +40,12 @@ exports.ComboboxContent = comboboxContent.ComboboxContent;
 exports.useComboboxContext = comboboxContext.useComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
+exports.ComboboxItem = comboboxItem.ComboboxItem;
+exports.ComboboxItemGroup = comboboxItemGroup.ComboboxItemGroup;
+exports.ComboboxItemGroupLabel = comboboxItemGroupLabel.ComboboxItemGroupLabel;
+exports.ComboboxItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
+exports.ComboboxItemText = comboboxItemText.ComboboxItemText;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
-exports.ComboboxOption = comboboxOption.ComboboxOption;
-exports.ComboboxOptionGroup = comboboxOptionGroup.ComboboxOptionGroup;
-exports.ComboboxOptionGroupLabel = comboboxOptionGroupLabel.ComboboxOptionGroupLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 Object.defineProperty(exports, 'comboboxAnatomy', {