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

package/slider/slider-marker.cjs

@@ -11,8 +11,8 @@ const sliderContext = require('./slider-context.cjs');
 
 const SliderMarker = react.forwardRef((props, ref) => {
   const { value, ...spanProps } = props;
-  const { getMarkerProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(getMarkerProps({ value }), spanProps);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.getMarkerProps({ value }), spanProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 SliderMarker.displayName = "SliderMarker";

package/slider/slider-marker.d.ts

@@ -1,10 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { MarkerProps } from '@zag-js/slider';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, {
-    value: number;
-}>;
-export declare const SliderMarker: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "value"> & {
-    value: number;
-} & RefAttributes<HTMLSpanElement>>;
+export interface SliderMarkerProps extends Assign<HTMLArkProps<'span'>, MarkerProps> {
+}
+export declare const SliderMarker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;

package/slider/slider-marker.mjs

@@ -7,8 +7,8 @@ import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarker = forwardRef((props, ref) => {
   const { value, ...spanProps } = props;
-  const { getMarkerProps } = useSliderContext();
-  const mergedProps = mergeProps(getMarkerProps({ value }), spanProps);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.getMarkerProps({ value }), spanProps);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 SliderMarker.displayName = "SliderMarker";

package/slider/slider-output.cjs

@@ -11,11 +11,11 @@ const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderOutput = react.forwardRef((props, ref) => {
-  const { children, ...restProps } = props;
-  const slider = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(slider.outputProps, restProps);
-  const view = runIfFn.runIfFn(children, slider);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view ?? slider.value });
+  const { children, ...rest } = props;
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.outputProps, rest);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
 });
 SliderOutput.displayName = "SliderOutput";
 

package/slider/slider-output.d.ts

@@ -1,11 +1,9 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-/// <reference types="react" />
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type SliderContext } from './slider-context';
-export type SliderOutputProps = Assign<HTMLArkProps<'output'>, {
-    children?: ((context: SliderContext) => React.ReactNode) | React.ReactNode;
-}>;
-export declare const SliderOutput: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
-    children?: ReactNode | ((context: SliderContext) => React.ReactNode);
-} & RefAttributes<HTMLOutputElement>>;
+import { type Assign } from '../types';
+import { type UseSliderReturn } from './use-slider';
+export interface SliderOutputProps extends Assign<HTMLArkProps<'output'>, {
+    children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
+}> {
+}
+export declare const SliderOutput: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;

package/slider/slider-output.mjs

@@ -7,11 +7,11 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderOutput = forwardRef((props, ref) => {
-  const { children, ...restProps } = props;
-  const slider = useSliderContext();
-  const mergedProps = mergeProps(slider.outputProps, restProps);
-  const view = runIfFn(children, slider);
-  return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view ?? slider.value });
+  const { children, ...rest } = props;
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.outputProps, rest);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view });
 });
 SliderOutput.displayName = "SliderOutput";
 

