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

package/slider/slider-marker-group.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type SliderMarkerGroupProps = HTMLArkProps<'div'>;
-export declare const SliderMarkerGroup: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type SliderMarkerGroupProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const SliderMarkerGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/slider/slider-marker-group.mjs

@@ -1,14 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
-const SliderMarkerGroup = forwardRef((props, ref) => {
-  const { markerGroupProps } = useSliderContext();
-  const mergedProps = mergeProps(markerGroupProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const SliderMarkerGroup = forwardRef(
+  (props, ref) => {
+    const { markerGroupProps } = useSliderContext();
+    const mergedProps = mergeProps(markerGroupProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+SliderMarkerGroup.displayName = "SliderMarkerGroup";
 
 export { SliderMarkerGroup };

package/slider/slider-marker.cjs

@@ -4,16 +4,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderMarker = forwardRef.forwardRef((props, ref) => {
+const SliderMarker = react.forwardRef((props, ref) => {
   const { value, ...spanProps } = props;
   const { getMarkerProps } = sliderContext.useSliderContext();
-  const mergedProps = react.mergeProps(getMarkerProps({ value }), spanProps);
+  const mergedProps = react$1.mergeProps(getMarkerProps({ value }), spanProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
+SliderMarker.displayName = "SliderMarker";
 
 exports.SliderMarker = SliderMarker;

package/slider/slider-marker.d.ts

@@ -1,9 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, {
+export type SliderMarkerProps = Assign<ComponentPropsWithoutRef<typeof ark.span>, {
     value: number;
 }>;
-export declare const SliderMarker: ForwardRefExoticComponent<Assign<AsChildComponentProps<"span">, {
+export declare const SliderMarker: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "value"> & {
     value: number;
-}>>;
+} & RefAttributes<HTMLSpanElement>>;

package/slider/slider-marker.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarker = forwardRef((props, ref) => {
@@ -11,5 +11,6 @@ const SliderMarker = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getMarkerProps({ value }), spanProps);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
+SliderMarker.displayName = "SliderMarker";
 
 export { SliderMarker };

package/slider/slider-output.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderOutput = forwardRef.forwardRef((props, ref) => {
+const SliderOutput = react.forwardRef((props, ref) => {
   const { children, ...restProps } = props;
   const slider = sliderContext.useSliderContext();
-  const mergedProps = react.mergeProps(slider.outputProps, restProps);
+  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 });
 });
+SliderOutput.displayName = "SliderOutput";
 
 exports.SliderOutput = SliderOutput;

package/slider/slider-output.d.ts

@@ -1,8 +1,14 @@
-import type { AsChildComponentProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, OutputHTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
 import { type SliderContext } from './slider-context';
-export type SliderOutputProps = {
+export type SliderOutputProps = Assign<ComponentPropsWithoutRef<typeof ark.output>, {
     children?: ((context: SliderContext) => React.ReactNode) | React.ReactNode;
-};
-export declare const SliderOutput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"output">, SliderOutputProps>>;
+}>;
+export declare const SliderOutput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, "ref"> & {
+    ref?: ((instance: HTMLOutputElement | null) => void) | RefObject<HTMLOutputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children"> & {
+    children?: ReactNode | ((context: SliderContext) => React.ReactNode);
+} & RefAttributes<HTMLOutputElement>>;

package/slider/slider-output.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
@@ -13,5 +13,6 @@ const SliderOutput = forwardRef((props, ref) => {
   const view = runIfFn(children, slider);
   return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view ?? slider.value });
 });
+SliderOutput.displayName = "SliderOutput";
 
 export { SliderOutput };

package/slider/slider-range.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderRange = forwardRef.forwardRef((props, ref) => {
+const SliderRange = react.forwardRef((props, ref) => {
   const { rangeProps } = sliderContext.useSliderContext();
-  const mergedProps = react.mergeProps(rangeProps, props);
+  const mergedProps = react$1.mergeProps(rangeProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+SliderRange.displayName = "SliderRange";
 
 exports.SliderRange = SliderRange;

package/slider/slider-range.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type SliderRangeProps = HTMLArkProps<'div'>;
-export declare const SliderRange: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type SliderRangeProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const SliderRange: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/slider/slider-range.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderRange = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const SliderRange = forwardRef((props, ref) => {
   const mergedProps = mergeProps(rangeProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+SliderRange.displayName = "SliderRange";
 
 export { SliderRange };

package/slider/slider-thumb.cjs

@@ -4,18 +4,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderThumb = forwardRef.forwardRef((props, ref) => {
-  const { thumbProps, hiddenInputProps } = sliderContext.useSliderContext();
-  const mergedProps = react.mergeProps(thumbProps, props);
+const SliderThumb = react.forwardRef((props, ref) => {
+  const { thumbProps } = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(thumbProps, props);
   return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...hiddenInputProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(SliderHiddenInput, {}),
     props.children
   ] });
 });
+SliderThumb.displayName = "SliderThumb";
+const SliderHiddenInput = react.forwardRef(
+  (props, ref) => {
+    const { hiddenInputProps } = sliderContext.useSliderContext();
+    const mergedProps = react$1.mergeProps(hiddenInputProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  }
+);
+SliderHiddenInput.displayName = "SliderHiddenInput";
 
 exports.SliderThumb = SliderThumb;

package/slider/slider-thumb.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type SliderThumbProps = HTMLArkProps<'div'>;
-export declare const SliderThumb: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type SliderThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const SliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/slider/slider-thumb.mjs

@@ -1,17 +1,26 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = forwardRef((props, ref) => {
-  const { thumbProps, hiddenInputProps } = useSliderContext();
+  const { thumbProps } = useSliderContext();
   const mergedProps = mergeProps(thumbProps, props);
   return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx(ark.input, { ...hiddenInputProps }),
+    /* @__PURE__ */ jsx(SliderHiddenInput, {}),
     props.children
   ] });
 });
+SliderThumb.displayName = "SliderThumb";
+const SliderHiddenInput = forwardRef(
+  (props, ref) => {
+    const { hiddenInputProps } = useSliderContext();
+    const mergedProps = mergeProps(hiddenInputProps, props);
+    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  }
+);
+SliderHiddenInput.displayName = "SliderHiddenInput";
 
 export { SliderThumb };

package/slider/slider-track.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderTrack = forwardRef.forwardRef((props, ref) => {
+const SliderTrack = react.forwardRef((props, ref) => {
   const { trackProps } = sliderContext.useSliderContext();
-  const mergedProps = react.mergeProps(trackProps, props);
+  const mergedProps = react$1.mergeProps(trackProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+SliderTrack.displayName = "SliderTrack";
 
 exports.SliderTrack = SliderTrack;

package/slider/slider-track.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type SliderTrackProps = HTMLArkProps<'div'>;
-export declare const SliderTrack: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type SliderTrackProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const SliderTrack: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/slider/slider-track.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderTrack = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const SliderTrack = forwardRef((props, ref) => {
   const mergedProps = mergeProps(trackProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+SliderTrack.displayName = "SliderTrack";
 
 export { SliderTrack };

package/slider/slider.cjs

@@ -4,16 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
-const Slider = forwardRef.forwardRef((props, ref) => {
+const Slider = react.forwardRef((props, ref) => {
   const { children, ...restProps } = props;
   const [useSliderProps, divProps] = createSplitProps.createSplitProps()(restProps, [
     "aria-label",
@@ -42,9 +41,10 @@ const Slider = forwardRef.forwardRef((props, ref) => {
     "value"
   ]);
   const slider = useSlider.useSlider(useSliderProps);
-  const mergedProps = react.mergeProps(slider.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(slider.rootProps, divProps);
   const view = runIfFn.runIfFn(children, slider);
   return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: slider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+Slider.displayName = "Slider";
 
 exports.Slider = Slider;

package/slider/slider.d.ts

@@ -1,9 +1,15 @@
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } 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>, {
+export type SliderProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.div>, UseSliderProps>, {
     children?: ((context: SliderContext) => ReactNode) | ReactNode;
 }>;
-export declare const Slider: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, SliderProps>>;
+export declare const Slider: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, UseSliderProps>, "children"> & {
+    children?: ReactNode | ((context: SliderContext) => ReactNode);
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider.mjs

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
@@ -42,5 +41,6 @@ const Slider = forwardRef((props, ref) => {
   const view = runIfFn(children, slider);
   return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
+Slider.displayName = "Slider";
 
 export { Slider };

package/slider/use-slider.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
 const slider = require('@zag-js/slider');
-const React = require('react');
+const react = require('react');
 const reactDom = require('react-dom');
 const environmentContext = require('../environment/environment-context.cjs');
 
@@ -31,13 +31,13 @@ const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
 const useSlider = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue ?? props.value
   };
   const onChange = props.onChange;
-  const onChangeWithFlushSync = React.useCallback(
+  const onChangeWithFlushSync = react.useCallback(
     (e) => reactDom.flushSync(() => onChange?.(e)),
     [onChange]
   );
@@ -46,8 +46,8 @@ const useSlider = (props) => {
     value: props.value,
     onChange: onChangeWithFlushSync
   };
-  const [state, send] = react.useMachine(slider__namespace.machine(initialContext), { context });
-  return slider__namespace.connect(state, send, react.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/splitter/splitter-panel.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
 require('@zag-js/splitter');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
-const SplitterPanel = forwardRef.forwardRef((props, ref) => {
+const SplitterPanel = react.forwardRef((props, ref) => {
   const [splitterPanelProps, divProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
   const { getPanelProps } = splitterContext.useSplitterContext();
-  const mergedProps = react.mergeProps(getPanelProps(splitterPanelProps), divProps);
+  const mergedProps = react$1.mergeProps(getPanelProps(splitterPanelProps), divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+SplitterPanel.displayName = "SplitterPanel";
 
 exports.SplitterPanel = SplitterPanel;

package/splitter/splitter-panel.d.ts

@@ -1,6 +1,10 @@
-import type { ForwardRefExoticComponent } from 'react';
 import { type PanelProps } from '@zag-js/splitter';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelProps>;
-export declare const SplitterPanel: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, PanelProps>>;
+export type SplitterPanelProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, PanelProps>;
+export declare const SplitterPanel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;

package/splitter/splitter-panel.mjs

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import '@zag-js/splitter';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterPanel = forwardRef((props, ref) => {
@@ -13,5 +13,6 @@ const SplitterPanel = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getPanelProps(splitterPanelProps), divProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+SplitterPanel.displayName = "SplitterPanel";
 
 export { SplitterPanel };

package/splitter/splitter-resize-trigger.cjs

@@ -4,14 +4,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
 require('@zag-js/splitter');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
-const SplitterResizeTrigger = forwardRef.forwardRef(
+const SplitterResizeTrigger = react.forwardRef(
   (props, ref) => {
     const [triggerProps, restProps] = createSplitProps.createSplitProps()(props, [
       "disabled",
@@ -19,9 +19,10 @@ const SplitterResizeTrigger = forwardRef.forwardRef(
       "step"
     ]);
     const { getResizeTriggerProps } = splitterContext.useSplitterContext();
-    const mergedProps = react.mergeProps(getResizeTriggerProps(triggerProps), restProps);
+    const mergedProps = react$1.mergeProps(getResizeTriggerProps(triggerProps), restProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
   }
 );
+SplitterResizeTrigger.displayName = "SplitterResizeTrigger";
 
 exports.SplitterResizeTrigger = SplitterResizeTrigger;

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

@@ -1,8 +1,10 @@
-import type { AsChildComponentProps } from '../factory';
+import { type ResizeTriggerProps } from '@zag-js/splitter';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { ResizeTriggerProps, type connect } from '@zag-js/splitter';
-type ResizeTriggerProps = Parameters<ReturnType<typeof connect>['getResizeTriggerProps']>[0];
-export type SplitterResizeTriggerProps = ResizeTriggerProps;
-export declare const SplitterResizeTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, ResizeTriggerProps>>;
-export {};
+export type SplitterResizeTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ResizeTriggerProps>;
+export declare const SplitterResizeTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;

package/splitter/splitter-resize-trigger.mjs

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import '@zag-js/splitter';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterResizeTrigger = forwardRef(
@@ -19,5 +19,6 @@ const SplitterResizeTrigger = forwardRef(
     return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
   }
 );
+SplitterResizeTrigger.displayName = "SplitterResizeTrigger";
 
 export { SplitterResizeTrigger };

package/splitter/splitter.cjs

@@ -4,15 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
-const Splitter = forwardRef.forwardRef((props, ref) => {
+const Splitter = react.forwardRef((props, ref) => {
   const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -29,9 +29,10 @@ const Splitter = forwardRef.forwardRef((props, ref) => {
     ]
   );
   const splitter = useSplitter.useSplitter(useSplitterProps);
-  const mergedProps = react.mergeProps(splitter.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(splitter.rootProps, divProps);
   const view = runIfFn.runIfFn(children, splitter);
   return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+Splitter.displayName = "Splitter";
 
 exports.Splitter = Splitter;