@ark-ui/react 0.10.0 → 0.11.0-beta.1

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

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup">;
-export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup">;
+export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup", AnatomyPart>;

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type ColorPickerContext } from './color-picker-context';

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

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { ColorPicker } from './';
+type ColorPickerType = typeof ColorPicker;
+declare const meta: Meta<ColorPickerType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/color-picker/index.cjs

@@ -20,9 +20,22 @@ const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
+const ColorPicker = Object.assign(colorPicker.ColorPicker, {
+  Root: colorPicker.ColorPicker,
+  Area: colorPickerArea.ColorPickerArea,
+  AreaGradient: colorPickerAreaGradient.ColorPickerAreaGradient,
+  AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
+  ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
+  ChannelSliderBackground: colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground,
+  ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
+  Content: colorPickerContent.ColorPickerContent,
+  EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  Swatch: colorPickerSwatch.ColorPickerSwatch,
+  SwatchBackground: colorPickerSwatchBackground.ColorPickerSwatchBackground,
+  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup
+});
 
-
-exports.ColorPicker = colorPicker.ColorPicker;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
@@ -39,3 +52,4 @@ exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwa
 exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
+exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -1,17 +1,86 @@
-export { ColorPicker, type ColorPickerProps } from './color-picker';
-export { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
-export { useColorPickerAreaContext } from './color-picker-area-context';
-export { ColorPickerAreaGradient, type ColorPickerAreaGradientProps, } from './color-picker-area-gradient';
-export { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
-export { ColorPickerChannelInput, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
-export { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps, } from './color-picker-channel-slider-background';
-export { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb';
-export { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track';
-export { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
-export { useColorPickerContext } from './color-picker-context';
-export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
-export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
-export { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps, } from './color-picker-swatch-background';
-export { useColorPickerSwatchContext } from './color-picker-swatch-context';
-export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
-export { colorPickerAnatomy } from './color-picker.anatomy';
+import { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps } from '@zag-js/color-picker';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+/// <reference types="react" />
+import { type ColorPickerProps } from './color-picker';
+import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { ColorPickerAreaGradient, type ColorPickerAreaGradientProps } from './color-picker-area-gradient';
+import { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
+import { ColorPickerChannelInput, type ColorPickerChannelInputProps } from './color-picker-channel-input';
+import { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps } from './color-picker-channel-slider-background';
+import { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps } from './color-picker-channel-slider-track';
+import { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
+import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
+import { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps } from './color-picker-swatch-background';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context';
+import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { colorPickerAnatomy } from './color-picker.anatomy';
+declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
+    Root: (props: ColorPickerProps) => JSX.Element;
+    Area: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
+    AreaGradient: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    AreaThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    ChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLInputElement>>;
+    ChannelSliderBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    ChannelSliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    ChannelSliderTrack: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    EyeDropperTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Swatch: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof ColorSwatchProps> & ColorSwatchProps & RefAttributes<HTMLButtonElement>>;
+    SwatchBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    SwatchGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup, colorPickerAnatomy, useColorPickerAreaContext, useColorPickerContext, useColorPickerSwatchContext, };
+export type { ColorPickerAreaGradientProps, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderBackgroundProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerEyeDropperTriggerProps, ColorPickerProps, ColorPickerSwatchBackgroundProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, };

package/color-picker/index.mjs

@@ -1,17 +1,35 @@
-export { ColorPicker } from './color-picker.mjs';
-export { ColorPickerArea } from './color-picker-area.mjs';
+import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
+import { ColorPickerArea } from './color-picker-area.mjs';
 export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
-export { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
-export { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
-export { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
-export { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
-export { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
-export { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
-export { ColorPickerContent } from './color-picker-content.mjs';
+import { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
+import { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
+import { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
+import { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
+import { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
+import { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
+import { ColorPickerContent } from './color-picker-content.mjs';
 export { useColorPickerContext } from './color-picker-context.mjs';
-export { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
-export { ColorPickerSwatch } from './color-picker-swatch.mjs';
-export { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
+import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+import { ColorPickerSwatch } from './color-picker-swatch.mjs';
+import { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
 export { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
-export { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
+import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 export { colorPickerAnatomy } from './color-picker.anatomy.mjs';
+
+const ColorPicker = Object.assign(ColorPicker$1, {
+  Root: ColorPicker$1,
+  Area: ColorPickerArea,
+  AreaGradient: ColorPickerAreaGradient,
+  AreaThumb: ColorPickerAreaThumb,
+  ChannelInput: ColorPickerChannelInput,
+  ChannelSliderBackground: ColorPickerChannelSliderBackground,
+  ChannelSliderThumb: ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  Content: ColorPickerContent,
+  EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  Swatch: ColorPickerSwatch,
+  SwatchBackground: ColorPickerSwatchBackground,
+  SwatchGroup: ColorPickerSwatchGroup
+});
+
+export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup };

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

@@ -7,6 +7,7 @@ const colorPicker = require('@zag-js/color-picker');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const reactDom = require('react-dom');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as colorPicker from '@zag-js/color-picker';
 import type { Optional } from '../types';
 export type UseColorPickerProps = Optional<colorPicker.Context, 'id'> & {

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

@@ -3,6 +3,7 @@ import * as colorPicker from '@zag-js/color-picker';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId, useCallback } from 'react';
 import { flushSync } from 'react-dom';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useColorPicker = (props) => {

package/combobox/combobox-clear-trigger.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 ComboboxClearTrigger = react.forwardRef(
+  (props, ref) => {
+    const { clearTriggerProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(clearTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
+
+exports.ComboboxClearTrigger = ComboboxClearTrigger;

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

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

package/combobox/combobox-clear-trigger.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';
+
+const ComboboxClearTrigger = forwardRef(
+  (props, ref) => {
+    const { clearTriggerProps } = useComboboxContext();
+    const mergedProps = mergeProps(clearTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
+
+export { ComboboxClearTrigger };

package/combobox/combobox-content.cjs

@@ -7,9 +7,10 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxPresence = require('./combobox-presence.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const ComboboxContent = react.forwardRef((props, ref) => {
   const [presenceProps, comboboxContentProps] = splitPresenceProps.splitPresenceProps(props);
@@ -20,7 +21,7 @@ const InnerComboboxContent = react.forwardRef(
   (props, ref) => {
     const { contentProps } = comboboxContext.useComboboxContext();
     const mergedProps = react$1.mergeProps(contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 InnerComboboxContent.displayName = "InnerComboboxContent";

package/combobox/combobox-content.d.ts

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

package/combobox/combobox-content.mjs

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 import { ComboboxPresence } from './combobox-presence.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const ComboboxContent = forwardRef((props, ref) => {
   const [presenceProps, comboboxContentProps] = splitPresenceProps(props);
@@ -16,7 +17,7 @@ const InnerComboboxContent = forwardRef(
   (props, ref) => {
     const { contentProps } = useComboboxContext();
     const mergedProps = mergeProps(contentProps, props);
-    return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 InnerComboboxContent.displayName = "InnerComboboxContent";

package/combobox/combobox-context.d.ts

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/combobox';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/combobox';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseComboboxReturn } from './use-combobox';
 export type ComboboxContext = UseComboboxReturn;
 export declare const ComboboxProvider: Provider<PublicApi<JSX.IntrinsicElements & {

package/combobox/combobox-control.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type ComboboxControlProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const ComboboxControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/combobox/combobox-input.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type ComboboxInputProps = ComponentPropsWithoutRef<typeof ark.input>;
 export declare const ComboboxInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {

package/combobox/combobox-label.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

package/combobox/combobox-option-group-label.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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroupLabel = react.forwardRef(
+  (props, ref) => {
+    const [optionProps, labelProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
+    const { getOptionGroupLabelProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+
+exports.ComboboxOptionGroupLabel = ComboboxOptionGroupLabel;

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

@@ -0,0 +1,10 @@
+import type { OptionGroupLabelProps } 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 ComboboxOptionGroupLabelProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionGroupLabelProps>;
+export declare const ComboboxOptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "htmlFor"> & OptionGroupLabelProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-option-group-label.mjs

@@ -0,0 +1,19 @@
+'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 { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroupLabel = forwardRef(
+  (props, ref) => {
+    const [optionProps, labelProps] = createSplitProps()(props, ["htmlFor"]);
+    const { getOptionGroupLabelProps } = useComboboxContext();
+    const mergedProps = mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+
+export { ComboboxOptionGroupLabel };

package/combobox/combobox-option-group.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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroup = react.forwardRef(
+  (props, ref) => {
+    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+    const { getOptionGroupProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+
+exports.ComboboxOptionGroup = ComboboxOptionGroup;

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

@@ -0,0 +1,10 @@
+import type { OptionGroupProps } 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 ComboboxOptionGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionGroupProps>;
+export declare const ComboboxOptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-option-group.mjs

@@ -0,0 +1,19 @@
+'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 { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroup = forwardRef(
+  (props, ref) => {
+    const [optionProps, localProps] = createSplitProps()(props, ["id"]);
+    const { getOptionGroupProps } = useComboboxContext();
+    const mergedProps = mergeProps(getOptionGroupProps(optionProps), localProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+
+export { ComboboxOptionGroup };

package/combobox/combobox-option.cjs

@@ -20,7 +20,7 @@ const ComboboxOption = react.forwardRef((props, ref) => {
   ]);
   const { getOptionProps } = comboboxContext.useComboboxContext();
   const mergedProps = react$1.mergeProps(getOptionProps(optionProps), liProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref, children: children ? children : optionProps.label });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: children ? children : optionProps.label });
 });
 ComboboxOption.displayName = "ComboboxOption";
 

package/combobox/combobox-option.d.ts

@@ -1,14 +1,14 @@
-import type { OptionData, OptionProps } from '@zag-js/combobox';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LiHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { OptionData, OptionProps } 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 ComboboxOptionProps = Assign<ComponentPropsWithoutRef<typeof ark.li>, OptionProps>;
-export declare const ComboboxOption: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | RefObject<HTMLLIElement> | null | undefined;
+export type ComboboxOptionProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionProps>;
+export declare const ComboboxOption: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "disabled" | "index" | keyof OptionData | "count"> & OptionData & {
     index?: number | undefined;
     count?: number | undefined;
     disabled?: boolean | undefined;
-} & RefAttributes<HTMLLIElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-option.mjs

@@ -16,7 +16,7 @@ const ComboboxOption = forwardRef((props, ref) => {
   ]);
   const { getOptionProps } = useComboboxContext();
   const mergedProps = mergeProps(getOptionProps(optionProps), liProps);
-  return /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref, children: children ? children : optionProps.label });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: children ? children : optionProps.label });
 });
 ComboboxOption.displayName = "ComboboxOption";
 

package/combobox/combobox-positioner.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

package/combobox/combobox-presence.cjs

@@ -4,13 +4,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const presence = require('../presence/presence.cjs');
+const index = require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxPresence = (props) => {
   const { present, ...rest } = props;
   const { isOpen } = comboboxContext.useComboboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(presence.Presence, { present: present !== void 0 ? present : isOpen, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: present !== void 0 ? present : isOpen, ...rest });
 };
 
 exports.ComboboxPresence = ComboboxPresence;

package/combobox/combobox-presence.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { type PresenceProps } from '../presence';
 export type ComboboxPresenceProps = PresenceProps;
 export declare const ComboboxPresence: (props: ComboboxPresenceProps) => JSX.Element;

package/combobox/combobox-presence.mjs

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Presence } from '../presence/presence.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxPresence = (props) => {

package/combobox/combobox-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

package/combobox/combobox.cjs

@@ -34,11 +34,13 @@ const Combobox = react.forwardRef((props, ref) => {
       "loop",
       "name",
       "onClose",
+      "onFocusOutside",
       "onHighlight",
       "onInputChange",
       "onInputChange",
       "onInteractOutside",
       "onOpen",
+      "onPointerDownOutside",
       "onSelect",
       "openOnClick",
       "placeholder",