package/slider/slider-range.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderRange = react.forwardRef((props, ref) => {
-  const { rangeProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(rangeProps, props);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.rangeProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SliderRange.displayName = "SliderRange";

package/slider/slider-range.d.ts

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

package/slider/slider-range.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderRange = forwardRef((props, ref) => {
-  const { rangeProps } = useSliderContext();
-  const mergedProps = mergeProps(rangeProps, props);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.rangeProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SliderRange.displayName = "SliderRange";

package/slider/slider-thumb.cjs

@@ -6,13 +6,18 @@ 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 sliderContext = require('./slider-context.cjs');
 
 const SliderThumb = react.forwardRef((props, ref) => {
+  const [thumbProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
   const api = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(api.thumbProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  const mergedProps = react$1.mergeProps(api.getThumbProps(thumbProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getHiddenInputProps(thumbProps) })
+  ] });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/slider/slider-thumb.d.ts

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

package/slider/slider-thumb.mjs

@@ -1,14 +1,19 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, 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 { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = forwardRef((props, ref) => {
+  const [thumbProps, localProps] = createSplitProps()(props, ["index"]);
   const api = useSliderContext();
-  const mergedProps = mergeProps(api.thumbProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  const mergedProps = mergeProps(api.getThumbProps(thumbProps), localProps);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.getHiddenInputProps(thumbProps) })
+  ] });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/slider/slider-track.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderTrack = react.forwardRef((props, ref) => {
-  const { trackProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(trackProps, props);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.trackProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SliderTrack.displayName = "SliderTrack";

package/slider/slider-track.d.ts

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

package/slider/slider-track.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderTrack = forwardRef((props, ref) => {
-  const { trackProps } = useSliderContext();
-  const mergedProps = mergeProps(trackProps, props);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.trackProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SliderTrack.displayName = "SliderTrack";

package/slider/slider.cjs

@@ -13,14 +13,12 @@ const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
 const Slider = react.forwardRef((props, ref) => {
-  const { children, ...restProps } = props;
-  const [useSliderProps, divProps] = createSplitProps.createSplitProps()(restProps, [
+  const [useSliderProps, { children, ...divProps }] = createSplitProps.createSplitProps()(props, [
     "aria-label",
     "aria-labelledby",
     "defaultValue",
     "dir",
     "disabled",
-    "focusThumbOnChange",
     "form",
     "getAriaValueText",
     "getRootNode",
@@ -29,10 +27,11 @@ const Slider = react.forwardRef((props, ref) => {
     "invalid",
     "max",
     "min",
+    "minStepsBetweenThumbs",
     "name",
-    "onChange",
-    "onChangeEnd",
-    "onChangeStart",
+    "onFocusChange",
+    "onValueChange",
+    "onValueChangeEnd",
     "orientation",
     "origin",
     "readOnly",
@@ -45,10 +44,7 @@ const Slider = react.forwardRef((props, ref) => {
   const api = useSlider.useSlider(useSliderProps);
   const mergedProps = react$1.mergeProps(api.rootProps, divProps);
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsxs(sliderContext.SliderProvider, { value: api, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
 Slider.displayName = "Slider";
 

package/slider/slider.d.ts

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

package/slider/slider.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -9,14 +9,12 @@ import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
 
 const Slider = forwardRef((props, ref) => {
-  const { children, ...restProps } = props;
-  const [useSliderProps, divProps] = createSplitProps()(restProps, [
+  const [useSliderProps, { children, ...divProps }] = createSplitProps()(props, [
     "aria-label",
     "aria-labelledby",
     "defaultValue",
     "dir",
     "disabled",
-    "focusThumbOnChange",
     "form",
     "getAriaValueText",
     "getRootNode",
@@ -25,10 +23,11 @@ const Slider = forwardRef((props, ref) => {
     "invalid",
     "max",
     "min",
+    "minStepsBetweenThumbs",
     "name",
-    "onChange",
-    "onChangeEnd",
-    "onChangeStart",
+    "onFocusChange",
+    "onValueChange",
+    "onValueChangeEnd",
     "orientation",
     "origin",
     "readOnly",
@@ -41,10 +40,7 @@ const Slider = forwardRef((props, ref) => {
   const api = useSlider(useSliderProps);
   const mergedProps = mergeProps(api.rootProps, divProps);
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsxs(SliderProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsx(SliderProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
 Slider.displayName = "Slider";
 

package/slider/slider.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Slider } from './';
+import { Slider } from '.';
 type SliderType = typeof Slider;
 declare const meta: Meta<SliderType>;
 export default meta;

package/slider/use-slider.cjs

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react$1 = require('@zag-js/react');
-const slider = require('@zag-js/slider');
+const Slider = require('@zag-js/slider');
 const react = require('react');
 require('../environment/index.cjs');
 const useEvent = require('../use-event.cjs');
@@ -27,23 +27,26 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
+const Slider__namespace = /*#__PURE__*/_interopNamespaceDefault(Slider);
 
 const useSlider = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ?? props.value
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: useEvent.useEvent(props.onChange, { sync: true })
+    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 [state, send] = react$1.useMachine(Slider__namespace.machine(initialContext), {
+    context
+  });
+  return Slider__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useSlider = useSlider;

package/slider/use-slider.d.ts

@@ -1,7 +1,12 @@
-import * as slider from '@zag-js/slider';
+import { type PropTypes } from '@zag-js/react';
+import * as Slider from '@zag-js/slider';
 import { type Optional } from '../types';
-export interface UseSliderProps extends Optional<slider.Context, 'id'> {
-    defaultValue?: slider.Context['value'];
+export interface UseSliderProps extends Optional<Slider.Context, 'id'> {
+    /**
+     * The initial value of the slider slider.
+     */
+    defaultValue?: Slider.Context['value'];
+}
+export interface UseSliderReturn extends Slider.Api<PropTypes> {
 }
-export type UseSliderReturn = slider.Api;
 export declare const useSlider: (props: UseSliderProps) => UseSliderReturn;

package/slider/use-slider.mjs

@@ -1,26 +1,29 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import * as slider from '@zag-js/slider';
+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';
 
 const useSlider = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ?? props.value
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: useEvent(props.onChange, { sync: true })
+    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 [state, send] = useMachine(Slider.machine(initialContext), {
+    context
+  });
+  return Slider.connect(state, send, normalizeProps);
 };
 
 export { useSlider };

package/splitter/index.cjs

@@ -3,14 +3,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const splitter$1 = require('./splitter.cjs');
+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 splitter = require('@zag-js/splitter');
 
-const Splitter = Object.assign(splitter$1.Splitter, {
-  Root: splitter$1.Splitter,
+const Splitter = Object.assign(splitter.Splitter, {
+  Root: splitter.Splitter,
   Panel: splitterPanel.SplitterPanel,
   ResizeTrigger: splitterResizeTrigger.SplitterResizeTrigger
 });
@@ -18,8 +17,4 @@ const Splitter = Object.assign(splitter$1.Splitter, {
 exports.useSplitterContext = splitterContext.useSplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
-Object.defineProperty(exports, 'splitterAnatomy', {
-  enumerable: true,
-  get: () => splitter.anatomy
-});
 exports.Splitter = Splitter;

package/splitter/index.d.ts

@@ -1,21 +1,13 @@
-import { PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
-import { UseSplitterProps, UseSplitterReturn } from './use-splitter';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 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';
-import { splitterAnatomy } from './splitter.anatomy';
-declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
-    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
-        children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    Panel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
-    ResizeTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
+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, splitterAnatomy, useSplitterContext };
+export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
 export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };

package/splitter/index.mjs

@@ -3,7 +3,6 @@ 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';
-export { anatomy as splitterAnatomy } from '@zag-js/splitter';
 
 const Splitter = Object.assign(Splitter$1, {
   Root: Splitter$1,

package/splitter/splitter-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseSplitterReturn } from './use-splitter';
-export type SplitterContext = UseSplitterReturn;
-export declare const SplitterProvider: Provider<UseSplitterReturn>, useSplitterContext: () => UseSplitterReturn;
+export interface SplitterContext extends UseSplitterReturn {
+}
+export declare const SplitterProvider: Provider<SplitterContext>, useSplitterContext: () => SplitterContext;

package/splitter/splitter-panel.cjs

@@ -13,8 +13,8 @@ const splitterContext = require('./splitter-context.cjs');
 
 const SplitterPanel = react.forwardRef((props, ref) => {
   const [splitterPanelProps, divProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
-  const { getPanelProps } = splitterContext.useSplitterContext();
-  const mergedProps = react$1.mergeProps(getPanelProps(splitterPanelProps), divProps);
+  const api = splitterContext.useSplitterContext();
+  const mergedProps = react$1.mergeProps(api.getPanelProps(splitterPanelProps), divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SplitterPanel.displayName = "SplitterPanel";

package/splitter/splitter-panel.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type PanelProps } from '@zag-js/splitter';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelProps>;
-export declare const SplitterPanel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
+export interface SplitterPanelProps extends Assign<HTMLArkProps<'div'>, PanelProps> {
+}
+export declare const SplitterPanel: ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;

package/splitter/splitter-panel.mjs

@@ -9,8 +9,8 @@ import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterPanel = forwardRef((props, ref) => {
   const [splitterPanelProps, divProps] = createSplitProps()(props, ["id", "snapSize"]);
-  const { getPanelProps } = useSplitterContext();
-  const mergedProps = mergeProps(getPanelProps(splitterPanelProps), divProps);
+  const api = useSplitterContext();
+  const mergedProps = mergeProps(api.getPanelProps(splitterPanelProps), divProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SplitterPanel.displayName = "SplitterPanel";

package/splitter/splitter-resize-trigger.cjs

@@ -18,8 +18,8 @@ const SplitterResizeTrigger = react.forwardRef(
       "id",
       "step"
     ]);
-    const { getResizeTriggerProps } = splitterContext.useSplitterContext();
-    const mergedProps = react$1.mergeProps(getResizeTriggerProps(triggerProps), restProps);
+    const api = splitterContext.useSplitterContext();
+    const mergedProps = react$1.mergeProps(api.getResizeTriggerProps(triggerProps), restProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
   }
 );

package/splitter/splitter-resize-trigger.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type ResizeTriggerProps } from '@zag-js/splitter';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SplitterResizeTriggerProps = Assign<HTMLArkProps<'button'>, ResizeTriggerProps>;
-export declare const SplitterResizeTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
+export interface SplitterResizeTriggerProps extends Assign<HTMLArkProps<'button'>, ResizeTriggerProps> {
+}
+export declare const SplitterResizeTrigger: ForwardRefExoticComponent<SplitterResizeTriggerProps & RefAttributes<HTMLButtonElement>>;

package/splitter/splitter-resize-trigger.mjs

@@ -14,8 +14,8 @@ const SplitterResizeTrigger = forwardRef(
       "id",
       "step"
     ]);
-    const { getResizeTriggerProps } = useSplitterContext();
-    const mergedProps = mergeProps(getResizeTriggerProps(triggerProps), restProps);
+    const api = useSplitterContext();
+    const mergedProps = mergeProps(api.getResizeTriggerProps(triggerProps), restProps);
     return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
   }
 );