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

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

@@ -29,18 +29,18 @@ function _interopNamespaceDefault(e) {
 
 const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
 
-const useColorPicker = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
+const useColorPicker = (props = {}) => {
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ?? props.value
+    value: props.defaultValue ? colorPicker__namespace.parse(props.defaultValue) : void 0
   };
   const context = {
     ...initialContext,
-    value: props.value,
-    onChange: useEvent.useEvent(props.onChange, { sync: true })
+    value: props.value ? colorPicker__namespace.parse(props.value) : void 0,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onValueChangeEnd: useEvent.useEvent(props.onValueChangeEnd)
   };
   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,13 @@
 import * as colorPicker from '@zag-js/color-picker';
+import { type PropTypes } from '@zag-js/react';
 import type { Optional } from '../types';
-export interface UseColorPickerProps extends Optional<colorPicker.Context, 'id'> {
-    defaultValue?: colorPicker.Context['value'];
+export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'value'>, 'id'> {
+    /**
+     * The initial value of the color picker.
+     */
+    defaultValue?: string;
+    value?: string;
 }
-export type UseColorPickerReturn = colorPicker.Api;
-export declare const useColorPicker: (props: UseColorPickerProps) => UseColorPickerReturn;
+export interface UseColorPickerReturn extends colorPicker.Api<PropTypes> {
+}
+export declare const useColorPicker: (props?: UseColorPickerProps) => UseColorPickerReturn;

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

@@ -6,18 +6,18 @@ import '../environment/index.mjs';
 import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
-const useColorPicker = (props) => {
-  const getRootNode = useEnvironmentContext();
+const useColorPicker = (props = {}) => {
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ?? props.value
+    value: props.defaultValue ? colorPicker.parse(props.defaultValue) : void 0
   };
   const context = {
     ...initialContext,
-    value: props.value,
-    onChange: useEvent(props.onChange, { sync: true })
+    value: props.value ? colorPicker.parse(props.value) : void 0,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onValueChangeEnd: useEvent(props.onValueChangeEnd)
   };
   const [state, send] = useMachine(colorPicker.machine(initialContext), { context });
   return colorPicker.connect(state, send, normalizeProps);

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLButtonElement>>;
+export interface ComboboxClearTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ComboboxClearTrigger: ForwardRefExoticComponent<ComboboxClearTriggerProps & RefAttributes<HTMLButtonElement>>;

package/combobox/combobox-content.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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>>;
+export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const ComboboxContent: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-context.d.ts

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

package/combobox/combobox-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface ComboboxControlProps extends HTMLArkProps<'div'> {
+}
+export declare const ComboboxControl: ForwardRefExoticComponent<ComboboxControlProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-input.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLInputElement>>;
+export interface ComboboxInputProps extends HTMLArkProps<'input'> {
+}
+export declare const ComboboxInput: ForwardRefExoticComponent<ComboboxInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,6 @@
 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;
+export interface ComboboxItemContext extends ItemProps {
+}
+export declare const ComboboxItemProvider: Provider<ComboboxItemContext>, useComboboxItemContext: () => ComboboxItemContext;

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

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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>>;
+export interface ComboboxItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
+}
+export declare const ComboboxItemGroupLabel: ForwardRefExoticComponent<ComboboxItemGroupLabelProps & RefAttributes<HTMLDivElement>>;

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

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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>>;
+export interface ComboboxItemGroupProps extends Assign<HTMLArkProps<'div'>, ItemGroupProps> {
+}
+export declare const ComboboxItemGroup: ForwardRefExoticComponent<ComboboxItemGroupProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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>>;
+export interface ComboboxItemIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const ComboboxItemIndicator: ForwardRefExoticComponent<ComboboxItemIndicatorProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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>>;
+export interface ComboboxItemTextProps extends HTMLArkProps<'span'> {
+}
+export declare const ComboboxItemText: ForwardRefExoticComponent<ComboboxItemTextProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-item.d.ts

@@ -1,10 +1,7 @@
 import type { ItemProps } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 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">, "item"> & ItemProps & RefAttributes<HTMLDivElement>>;
+export interface ComboboxItemProps extends Assign<ComponentPropsWithoutRef<typeof ark.div>, ItemProps> {
+}
+export declare const ComboboxItem: ForwardRefExoticComponent<ComboboxItemProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLLabelElement>>;
+export interface ComboboxLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ComboboxLabel: ForwardRefExoticComponent<ComboboxLabelProps & RefAttributes<HTMLLabelElement>>;

package/combobox/combobox-positioner.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface ComboboxPositionerProps extends HTMLArkProps<'div'> {
+}
+export declare const ComboboxPositioner: ForwardRefExoticComponent<ComboboxPositionerProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLButtonElement>>;
+export interface ComboboxTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ComboboxTrigger: ForwardRefExoticComponent<ComboboxTriggerProps & RefAttributes<HTMLButtonElement>>;

package/combobox/combobox.cjs

@@ -37,14 +37,14 @@ const ComboboxImpl = (props, ref) => {
       "loop",
       "multiple",
       "name",
-      "onChange",
-      "onClose",
       "onFocusOutside",
-      "onHighlight",
-      "onInputChange",
+      "onHighlightChange",
+      "onInputValueChange",
       "onInteractOutside",
-      "onOpen",
+      "onOpenChange",
+      "onOpenChange",
       "onPointerDownOutside",
+      "onValueChange",
       "openOnClick",
       "placeholder",
       "positioning",

package/combobox/combobox.d.ts

@@ -2,9 +2,10 @@ 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<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseComboboxProps<T>> & {
+export interface ComboboxProps<T extends CollectionItem> extends Assign<HTMLArkProps<'div'>, UseComboboxProps<T> & {
     children?: ReactNode | ((state: UseComboboxReturn<T>) => ReactNode);
-};
+}> {
+}
 export interface ComboboxComponent {
     <T extends CollectionItem>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
 }

package/combobox/combobox.mjs

@@ -33,14 +33,14 @@ const ComboboxImpl = (props, ref) => {
       "loop",
       "multiple",
       "name",
-      "onChange",
-      "onClose",
       "onFocusOutside",
-      "onHighlight",
-      "onInputChange",
+      "onHighlightChange",
+      "onInputValueChange",
       "onInteractOutside",
-      "onOpen",
+      "onOpenChange",
+      "onOpenChange",
       "onPointerDownOutside",
+      "onValueChange",
       "openOnClick",
       "placeholder",
       "positioning",

package/combobox/index.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox$1 = require('./combobox.cjs');
+const combobox = require('./combobox.cjs');
 const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
@@ -17,10 +17,9 @@ const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
-const combobox = require('@zag-js/combobox');
 
-const Combobox = Object.assign(combobox$1.Combobox, {
-  Root: combobox$1.Combobox,
+const Combobox = Object.assign(combobox.Combobox, {
+  Root: combobox.Combobox,
   ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
   Content: comboboxContent.ComboboxContent,
   Control: comboboxControl.ComboboxControl,
@@ -48,8 +47,4 @@ exports.ComboboxItemText = comboboxItemText.ComboboxItemText;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
-Object.defineProperty(exports, 'comboboxAnatomy', {
-  enumerable: true,
-  get: () => combobox.anatomy
-});
 exports.Combobox = Combobox;

package/combobox/index.d.ts

@@ -1,6 +1,4 @@
-import { ItemProps, ItemGroupProps, ItemGroupLabelProps } from '@zag-js/combobox';
-import { HTMLArkProps, PresenceProps } from '..';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, InputHTMLAttributes, RefObject, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { CollectionItem } from '../types';
 import { ComboboxComponent, type ComboboxProps } from './combobox';
@@ -17,41 +15,20 @@ import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-te
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-import { comboboxAnatomy } from './combobox.anatomy';
 declare const Combobox: ComboboxComponent & {
     Root: ComboboxComponent;
-    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | 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;
-    } & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & 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">, "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;
-    } & RefAttributes<HTMLDivElement>>;
-    ItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
+    ClearTrigger: ForwardRefExoticComponent<ComboboxClearTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<ComboboxControlProps & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<ComboboxInputProps & RefAttributes<HTMLInputElement>>;
+    Item: ForwardRefExoticComponent<ComboboxItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<ComboboxItemGroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<ComboboxItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<ComboboxItemIndicatorProps & RefAttributes<HTMLDivElement>>;
+    ItemText: ForwardRefExoticComponent<ComboboxItemTextProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<ComboboxLabelProps & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<ComboboxPositionerProps & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<ComboboxTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, useComboboxContext, };
 export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };

package/combobox/index.mjs

@@ -13,7 +13,6 @@ import { ComboboxItemText } from './combobox-item-text.mjs';
 import { ComboboxLabel } from './combobox-label.mjs';
 import { ComboboxPositioner } from './combobox-positioner.mjs';
 import { ComboboxTrigger } from './combobox-trigger.mjs';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 
 const Combobox = Object.assign(Combobox$1, {
   Root: Combobox$1,

package/combobox/use-combobox.cjs

@@ -8,6 +8,7 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,25 +31,32 @@ function _interopNamespaceDefault(e) {
 const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 
 const useCombobox = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
-  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+  const [collectionOptions, comboboxProps] = createSplitProps.createSplitProps()(props, [
     "isItemDisabled",
     "itemToValue",
     "itemToString",
     "items"
   ]);
-  const collection = combobox__namespace.collection(collectionOptions);
+  const collection = react.useMemo(
+    () => combobox__namespace.collection(collectionOptions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(collectionOptions)
+  );
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     collection,
-    ...rest,
+    ...comboboxProps,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
     collection,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onInputValueChange: useEvent.useEvent(props.onInputValueChange, { sync: true }),
+    onHighlightChange: useEvent.useEvent(props.onHighlightChange),
+    onOpenChange: useEvent.useEvent(props.onOpenChange)
   };
   const [state, send] = react$1.useMachine(combobox__namespace.machine(initialContext), {
     context

package/combobox/use-combobox.d.ts

@@ -3,7 +3,11 @@ import * as combobox from '@zag-js/combobox';
 import { type PropTypes } from '@zag-js/react';
 import { type CollectionItem, type Optional } from '../types';
 export interface UseComboboxProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<combobox.Context<T>, 'id'>, 'collection'> {
+    /**
+     * the initial value of the combobox
+     */
     defaultValue?: combobox.Context<T>['value'];
 }
-export type UseComboboxReturn<T extends CollectionItem> = combobox.Api<PropTypes, T>;
+export interface UseComboboxReturn<T extends CollectionItem> extends combobox.Api<PropTypes, T> {
+}
 export declare const useCombobox: <T extends CollectionItem>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;

package/combobox/use-combobox.mjs

@@ -1,31 +1,39 @@
 'use client';
 import * as combobox from '@zag-js/combobox';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId } from 'react';
+import { useMemo, useId } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCombobox = (props) => {
-  const getRootNode = useEnvironmentContext();
-  const [collectionOptions, rest] = createSplitProps()(props, [
+  const [collectionOptions, comboboxProps] = createSplitProps()(props, [
     "isItemDisabled",
     "itemToValue",
     "itemToString",
     "items"
   ]);
-  const collection = combobox.collection(collectionOptions);
+  const collection = useMemo(
+    () => combobox.collection(collectionOptions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(collectionOptions)
+  );
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     collection,
-    ...rest,
+    ...comboboxProps,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
     collection,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onInputValueChange: useEvent(props.onInputValueChange, { sync: true }),
+    onHighlightChange: useEvent(props.onHighlightChange),
+    onOpenChange: useEvent(props.onOpenChange)
   };
   const [state, send] = useMachine(combobox.machine(initialContext), {
     context

package/date-picker/date-picker-clear-trigger.cjs

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

package/date-picker/date-picker-clear-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type DatePickerClearTriggerProps = HTMLArkProps<'button'>;
-export declare const DatePickerClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface DatePickerClearTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DatePickerClearTrigger: ForwardRefExoticComponent<DatePickerClearTriggerProps & RefAttributes<HTMLButtonElement>>;

package/date-picker/date-picker-clear-trigger.mjs

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

package/date-picker/date-picker-content.cjs

@@ -11,8 +11,8 @@ const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerContent = react.forwardRef(
   (props, ref) => {
-    const { contentProps } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(contentProps, props);
+    const api = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-content.d.ts

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

package/date-picker/date-picker-content.mjs

@@ -7,8 +7,8 @@ import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerContent = forwardRef(
   (props, ref) => {
-    const { contentProps } = useDatePickerContext();
-    const mergedProps = mergeProps(contentProps, props);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseDatePickerReturn } from './use-date-picker';
-export type DatePickerContext = UseDatePickerReturn;
-export declare const DatePickerProvider: Provider<UseDatePickerReturn>, useDatePickerContext: () => UseDatePickerReturn;
+export interface DatePickerContext extends UseDatePickerReturn {
+}
+export declare const DatePickerProvider: Provider<DatePickerContext>, useDatePickerContext: () => DatePickerContext;

package/date-picker/date-picker-control.cjs

@@ -11,8 +11,8 @@ const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerControl = react.forwardRef(
   (props, ref) => {
-    const { controlProps } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(controlProps, props);
+    const api = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(api.controlProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );