@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/signature-pad/use-signature-pad.js

@@ -4,15 +4,15 @@ import * as signaturePad from '@zag-js/signature-pad';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 import { useFieldContext } from '../field/use-field-context.js';
 
-const useSignaturePad = (props = {}) => {
+const useSignaturePad = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -24,14 +24,8 @@ const useSignaturePad = (props = {}) => {
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    drawing: props.drawing,
-    onDraw: useEvent(props.onDraw),
-    onDrawEnd: useEvent(props.onDrawEnd)
-  };
-  const [state, send] = useMachine(signaturePad.machine(initialContext), { context });
-  return signaturePad.connect(state, send, normalizeProps);
+  const service = useMachine(signaturePad.machine, machineProps);
+  return signaturePad.connect(service, normalizeProps);
 };
 
 export { useSignaturePad };

package/dist/components/slider/index.d.cts

@@ -1,17 +1,17 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps } from './slider-context';
-export { SliderControl, type SliderControlBaseProps, type SliderControlProps, } from './slider-control';
+export { SliderControl, type SliderControlBaseProps, type SliderControlProps } from './slider-control';
 export { SliderDraggingIndicator, type SliderDraggingIndicatorBaseProps, type SliderDraggingIndicatorProps, } from './slider-dragging-indicator';
-export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps, } from './slider-hidden-input';
+export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelBaseProps, type SliderLabelProps } from './slider-label';
 export { SliderMarker, type SliderMarkerBaseProps, type SliderMarkerProps } from './slider-marker';
-export { SliderMarkerGroup, type SliderMarkerGroupBaseProps, type SliderMarkerGroupProps, } from './slider-marker-group';
+export { SliderMarkerGroup, type SliderMarkerGroupBaseProps, type SliderMarkerGroupProps } from './slider-marker-group';
 export { SliderRange, type SliderRangeBaseProps, type SliderRangeProps } from './slider-range';
 export { SliderRoot, type SliderRootBaseProps, type SliderRootProps } from './slider-root';
 export { SliderRootProvider, type SliderRootProviderBaseProps, type SliderRootProviderProps, } from './slider-root-provider';
 export { SliderThumb, type SliderThumbBaseProps, type SliderThumbProps } from './slider-thumb';
 export { SliderTrack, type SliderTrackBaseProps, type SliderTrackProps } from './slider-track';
-export { SliderValueText, type SliderValueTextBaseProps, type SliderValueTextProps, } from './slider-value-text';
+export { SliderValueText, type SliderValueTextBaseProps, type SliderValueTextProps } from './slider-value-text';
 export { sliderAnatomy } from './slider.anatomy';
 export { useSlider, type UseSliderProps, type UseSliderReturn } from './use-slider';
 export { useSliderContext, type UseSliderContext } from './use-slider-context';

package/dist/components/slider/index.d.ts

@@ -1,17 +1,17 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps } from './slider-context';
-export { SliderControl, type SliderControlBaseProps, type SliderControlProps, } from './slider-control';
+export { SliderControl, type SliderControlBaseProps, type SliderControlProps } from './slider-control';
 export { SliderDraggingIndicator, type SliderDraggingIndicatorBaseProps, type SliderDraggingIndicatorProps, } from './slider-dragging-indicator';
-export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps, } from './slider-hidden-input';
+export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelBaseProps, type SliderLabelProps } from './slider-label';
 export { SliderMarker, type SliderMarkerBaseProps, type SliderMarkerProps } from './slider-marker';
-export { SliderMarkerGroup, type SliderMarkerGroupBaseProps, type SliderMarkerGroupProps, } from './slider-marker-group';
+export { SliderMarkerGroup, type SliderMarkerGroupBaseProps, type SliderMarkerGroupProps } from './slider-marker-group';
 export { SliderRange, type SliderRangeBaseProps, type SliderRangeProps } from './slider-range';
 export { SliderRoot, type SliderRootBaseProps, type SliderRootProps } from './slider-root';
 export { SliderRootProvider, type SliderRootProviderBaseProps, type SliderRootProviderProps, } from './slider-root-provider';
 export { SliderThumb, type SliderThumbBaseProps, type SliderThumbProps } from './slider-thumb';
 export { SliderTrack, type SliderTrackBaseProps, type SliderTrackProps } from './slider-track';
-export { SliderValueText, type SliderValueTextBaseProps, type SliderValueTextProps, } from './slider-value-text';
+export { SliderValueText, type SliderValueTextBaseProps, type SliderValueTextProps } from './slider-value-text';
 export { sliderAnatomy } from './slider.anatomy';
 export { useSlider, type UseSliderProps, type UseSliderReturn } from './use-slider';
 export { useSliderContext, type UseSliderContext } from './use-slider-context';

