@ark-ui/react 1.3.0 → 2.0.1

package/select/select.mjs

@@ -1,58 +1,14 @@
-'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 { SelectProvider } from './select-context.mjs';
-import { useSelect } from './use-select.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
-
-const SelectImpl = (props, ref) => {
-  const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, { children, ...localProps }] = createSplitProps()(
-    selectProps,
-    [
-      "closeOnSelect",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "highlightedValue",
-      "id",
-      "ids",
-      "invalid",
-      "isItemDisabled",
-      "items",
-      "itemToString",
-      "itemToValue",
-      "loop",
-      "multiple",
-      "name",
-      "onFocusOutside",
-      "onHighlightChange",
-      "onInteractOutside",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "open",
-      "positioning",
-      "readOnly",
-      "selectOnBlur",
-      "value"
-    ]
-  );
-  const api = useSelect(useSelectProps);
-  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn(children, api);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
-};
-const Select = forwardRef(SelectImpl);
-
-export { Select };
+export { SelectClearTrigger as ClearTrigger } from './select-clear-trigger.mjs';
+export { SelectContent as Content } from './select-content.mjs';
+export { SelectControl as Control } from './select-control.mjs';
+export { SelectIndicator as Indicator } from './select-indicator.mjs';
+export { SelectItem as Item } from './select-item.mjs';
+export { SelectItemGroup as ItemGroup } from './select-item-group.mjs';
+export { SelectItemGroupLabel as ItemGroupLabel } from './select-item-group-label.mjs';
+export { SelectItemIndicator as ItemIndicator } from './select-item-indicator.mjs';
+export { SelectItemText as ItemText } from './select-item-text.mjs';
+export { SelectLabel as Label } from './select-label.mjs';
+export { SelectPositioner as Positioner } from './select-positioner.mjs';
+export { SelectRoot as Root } from './select-root.mjs';
+export { SelectTrigger as Trigger } from './select-trigger.mjs';
+export { SelectValueText as ValueText } from './select-value-text.mjs';

package/select/use-select.cjs

@@ -7,9 +7,8 @@ const react$1 = require('@zag-js/react');
 const select = require('@zag-js/select');
 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');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/select/use-select.mjs

@@ -3,9 +3,8 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
 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';
