@ark-ui/react 1.3.0 → 2.0.1

package/color-picker/index.mjs

@@ -1,55 +1,28 @@
-'use client';
-import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
-import { ColorPickerArea } from './color-picker-area.mjs';
-import { ColorPickerAreaBackground } from './color-picker-area-background.mjs';
+export { ColorPickerArea } from './color-picker-area.mjs';
+export { ColorPickerAreaBackground } from './color-picker-area-background.mjs';
 export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
-import { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
-import { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
-import { ColorPickerChannelSlider } from './color-picker-channel-slider.mjs';
+export { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
+export { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
+export { ColorPickerChannelSlider } from './color-picker-channel-slider.mjs';
 export { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.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 { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
+export { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
+export { ColorPickerContent } from './color-picker-content.mjs';
 export { useColorPickerContext } from './color-picker-context.mjs';
-import { ColorPickerControl } from './color-picker-control.mjs';
-import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
-import { ColorPickerFormatSelect } from './color-picker-format-select.mjs';
-import { ColorPickerFormatTrigger } from './color-picker-format-trigger.mjs';
-import { ColorPickerLabel } from './color-picker-label.mjs';
-import { ColorPickerPositioner } from './color-picker-positioner.mjs';
-import { ColorPickerSwatch } from './color-picker-swatch.mjs';
-import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
-import { ColorPickerSwatchIndicator } from './color-picker-swatch-indicator.mjs';
-import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
-import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
-import { ColorPickerTrigger } from './color-picker-trigger.mjs';
-import { ColorPickerValueText } from './color-picker-value-text.mjs';
-import { ColorPickerView } from './color-picker-view.mjs';
-
-const ColorPicker = Object.assign(ColorPicker$1, {
-  Root: ColorPicker$1,
-  Area: ColorPickerArea,
-  AreaBackground: ColorPickerAreaBackground,
-  AreaThumb: ColorPickerAreaThumb,
-  ChannelInput: ColorPickerChannelInput,
-  ChannelSlider: ColorPickerChannelSlider,
-  ChannelSliderThumb: ColorPickerChannelSliderThumb,
-  ChannelSliderTrack: ColorPickerChannelSliderTrack,
-  Content: ColorPickerContent,
-  Control: ColorPickerControl,
-  EyeDropperTrigger: ColorPickerEyeDropperTrigger,
-  FormatTrigger: ColorPickerFormatTrigger,
-  FormatSelect: ColorPickerFormatSelect,
-  Label: ColorPickerLabel,
-  Positioner: ColorPickerPositioner,
-  Swatch: ColorPickerSwatch,
-  SwatchGroup: ColorPickerSwatchGroup,
-  SwatchIndicator: ColorPickerSwatchIndicator,
-  SwatchTrigger: ColorPickerSwatchTrigger,
-  TransparencyGrid: ColorPickerTransparencyGrid,
-  Trigger: ColorPickerTrigger,
-  ValueText: ColorPickerValueText,
-  View: ColorPickerView
-});
-
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView };
+export { ColorPickerControl } from './color-picker-control.mjs';
+export { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerFormatSelect } from './color-picker-format-select.mjs';
+export { ColorPickerFormatTrigger } from './color-picker-format-trigger.mjs';
+export { ColorPickerLabel } from './color-picker-label.mjs';
+export { ColorPickerPositioner } from './color-picker-positioner.mjs';
+export { ColorPickerRoot } from './color-picker-root.mjs';
+export { ColorPickerSwatch } from './color-picker-swatch.mjs';
+export { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
+export { ColorPickerSwatchIndicator } from './color-picker-swatch-indicator.mjs';
+export { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
+export { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
+export { ColorPickerTrigger } from './color-picker-trigger.mjs';
+export { ColorPickerValueText } from './color-picker-value-text.mjs';
+export { ColorPickerView } from './color-picker-view.mjs';
+import * as colorPicker from './color-picker.mjs';
+export { colorPicker as ColorPicker };

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

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const colorPicker = require('@zag-js/color-picker');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

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

@@ -2,9 +2,8 @@
 import * as colorPicker from '@zag-js/color-picker';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useColorPicker = (props) => {
   const initialContext = {

package/combobox/combobox-content.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const comboboxContext = require('./combobox-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxContent = react.forwardRef((props, ref) => {
   const api = comboboxContext.useComboboxContext();

package/combobox/combobox-content.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useComboboxContext } from './combobox-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxContent = forwardRef((props, ref) => {
   const api = useComboboxContext();

package/combobox/combobox-positioner.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const comboboxContext = require('./combobox-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxPositioner = react.forwardRef(
   (props, ref) => {

package/combobox/combobox-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useComboboxContext } from './combobox-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxPositioner = forwardRef(
   (props, ref) => {

package/combobox/combobox-root.cjs

@@ -0,0 +1,70 @@
+'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 presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const useCombobox = require('./use-combobox.cjs');
+
+const ComboboxImpl = (props, ref) => {
+  const [presenceProps, comboboxProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useComboboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    comboboxProps,
+    [
+      "allowCustomValue",
+      "autoFocus",
+      "closeOnSelect",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "highlightedValue",
+      "id",
+      "ids",
+      "inputBehavior",
+      "inputValue",
+      "invalid",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
+      "loop",
+      "multiple",
+      "name",
+      "onFocusOutside",
+      "onHighlightChange",
+      "onInputValueChange",
+      "onInteractOutside",
+      "onOpenChange",
+      "onOpenChange",
+      "onPointerDownOutside",
+      "onValueChange",
+      "openOnClick",
+      "placeholder",
+      "positioning",
+      "readOnly",
+      "selectionBehavior",
+      "selectOnBlur",
+      "translations",
+      "value"
+    ]
+  );
+  const api = useCombobox.useCombobox(useComboboxProps);
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
+  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(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
+};
+const ComboboxRoot = react.forwardRef(ComboboxImpl);
+
+exports.ComboboxRoot = ComboboxRoot;

package/combobox/combobox-root.d.ts

@@ -0,0 +1,13 @@
+import { type JSX, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import { type Assign, type CollectionItem } from '../types';
+import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
+export interface ComboboxRootProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseComboboxReturn<T>) => ReactNode);
+}>, UseComboboxProps<T>>, UsePresenceProps {
+}
+export interface ComboboxComponent {
+    <T extends CollectionItem>(props: ComboboxRootProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+}
+export declare const ComboboxRoot: ComboboxComponent;

package/combobox/combobox-root.mjs

@@ -0,0 +1,66 @@
+'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 { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { ComboboxProvider } from './combobox-context.mjs';
+import { useCombobox } from './use-combobox.mjs';
+
+const ComboboxImpl = (props, ref) => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [useComboboxProps, { children, ...localProps }] = createSplitProps()(
+    comboboxProps,
+    [
+      "allowCustomValue",
+      "autoFocus",
+      "closeOnSelect",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "highlightedValue",
+      "id",
+      "ids",
+      "inputBehavior",
+      "inputValue",
+      "invalid",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
+      "loop",
+      "multiple",
+      "name",
+      "onFocusOutside",
+      "onHighlightChange",
+      "onInputValueChange",
+      "onInteractOutside",
+      "onOpenChange",
+      "onOpenChange",
+      "onPointerDownOutside",
+      "onValueChange",
+      "openOnClick",
+      "placeholder",
+      "positioning",
+      "readOnly",
+      "selectionBehavior",
+      "selectOnBlur",
+      "translations",
+      "value"
+    ]
+  );
+  const api = useCombobox(useComboboxProps);
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
+};
+const ComboboxRoot = forwardRef(ComboboxImpl);
+
+export { ComboboxRoot };

package/combobox/combobox.cjs

@@ -1,71 +1,33 @@
-'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');
-require('../presence/index.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const comboboxContext = require('./combobox-context.cjs');
-const useCombobox = require('./use-combobox.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
+const comboboxContent = require('./combobox-content.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 comboboxPositioner = require('./combobox-positioner.cjs');
+const comboboxRoot = require('./combobox-root.cjs');
+const comboboxTrigger = require('./combobox-trigger.cjs');
 
-const ComboboxImpl = (props, ref) => {
-  const [presenceProps, comboboxProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useComboboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    comboboxProps,
-    [
-      "allowCustomValue",
-      "autoFocus",
-      "closeOnSelect",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "highlightedValue",
-      "id",
-      "ids",
-      "inputBehavior",
-      "inputValue",
-      "invalid",
-      "isItemDisabled",
-      "items",
-      "itemToString",
-      "itemToValue",
-      "loop",
-      "multiple",
-      "name",
-      "onFocusOutside",
-      "onHighlightChange",
-      "onInputValueChange",
-      "onInteractOutside",
-      "onOpenChange",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "openOnClick",
-      "placeholder",
-      "positioning",
-      "readOnly",
-      "selectionBehavior",
-      "selectOnBlur",
-      "translations",
-      "value"
-    ]
-  );
-  const api = useCombobox.useCombobox(useComboboxProps);
-  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
-  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(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
-};
-const Combobox = react.forwardRef(ComboboxImpl);
 
-exports.Combobox = Combobox;
+
+exports.ClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
+exports.Content = comboboxContent.ComboboxContent;
+exports.Control = comboboxControl.ComboboxControl;
+exports.Input = comboboxInput.ComboboxInput;
+exports.Item = comboboxItem.ComboboxItem;
+exports.ItemGroup = comboboxItemGroup.ComboboxItemGroup;
+exports.ItemGroupLabel = comboboxItemGroupLabel.ComboboxItemGroupLabel;
+exports.ItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
+exports.ItemText = comboboxItemText.ComboboxItemText;
+exports.Label = comboboxLabel.ComboboxLabel;
+exports.Positioner = comboboxPositioner.ComboboxPositioner;
+exports.Root = comboboxRoot.ComboboxRoot;
+exports.Trigger = comboboxTrigger.ComboboxTrigger;

package/combobox/combobox.d.ts

@@ -1,13 +1,14 @@
-import { type JSX, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import { type Assign, type CollectionItem } from '../types';
-import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
-export interface ComboboxProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseComboboxReturn<T>) => ReactNode);
-}>, UseComboboxProps<T>>, UsePresenceProps {
-}
-export interface ComboboxComponent {
-    <T extends CollectionItem>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
-}
-export declare const Combobox: ComboboxComponent;
+import { ComboboxClearTrigger as ClearTrigger } from './combobox-clear-trigger';
+import { ComboboxContent as Content } from './combobox-content';
+import { ComboboxControl as Control } from './combobox-control';
+import { ComboboxInput as Input } from './combobox-input';
+import { ComboboxItem as Item } from './combobox-item';
+import { ComboboxItemGroup as ItemGroup } from './combobox-item-group';
+import { ComboboxItemGroupLabel as ItemGroupLabel } from './combobox-item-group-label';
+import { ComboboxItemIndicator as ItemIndicator } from './combobox-item-indicator';
+import { ComboboxItemText as ItemText } from './combobox-item-text';
+import { ComboboxLabel as Label } from './combobox-label';
+import { ComboboxPositioner as Positioner } from './combobox-positioner';
+import { ComboboxRoot as Root } from './combobox-root';
+import { ComboboxTrigger as Trigger } from './combobox-trigger';
+export { ClearTrigger, Content, Control, Input, Item, ItemGroup, ItemGroupLabel, ItemIndicator, ItemText, Label, Positioner, Root, Trigger, };

package/combobox/combobox.mjs

@@ -1,67 +1,13 @@
-'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 '../presence/index.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { ComboboxProvider } from './combobox-context.mjs';
-import { useCombobox } from './use-combobox.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
-
-const ComboboxImpl = (props, ref) => {
-  const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, { children, ...localProps }] = createSplitProps()(
-    comboboxProps,
-    [
-      "allowCustomValue",
-      "autoFocus",
-      "closeOnSelect",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "highlightedValue",
-      "id",
-      "ids",
-      "inputBehavior",
-      "inputValue",
-      "invalid",
-      "isItemDisabled",
-      "items",
-      "itemToString",
-      "itemToValue",
-      "loop",
-      "multiple",
-      "name",
-      "onFocusOutside",
-      "onHighlightChange",
-      "onInputValueChange",
-      "onInteractOutside",
-      "onOpenChange",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "openOnClick",
-      "placeholder",
-      "positioning",
-      "readOnly",
-      "selectionBehavior",
-      "selectOnBlur",
-      "translations",
-      "value"
-    ]
-  );
-  const api = useCombobox(useComboboxProps);
-  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn(children, api);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
-};
-const Combobox = forwardRef(ComboboxImpl);
-
-export { Combobox };
+export { ComboboxClearTrigger as ClearTrigger } from './combobox-clear-trigger.mjs';
+export { ComboboxContent as Content } from './combobox-content.mjs';
+export { ComboboxControl as Control } from './combobox-control.mjs';
+export { ComboboxInput as Input } from './combobox-input.mjs';
+export { ComboboxItem as Item } from './combobox-item.mjs';
+export { ComboboxItemGroup as ItemGroup } from './combobox-item-group.mjs';
+export { ComboboxItemGroupLabel as ItemGroupLabel } from './combobox-item-group-label.mjs';
+export { ComboboxItemIndicator as ItemIndicator } from './combobox-item-indicator.mjs';
+export { ComboboxItemText as ItemText } from './combobox-item-text.mjs';
+export { ComboboxLabel as Label } from './combobox-label.mjs';
+export { ComboboxPositioner as Positioner } from './combobox-positioner.mjs';
+export { ComboboxRoot as Root } from './combobox-root.mjs';
+export { ComboboxTrigger as Trigger } from './combobox-trigger.mjs';

package/combobox/index.cjs

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('./combobox.cjs');
 const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
@@ -16,23 +14,11 @@ const comboboxItemIndicator = require('./combobox-item-indicator.cjs');
 const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
+const comboboxRoot = require('./combobox-root.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
+const combobox = require('./combobox.cjs');
+
 
-const Combobox = Object.assign(combobox.Combobox, {
-  Root: combobox.Combobox,
-  ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
-  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,
-  Positioner: comboboxPositioner.ComboboxPositioner,
-  Trigger: comboboxTrigger.ComboboxTrigger
-});
 
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
@@ -46,5 +32,6 @@ exports.ComboboxItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
 exports.ComboboxItemText = comboboxItemText.ComboboxItemText;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
+exports.ComboboxRoot = comboboxRoot.ComboboxRoot;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
-exports.Combobox = Combobox;
+exports.Combobox = combobox;

package/combobox/index.d.ts

@@ -1,8 +1,5 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails } from '@zag-js/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, type ComboboxContext } from './combobox-context';
@@ -15,21 +12,8 @@ import { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from './combob
 import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-text';
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
+import { ComboboxRoot, type ComboboxRootProps } from './combobox-root';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-declare const Combobox: ComboboxComponent & {
-    Root: ComboboxComponent;
-    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, useComboboxContext, };
-export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxHighlightChangeDetails, ComboboxInputProps, ComboboxInputValueChangeDetails, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxOpenChangeDetails, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, ComboboxValueChangeDetails, };
+export * as Combobox from './combobox';
+export { ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, useComboboxContext, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxHighlightChangeDetails, ComboboxInputProps, ComboboxInputValueChangeDetails, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxOpenChangeDetails, ComboboxPositionerProps, ComboboxRootProps, ComboboxTriggerProps, ComboboxValueChangeDetails, };