package/dist/components/slider/slider-dragging-indicator.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
 const useSliderThumbPropsContext = require('./use-slider-thumb-props-context.cjs');
 
-const SliderDraggingIndicator = react.forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext.useSliderContext();
-    const { index } = useSliderThumbPropsContext.useSliderThumbPropsContext();
-    const mergedProps = react$1.mergeProps(slider.getDraggingIndicatorProps({ index }), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
-  }
-);
+const SliderDraggingIndicator = react.forwardRef((props, ref) => {
+  const slider = useSliderContext.useSliderContext();
+  const { index } = useSliderThumbPropsContext.useSliderThumbPropsContext();
+  const mergedProps = react$1.mergeProps(slider.getDraggingIndicatorProps({ index }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
+});
 SliderDraggingIndicator.displayName = "SliderDraggingIndicator";
 
 exports.SliderDraggingIndicator = SliderDraggingIndicator;

package/dist/components/slider/slider-dragging-indicator.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useSliderContext } from './use-slider-context.js';
 import { useSliderThumbPropsContext } from './use-slider-thumb-props-context.js';
 
-const SliderDraggingIndicator = forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext();
-    const { index } = useSliderThumbPropsContext();
-    const mergedProps = mergeProps(slider.getDraggingIndicatorProps({ index }), props);
-    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
-  }
-);
+const SliderDraggingIndicator = forwardRef((props, ref) => {
+  const slider = useSliderContext();
+  const { index } = useSliderThumbPropsContext();
+  const mergedProps = mergeProps(slider.getDraggingIndicatorProps({ index }), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
+});
 SliderDraggingIndicator.displayName = "SliderDraggingIndicator";
 
 export { SliderDraggingIndicator };

package/dist/components/slider/slider-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
 const useSliderThumbPropsContext = require('./use-slider-thumb-props-context.cjs');
 
-const SliderHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext.useSliderContext();
-    const thumbProps = useSliderThumbPropsContext.useSliderThumbPropsContext();
-    const mergedProps = react$1.mergeProps(slider.getHiddenInputProps(thumbProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
-  }
-);
+const SliderHiddenInput = react.forwardRef((props, ref) => {
+  const slider = useSliderContext.useSliderContext();
+  const thumbProps = useSliderThumbPropsContext.useSliderThumbPropsContext();
+  const mergedProps = react$1.mergeProps(slider.getHiddenInputProps(thumbProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
 SliderHiddenInput.displayName = "SliderHiddenInput";
 
 exports.SliderHiddenInput = SliderHiddenInput;

package/dist/components/slider/slider-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useSliderContext } from './use-slider-context.js';
 import { useSliderThumbPropsContext } from './use-slider-thumb-props-context.js';
 
-const SliderHiddenInput = forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext();
-    const thumbProps = useSliderThumbPropsContext();
-    const mergedProps = mergeProps(slider.getHiddenInputProps(thumbProps), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
-  }
-);
+const SliderHiddenInput = forwardRef((props, ref) => {
+  const slider = useSliderContext();
+  const thumbProps = useSliderThumbPropsContext();
+  const mergedProps = mergeProps(slider.getHiddenInputProps(thumbProps), props);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
 SliderHiddenInput.displayName = "SliderHiddenInput";
 
 export { SliderHiddenInput };

package/dist/components/slider/slider-marker-group.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
 
-const SliderMarkerGroup = react.forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext.useSliderContext();
-    const mergedProps = react$1.mergeProps(slider.getMarkerGroupProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SliderMarkerGroup = react.forwardRef((props, ref) => {
+  const slider = useSliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(slider.getMarkerGroupProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SliderMarkerGroup.displayName = "SliderMarkerGroup";
 
 exports.SliderMarkerGroup = SliderMarkerGroup;

package/dist/components/slider/slider-marker-group.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSliderContext } from './use-slider-context.js';
 
-const SliderMarkerGroup = forwardRef(
-  (props, ref) => {
-    const slider = useSliderContext();
-    const mergedProps = mergeProps(slider.getMarkerGroupProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SliderMarkerGroup = forwardRef((props, ref) => {
+  const slider = useSliderContext();
+  const mergedProps = mergeProps(slider.getMarkerGroupProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SliderMarkerGroup.displayName = "SliderMarkerGroup";
 
 export { SliderMarkerGroup };

package/dist/components/slider/slider-root-provider.cjs

@@ -10,13 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
 
-const SliderRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: slider }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
-    const mergedProps = react$1.mergeProps(slider.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useSliderContext.SliderProvider, { value: slider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SliderRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: slider }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(slider.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useSliderContext.SliderProvider, { value: slider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 SliderRootProvider.displayName = "SliderRootProvider";
 
 exports.SliderRootProvider = SliderRootProvider;

package/dist/components/slider/slider-root-provider.js

@@ -6,13 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { SliderProvider } from './use-slider-context.js';
 
-const SliderRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: slider }, localProps] = createSplitProps()(props, ["value"]);
-    const mergedProps = mergeProps(slider.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SliderRootProvider = forwardRef((props, ref) => {
+  const [{ value: slider }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(slider.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 SliderRootProvider.displayName = "SliderRootProvider";
 
 export { SliderRootProvider };

package/dist/components/slider/use-slider.cjs

@@ -8,7 +8,6 @@ const slider = require('@zag-js/slider');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,27 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
 
-const useSlider = (props = {}) => {
+const useSlider = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onValueChangeEnd: useEvent.useEvent(props.onValueChangeEnd),
-    onFocusChange: useEvent.useEvent(props.onFocusChange)
-  };
-  const [state, send] = react$1.useMachine(slider__namespace.machine(initialContext), {
-    context
-  });
-  return slider__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(slider__namespace.machine, machineProps);
+  return slider__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSlider = useSlider;

package/dist/components/slider/use-slider.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as slider from '@zag-js/slider';
-export interface UseSliderProps extends Optional<Omit<slider.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the slider when it is first rendered.
-     * Use when you do not need to control the state of the slider picker.
-     */
-    defaultValue?: slider.Context['value'];
+export interface UseSliderProps extends Optional<Omit<slider.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSliderReturn extends slider.Api<PropTypes> {
 }

package/dist/components/slider/use-slider.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as slider from '@zag-js/slider';
-export interface UseSliderProps extends Optional<Omit<slider.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the slider when it is first rendered.
-     * Use when you do not need to control the state of the slider picker.
-     */
-    defaultValue?: slider.Context['value'];
+export interface UseSliderProps extends Optional<Omit<slider.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSliderReturn extends slider.Api<PropTypes> {
 }

package/dist/components/slider/use-slider.js

@@ -4,29 +4,19 @@ import * as slider from '@zag-js/slider';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
-const useSlider = (props = {}) => {
+const useSlider = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true }),
-    onValueChangeEnd: useEvent(props.onValueChangeEnd),
-    onFocusChange: useEvent(props.onFocusChange)
-  };
-  const [state, send] = useMachine(slider.machine(initialContext), {
-    context
-  });
-  return slider.connect(state, send, normalizeProps);
+  const service = useMachine(slider.machine, machineProps);
+  return slider.connect(service, normalizeProps);
 };
 
 export { useSlider };

package/dist/components/splitter/index.d.cts

@@ -1,6 +1,6 @@
 export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
-export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps, } from './splitter-panel';
+export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';
 export { SplitterRoot, type SplitterRootBaseProps, type SplitterRootProps } from './splitter-root';
 export { SplitterRootProvider, type SplitterRootProviderBaseProps, type SplitterRootProviderProps, } from './splitter-root-provider';

package/dist/components/splitter/index.d.ts

@@ -1,6 +1,6 @@
 export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
 export { SplitterContext, type SplitterContextProps } from './splitter-context';
-export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps, } from './splitter-panel';
+export { SplitterPanel, type SplitterPanelBaseProps, type SplitterPanelProps } from './splitter-panel';
 export { SplitterResizeTrigger, type SplitterResizeTriggerBaseProps, type SplitterResizeTriggerProps, } from './splitter-resize-trigger';
 export { SplitterRoot, type SplitterRootBaseProps, type SplitterRootProps } from './splitter-root';
 export { SplitterRootProvider, type SplitterRootProviderBaseProps, type SplitterRootProviderProps, } from './splitter-root-provider';

package/dist/components/splitter/splitter-resize-trigger.cjs

@@ -10,18 +10,12 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
-const SplitterResizeTrigger = react.forwardRef(
-  (props, ref) => {
-    const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, [
-      "disabled",
-      "id",
-      "step"
-    ]);
-    const splitter = useSplitterContext.useSplitterContext();
-    const mergedProps = react$1.mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
-  }
-);
+const SplitterResizeTrigger = react.forwardRef((props, ref) => {
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["disabled", "id", "step"]);
+  const splitter = useSplitterContext.useSplitterContext();
+  const mergedProps = react$1.mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
+});
 SplitterResizeTrigger.displayName = "SplitterResizeTrigger";
 
 exports.SplitterResizeTrigger = SplitterResizeTrigger;

package/dist/components/splitter/splitter-resize-trigger.js

@@ -6,18 +6,12 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useSplitterContext } from './use-splitter-context.js';
 
-const SplitterResizeTrigger = forwardRef(
-  (props, ref) => {
-    const [triggerProps, localProps] = createSplitProps()(props, [
-      "disabled",
-      "id",
-      "step"
-    ]);
-    const splitter = useSplitterContext();
-    const mergedProps = mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
-    return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
-  }
-);
+const SplitterResizeTrigger = forwardRef((props, ref) => {
+  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "id", "step"]);
+  const splitter = useSplitterContext();
+  const mergedProps = mergeProps(splitter.getResizeTriggerProps(triggerProps), localProps);
+  return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
+});
 SplitterResizeTrigger.displayName = "SplitterResizeTrigger";
 
 export { SplitterResizeTrigger };

package/dist/components/splitter/splitter-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useSplitterContext = require('./use-splitter-context.cjs');
 
-const SplitterRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: splitter }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(splitter.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useSplitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SplitterRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: splitter }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(splitter.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useSplitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 SplitterRootProvider.displayName = "SplitterRootProvider";
 
 exports.SplitterRootProvider = SplitterRootProvider;

package/dist/components/splitter/splitter-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { SplitterProvider } from './use-splitter-context.js';
 
-const SplitterRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: splitter }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(splitter.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SplitterRootProvider = forwardRef((props, ref) => {
+  const [{ value: splitter }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(splitter.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 SplitterRootProvider.displayName = "SplitterRootProvider";
 
 export { SplitterRootProvider };

package/dist/components/splitter/splitter.d.cts

@@ -1,5 +1,5 @@
 export type { SizeChangeDetails } from '@zag-js/splitter';
-export { SplitterContext as Context, type SplitterContextProps as ContextProps, } from './splitter-context';
+export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';
 export { SplitterRoot as Root, type SplitterRootBaseProps as RootBaseProps, type SplitterRootProps as RootProps, } from './splitter-root';

package/dist/components/splitter/splitter.d.ts

@@ -1,5 +1,5 @@
 export type { SizeChangeDetails } from '@zag-js/splitter';
-export { SplitterContext as Context, type SplitterContextProps as ContextProps, } from './splitter-context';
+export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';
 export { SplitterRoot as Root, type SplitterRootBaseProps as RootBaseProps, type SplitterRootProps as RootProps, } from './splitter-root';

package/dist/components/splitter/use-splitter.cjs

@@ -8,7 +8,6 @@ const splitter = require('@zag-js/splitter');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,24 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
 
-const useSplitter = (props = {}) => {
+const useSplitter = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    size: props.defaultSize,
     ...props
   };
-  const context = {
-    ...initialContext,
-    size: props.size,
-    onSizeChange: useEvent.useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd)
-  };
-  const [state, send] = react$1.useMachine(splitter__namespace.machine(initialContext), { context });
-  return splitter__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(splitter__namespace.machine, machineProps);
+  return splitter__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSplitter = useSplitter;

package/dist/components/splitter/use-splitter.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as splitter from '@zag-js/splitter';
-export interface UseSplitterProps extends Optional<Omit<splitter.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial size of the panels when it is first rendered.
-     * Use this when you do not need to control the state of the carousel.
-     */
-    defaultSize?: splitter.Context['size'];
+export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }

package/dist/components/splitter/use-splitter.d.ts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as splitter from '@zag-js/splitter';
-export interface UseSplitterProps extends Optional<Omit<splitter.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial size of the panels when it is first rendered.
-     * Use this when you do not need to control the state of the carousel.
-     */
-    defaultSize?: splitter.Context['size'];
+export interface UseSplitterProps extends Optional<Omit<splitter.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSplitterReturn extends splitter.Api<PropTypes> {
 }

package/dist/components/splitter/use-splitter.js

@@ -4,26 +4,19 @@ import * as splitter from '@zag-js/splitter';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
-const useSplitter = (props = {}) => {
+const useSplitter = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    size: props.defaultSize,
     ...props
   };
-  const context = {
-    ...initialContext,
-    size: props.size,
-    onSizeChange: useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent(props.onSizeChangeEnd)
-  };
-  const [state, send] = useMachine(splitter.machine(initialContext), { context });
-  return splitter.connect(state, send, normalizeProps);
+  const service = useMachine(splitter.machine, machineProps);
+  return splitter.connect(service, normalizeProps);
 };
 
 export { useSplitter };