+import { useEvent } from '../use-event.mjs';
 
 const useSelect = (props) => {
   const [collectionOptions, rest] = createSplitProps()(props, [

package/slider/index.cjs

@@ -1,30 +1,20 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider = require('./slider.cjs');
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
 const sliderRange = require('./slider-range.cjs');
+const sliderRoot = require('./slider-root.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
 const sliderValueText = require('./slider-value-text.cjs');
+const slider = require('./slider.cjs');
+
 
-const Slider = Object.assign(slider.Slider, {
-  Root: slider.Slider,
-  Control: sliderControl.SliderControl,
-  Label: sliderLabel.SliderLabel,
-  Marker: sliderMarker.SliderMarker,
-  MarkerGroup: sliderMarkerGroup.SliderMarkerGroup,
-  Range: sliderRange.SliderRange,
-  Thumb: sliderThumb.SliderThumb,
-  Track: sliderTrack.SliderTrack,
-  ValueText: sliderValueText.SliderValueText
-});
 
 exports.useSliderContext = sliderContext.useSliderContext;
 exports.SliderControl = sliderControl.SliderControl;
@@ -32,7 +22,8 @@ exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
 exports.SliderRange = sliderRange.SliderRange;
+exports.SliderRoot = sliderRoot.SliderRoot;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
 exports.SliderValueText = sliderValueText.SliderValueText;
-exports.Slider = Slider;
+exports.Slider = slider;

package/slider/index.d.ts

@@ -1,26 +1,14 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails } from '@zag-js/slider';
-import { type SliderProps } from './slider';
 import { useSliderContext, type SliderContext } from './slider-context';
 import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
 import { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
 import { SliderRange, type SliderRangeProps } from './slider-range';
+import { SliderRoot, type SliderRootProps } from './slider-root';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
 import { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;
-    Marker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;
-    MarkerGroup: ForwardRefExoticComponent<SliderMarkerGroupProps & RefAttributes<HTMLDivElement>>;
-    Range: ForwardRefExoticComponent<SliderRangeProps & RefAttributes<HTMLDivElement>>;
-    Thumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;
-    Track: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;
-    ValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;
-};
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
-export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };
+export * as Slider from './slider';
+export { SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderRangeProps, SliderRootProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };

package/slider/index.mjs

@@ -1,25 +1,12 @@
-'use client';
-import { Slider as Slider$1 } from './slider.mjs';
 export { useSliderContext } from './slider-context.mjs';
-import { SliderControl } from './slider-control.mjs';
-import { SliderLabel } from './slider-label.mjs';
-import { SliderMarker } from './slider-marker.mjs';
-import { SliderMarkerGroup } from './slider-marker-group.mjs';
-import { SliderRange } from './slider-range.mjs';
-import { SliderThumb } from './slider-thumb.mjs';
-import { SliderTrack } from './slider-track.mjs';
-import { SliderValueText } from './slider-value-text.mjs';
-
-const Slider = Object.assign(Slider$1, {
-  Root: Slider$1,
-  Control: SliderControl,
-  Label: SliderLabel,
-  Marker: SliderMarker,
-  MarkerGroup: SliderMarkerGroup,
-  Range: SliderRange,
-  Thumb: SliderThumb,
-  Track: SliderTrack,
-  ValueText: SliderValueText
-});
-
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText };
+export { SliderControl } from './slider-control.mjs';
+export { SliderLabel } from './slider-label.mjs';
+export { SliderMarker } from './slider-marker.mjs';
+export { SliderMarkerGroup } from './slider-marker-group.mjs';
+export { SliderRange } from './slider-range.mjs';
+export { SliderRoot } from './slider-root.mjs';
+export { SliderThumb } from './slider-thumb.mjs';
+export { SliderTrack } from './slider-track.mjs';
+export { SliderValueText } from './slider-value-text.mjs';
+import * as slider from './slider.mjs';
+export { slider as Slider };

package/slider/slider-root.cjs

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const sliderContext = require('./slider-context.cjs');
+const useSlider = require('./use-slider.cjs');
+
+const SliderRoot = react.forwardRef((props, ref) => {
+  const [useSliderProps, { children, ...divProps }] = createSplitProps.createSplitProps()(props, [
+    "aria-label",
+    "aria-labelledby",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getAriaValueText",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "minStepsBetweenThumbs",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueChangeEnd",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "thumbAlignment",
+    "thumbSize",
+    "value"
+  ]);
+  const api = useSlider.useSlider(useSliderProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+SliderRoot.displayName = "SliderRoot";
+
+exports.SliderRoot = SliderRoot;

package/slider/slider-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseSliderProps, type UseSliderReturn } from './use-slider';
+export interface SliderRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSliderReturn) => ReactNode);
+}>, UseSliderProps> {
+}
+export declare const SliderRoot: ForwardRefExoticComponent<SliderRootProps & RefAttributes<HTMLDivElement>>;

package/slider/slider-root.mjs

@@ -0,0 +1,47 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { SliderProvider } from './slider-context.mjs';
+import { useSlider } from './use-slider.mjs';
+
+const SliderRoot = forwardRef((props, ref) => {
+  const [useSliderProps, { children, ...divProps }] = createSplitProps()(props, [
+    "aria-label",
+    "aria-labelledby",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getAriaValueText",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "minStepsBetweenThumbs",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueChangeEnd",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "thumbAlignment",
+    "thumbSize",
+    "value"
+  ]);
+  const api = useSlider(useSliderProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(SliderProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+SliderRoot.displayName = "SliderRoot";
+
+export { SliderRoot };

package/slider/slider.cjs

@@ -1,51 +1,25 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const sliderContext = require('./slider-context.cjs');
-const useSlider = require('./use-slider.cjs');
+const sliderControl = require('./slider-control.cjs');
+const sliderLabel = require('./slider-label.cjs');
+const sliderMarker = require('./slider-marker.cjs');
+const sliderMarkerGroup = require('./slider-marker-group.cjs');
+const sliderRange = require('./slider-range.cjs');
+const sliderRoot = require('./slider-root.cjs');
+const sliderThumb = require('./slider-thumb.cjs');
+const sliderTrack = require('./slider-track.cjs');
+const sliderValueText = require('./slider-value-text.cjs');
 
-const Slider = react.forwardRef((props, ref) => {
-  const [useSliderProps, { children, ...divProps }] = createSplitProps.createSplitProps()(props, [
-    "aria-label",
-    "aria-labelledby",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getAriaValueText",
-    "getRootNode",
-    "id",
-    "ids",
-    "invalid",
-    "max",
-    "min",
-    "minStepsBetweenThumbs",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueChangeEnd",
-    "orientation",
-    "origin",
-    "readOnly",
-    "step",
-    "thumbAlignment",
-    "thumbAlignment",
-    "thumbSize",
-    "value"
-  ]);
-  const api = useSlider.useSlider(useSliderProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
-});
-Slider.displayName = "Slider";
 
-exports.Slider = Slider;
+
+exports.Control = sliderControl.SliderControl;
+exports.Label = sliderLabel.SliderLabel;
+exports.Marker = sliderMarker.SliderMarker;
+exports.MarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
+exports.Range = sliderRange.SliderRange;
+exports.Root = sliderRoot.SliderRoot;
+exports.Thumb = sliderThumb.SliderThumb;
+exports.Track = sliderTrack.SliderTrack;
+exports.ValueText = sliderValueText.SliderValueText;

package/slider/slider.d.ts

@@ -1,9 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseSliderProps, type UseSliderReturn } from './use-slider';
-export interface SliderProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseSliderReturn) => ReactNode);
-}>, UseSliderProps> {
-}
-export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
+import { SliderControl as Control } from './slider-control';
+import { SliderLabel as Label } from './slider-label';
+import { SliderMarker as Marker } from './slider-marker';
+import { SliderMarkerGroup as MarkerGroup } from './slider-marker-group';
+import { SliderRange as Range } from './slider-range';
+import { SliderRoot as Root } from './slider-root';
+import { SliderThumb as Thumb } from './slider-thumb';
+import { SliderTrack as Track } from './slider-track';
+import { SliderValueText as ValueText } from './slider-value-text';
+export { Control, Label, Marker, MarkerGroup, Range, Root, Thumb, Track, ValueText };

package/slider/slider.mjs

@@ -1,47 +1,9 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { SliderProvider } from './slider-context.mjs';
-import { useSlider } from './use-slider.mjs';
-
-const Slider = forwardRef((props, ref) => {
-  const [useSliderProps, { children, ...divProps }] = createSplitProps()(props, [
-    "aria-label",
-    "aria-labelledby",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getAriaValueText",
-    "getRootNode",
-    "id",
-    "ids",
-    "invalid",
-    "max",
-    "min",
-    "minStepsBetweenThumbs",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueChangeEnd",
-    "orientation",
-    "origin",
-    "readOnly",
-    "step",
-    "thumbAlignment",
-    "thumbAlignment",
-    "thumbSize",
-    "value"
-  ]);
-  const api = useSlider(useSliderProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(SliderProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
-});
-Slider.displayName = "Slider";
-
-export { Slider };
+export { SliderControl as Control } from './slider-control.mjs';
+export { SliderLabel as Label } from './slider-label.mjs';
+export { SliderMarker as Marker } from './slider-marker.mjs';
+export { SliderMarkerGroup as MarkerGroup } from './slider-marker-group.mjs';
+export { SliderRange as Range } from './slider-range.mjs';
+export { SliderRoot as Root } from './slider-root.mjs';
+export { SliderThumb as Thumb } from './slider-thumb.mjs';
+export { SliderTrack as Track } from './slider-track.mjs';
+export { SliderValueText as ValueText } from './slider-value-text.mjs';

package/slider/use-slider.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const Slider = require('@zag-js/slider');
 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/slider/use-slider.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as Slider from '@zag-js/slider';
 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 useSlider = (props) => {
   const initialContext = {

package/splitter/index.cjs

@@ -1,20 +1,17 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const splitter = require('./splitter.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const splitterPanel = require('./splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
+const splitterRoot = require('./splitter-root.cjs');
+const splitter = require('./splitter.cjs');
+
 
-const Splitter = Object.assign(splitter.Splitter, {
-  Root: splitter.Splitter,
-  Panel: splitterPanel.SplitterPanel,
-  ResizeTrigger: splitterResizeTrigger.SplitterResizeTrigger
-});
 
 exports.useSplitterContext = splitterContext.useSplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
-exports.Splitter = Splitter;
+exports.SplitterRoot = splitterRoot.SplitterRoot;
+exports.Splitter = splitter;

package/splitter/index.d.ts

@@ -1,14 +1,8 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
-import { type SplitterProps } from './splitter';
 import { useSplitterContext, type SplitterContext } from './splitter-context';
 import { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
 import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
-declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;
-    Panel: ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;
-    ResizeTrigger: ForwardRefExoticComponent<SplitterResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
-};
-export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
-export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps, SplitterSizeChangeDetails, };
+import { SplitterRoot, type SplitterRootProps } from './splitter-root';
+export * as Splitter from './splitter';
+export { SplitterPanel, SplitterResizeTrigger, SplitterRoot, useSplitterContext };
+export type { SplitterContext, SplitterPanelProps, SplitterResizeTriggerProps, SplitterRootProps, SplitterSizeChangeDetails, };

package/splitter/index.mjs

@@ -1,13 +1,6 @@
-'use client';
-import { Splitter as Splitter$1 } from './splitter.mjs';
 export { useSplitterContext } from './splitter-context.mjs';
-import { SplitterPanel } from './splitter-panel.mjs';
-import { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
-
-const Splitter = Object.assign(Splitter$1, {
-  Root: Splitter$1,
-  Panel: SplitterPanel,
-  ResizeTrigger: SplitterResizeTrigger
-});
-
-export { Splitter, SplitterPanel, SplitterResizeTrigger };
+export { SplitterPanel } from './splitter-panel.mjs';
+export { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
+export { SplitterRoot } from './splitter-root.mjs';
+import * as splitter from './splitter.mjs';
+export { splitter as Splitter };

package/splitter/splitter-root.cjs

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const splitterContext = require('./splitter-context.cjs');
+const useSplitter = require('./use-splitter.cjs');
+
+const SplitterRoot = react.forwardRef((props, ref) => {
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onSizeChange",
+      "onSizeChangeEnd",
+      "onSizeChangeStart",
+      "orientation",
+      "size"
+    ]
+  );
+  const api = useSplitter.useSplitter(useSplitterProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+SplitterRoot.displayName = "SplitterRoot";
+
+exports.SplitterRoot = SplitterRoot;

package/splitter/splitter-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
+export interface SplitterRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSplitterReturn) => ReactNode);
+}>, UseSplitterProps> {
+}
+export declare const SplitterRoot: ForwardRefExoticComponent<SplitterRootProps & RefAttributes<HTMLDivElement>>;