@ark-ui/react 0.14.0 → 0.15.0

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,51 +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",
       "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" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "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,51 +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",
       "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', {

package/combobox/index.d.ts

@@ -1,89 +1,57 @@
-import { PresenceProps } from '..';
-import { UseComboboxReturn } from './use-combobox';
-import { Context, OptionData, OptionGroupProps, OptionGroupLabelProps } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ItemProps, ItemGroupProps, ItemGroupLabelProps } from '@zag-js/combobox';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, InputHTMLAttributes, RefObject, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
-import { type ComboboxProps } from './combobox';
+import type { CollectionItem } from '../types';
+import { ComboboxComponent, type ComboboxProps } from './combobox';
 import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
 import { ComboboxContent, type ComboboxContentProps } from './combobox-content';
-import { useComboboxContext } from './combobox-context';
+import { useComboboxContext, type ComboboxContext } from './combobox-context';
 import { ComboboxControl, type ComboboxControlProps } from './combobox-control';
 import { ComboboxInput, type ComboboxInputProps } from './combobox-input';
+import { ComboboxItem, type ComboboxItemProps } from './combobox-item';
+import { ComboboxItemGroup, type ComboboxItemGroupProps } from './combobox-item-group';
+import { ComboboxItemGroupLabel, type ComboboxItemGroupLabelProps } from './combobox-item-group-label';
+import { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from './combobox-item-indicator';
+import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-text';
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
-import { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
-import { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
-import { ComboboxOptionGroupLabel, type ComboboxOptionGroupLabelProps } from './combobox-option-group-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
 import { comboboxAnatomy } from './combobox.anatomy';
-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" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    children?: ReactNode | ((props: UseComboboxReturn) => ReactNode);
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const Combobox: ComboboxComponent & {
+    Root: ComboboxComponent;
+    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        children?: ReactNode | ((props: UseComboboxReturn) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    } & RefAttributes<HTMLInputElement>>;
+    Item: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Option: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    }, "ref">, "item"> & ItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "disabled" | "index" | keyof OptionData | "count"> & OptionData & {
-        index?: number | undefined;
-        count?: number | undefined;
-        disabled?: boolean | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    OptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    ItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;
-    OptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "htmlFor"> & OptionGroupLabelProps & RefAttributes<HTMLDivElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
 };
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
-export type { ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxLabelProps, ComboboxOptionGroupLabelProps, ComboboxOptionGroupProps, ComboboxOptionProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };

package/combobox/index.mjs

@@ -5,10 +5,12 @@ import { ComboboxContent } from './combobox-content.mjs';
 export { useComboboxContext } from './combobox-context.mjs';
 import { ComboboxControl } from './combobox-control.mjs';
 import { ComboboxInput } from './combobox-input.mjs';
+import { ComboboxItem } from './combobox-item.mjs';
+import { ComboboxItemGroup } from './combobox-item-group.mjs';
+import { ComboboxItemGroupLabel } from './combobox-item-group-label.mjs';
+import { ComboboxItemIndicator } from './combobox-item-indicator.mjs';
+import { ComboboxItemText } from './combobox-item-text.mjs';
 import { ComboboxLabel } from './combobox-label.mjs';
-import { ComboboxOption } from './combobox-option.mjs';
-import { ComboboxOptionGroup } from './combobox-option-group.mjs';
-import { ComboboxOptionGroupLabel } from './combobox-option-group-label.mjs';
 import { ComboboxPositioner } from './combobox-positioner.mjs';
 import { ComboboxTrigger } from './combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
@@ -19,12 +21,14 @@ const Combobox = Object.assign(Combobox$1, {
   Content: ComboboxContent,
   Control: ComboboxControl,
   Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
   Label: ComboboxLabel,
-  Option: ComboboxOption,
-  OptionGroup: ComboboxOptionGroup,
-  OptionGroupLabel: ComboboxOptionGroupLabel,
   Positioner: ComboboxPositioner,
   Trigger: ComboboxTrigger
 });
 
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger };