@ark-ui/solid 0.2.0 → 0.3.0

package/dist/select/select-trigger.d.ts

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type SelectTriggerProps = {
-    children: JSX.Element;
-};
-export declare const SelectTrigger: (props: SelectTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SelectTriggerProps = HTMLArkProps<'button'>;
+export declare const SelectTrigger: (props: SelectTriggerProps) => JSX.Element;

package/dist/select/select-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectTrigger = props => {
-  const select = useSelectContext();
-  const triggerProps = select().triggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useSelectContext();
+  const triggerProps = mergeProps(() => api().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { SelectTrigger };

package/dist/select/select.cjs

@@ -3,28 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
 const createSplitProps = require('../create-split-props.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
 
 const Select = props => {
-  const [useSelectProps, localProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
-  const select = useSelect.useSelect(useSelectProps);
+  const [selectParams, restProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
+  const api = useSelect.useSelect(selectParams);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(selectContext.SelectProvider, {
-    value: select,
+    value: api,
     get children() {
-      return web.createComponent(SelectContextWrapper, localProps);
+      return getChildren();
     }
   });
 };
 
-// Children need to be wrapped in a function so that the context is available
-const SelectContextWrapper = props => {
-  const select = selectContext.useSelectContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, select));
-  return web.memo(view);
-};
-
 exports.Select = Select;

package/dist/select/select.d.ts

@@ -1,5 +1,5 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js/jsx-runtime';
+import type { Assign } from '../types';
 import { type SelectContext } from './select-context';
 import { type UseSelectProps } from './use-select';
 export type SelectProps = Assign<UseSelectProps, {

package/dist/select/select.mjs

@@ -1,26 +1,19 @@
-import { createComponent, memo } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent } from 'solid-js/web';
 import { createSplitProps } from '../create-split-props.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
-import { SelectProvider, useSelectContext } from './select-context.mjs';
+import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
 
 const Select = props => {
-  const [useSelectProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
-  const select = useSelect(useSelectProps);
+  const [selectParams, restProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
+  const api = useSelect(selectParams);
+  const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(SelectProvider, {
-    value: select,
+    value: api,
     get children() {
-      return createComponent(SelectContextWrapper, localProps);
+      return getChildren();
     }
   });
 };
 
-// Children need to be wrapped in a function so that the context is available
-const SelectContextWrapper = props => {
-  const select = useSelectContext();
-  const view = children(() => runIfFn(props.children, select));
-  return memo(view);
-};
-
 export { Select };

package/dist/slider/slider-control.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderControl = props => {
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().controlProps, props));
+  const api = sliderContext.useSliderContext();
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.SliderControl = SliderControl;

package/dist/slider/slider-control.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderControl = props => {
-  const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().controlProps, props));
+  const api = useSliderContext();
+  const controlProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { SliderControl };

package/dist/slider/slider-label.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderLabel = props => {
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => slider().labelProps, props));
+  const api = sliderContext.useSliderContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.SliderLabel = SliderLabel;

package/dist/slider/slider-label.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderLabel = props => {
-  const slider = useSliderContext();
-  return createComponent(ark.label, mergeProps(() => slider().labelProps, props));
+  const api = useSliderContext();
+  const labelProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { SliderLabel };

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderMarkerGroup = props => {
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().markerGroupProps, props));
+  const api = sliderContext.useSliderContext();
+  const markerGroupProps = solid.mergeProps(() => api().markerGroupProps, props);
+  return web.createComponent(factory.ark.div, markerGroupProps);
 };
 
 exports.SliderMarkerGroup = SliderMarkerGroup;

package/dist/slider/slider-marker-group.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarkerGroup = props => {
-  const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().markerGroupProps, props));
+  const api = useSliderContext();
+  const markerGroupProps = mergeProps(() => api().markerGroupProps, props);
+  return createComponent(ark.div, markerGroupProps);
 };
 
 export { SliderMarkerGroup };

package/dist/slider/slider-marker.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderMarker = props => {
-  const [markerProps, spanProps] = createSplitProps.createSplitProps()(props, ['value']);
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+  const [markerParams, restProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const api = sliderContext.useSliderContext();
+  const markerProps = solid.mergeProps(() => api().getMarkerProps(markerParams), restProps);
+  return web.createComponent(factory.ark.span, markerProps);
 };
 
 exports.SliderMarker = SliderMarker;

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

@@ -1,9 +1,9 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
-type GetMarkerPropsArgs = {
+import type { Assign } from '../types';
+type MarkerParams = {
     value: number;
 };
-export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, GetMarkerPropsArgs>;
+export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, MarkerParams>;
 export declare const SliderMarker: (props: SliderMarkerProps) => JSX.Element;
 export {};

package/dist/slider/slider-marker.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarker = props => {
-  const [markerProps, spanProps] = createSplitProps()(props, ['value']);
-  const slider = useSliderContext();
-  return createComponent(ark.span, mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+  const [markerParams, restProps] = createSplitProps()(props, ['value']);
+  const api = useSliderContext();
+  const markerProps = mergeProps(() => api().getMarkerProps(markerParams), restProps);
+  return createComponent(ark.span, markerProps);
 };
 
 export { SliderMarker };

package/dist/slider/slider-output.cjs

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderOutput = props => {
   const slider = sliderContext.useSliderContext();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, slider()));
-  return web.createComponent(factory.ark.output, web.mergeProps(() => slider().outputProps, props, {
-    children: view
+  const getChildren = () => runIfFn.runIfFn(props.children, slider);
+  const outputProps = solid.mergeProps(() => slider().outputProps, props);
+  return web.createComponent(factory.ark.output, web.mergeProps(outputProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/slider/slider-output.d.ts

@@ -1,8 +1,8 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseSliderReturn } from './use-slider';
 export type SliderOutputProps = Assign<HTMLArkProps<'output'>, {
-    children?: ((pages: ReturnType<UseSliderReturn>) => JSX.Element) | JSX.Element;
+    children?: ((pages: UseSliderReturn) => JSX.Element) | JSX.Element;
 }>;
 export declare const SliderOutput: (props: SliderOutputProps) => JSX.Element;

package/dist/slider/slider-output.mjs

@@ -1,14 +1,17 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderOutput = props => {
   const slider = useSliderContext();
-  const view = () => children(() => runIfFn(props.children, slider()));
-  return createComponent(ark.output, mergeProps(() => slider().outputProps, props, {
-    children: view
+  const getChildren = () => runIfFn(props.children, slider);
+  const outputProps = mergeProps(() => slider().outputProps, props);
+  return createComponent(ark.output, mergeProps$1(outputProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/slider/slider-range.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderRange = props => {
   const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rangeProps, props));
+  const rangeProps = solid.mergeProps(() => slider().rangeProps, props);
+  return web.createComponent(factory.ark.div, rangeProps);
 };
 
 exports.SliderRange = SliderRange;

package/dist/slider/slider-range.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderRange = props => {
   const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().rangeProps, props));
+  const rangeProps = mergeProps(() => slider().rangeProps, props);
+  return createComponent(ark.div, rangeProps);
 };
 
 export { SliderRange };

package/dist/slider/slider-thumb.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderThumb = props => {
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().thumbProps, props, {
+  const api = sliderContext.useSliderContext();
+  const thumbProps = solid.mergeProps(() => api().thumbProps, props);
+  return web.createComponent(factory.ark.div, web.mergeProps(thumbProps, {
     get children() {
-      return [web.createComponent(factory.ark.input, web.mergeProps(() => slider().hiddenInputProps)), web.memo(() => props.children)];
+      return [web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps)), web.memo(() => props.children)];
     }
   }));
 };

package/dist/slider/slider-thumb.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps, memo } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, memo } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = props => {
-  const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().thumbProps, props, {
+  const api = useSliderContext();
+  const thumbProps = mergeProps(() => api().thumbProps, props);
+  return createComponent(ark.div, mergeProps$1(thumbProps, {
     get children() {
-      return [createComponent(ark.input, mergeProps(() => slider().hiddenInputProps)), memo(() => props.children)];
+      return [createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps)), memo(() => props.children)];
     }
   }));
 };

package/dist/slider/slider-track.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderTrack = props => {
   const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().trackProps, props));
+  const trackProps = solid.mergeProps(() => slider().trackProps, props);
+  return web.createComponent(factory.ark.div, trackProps);
 };
 
 exports.SliderTrack = SliderTrack;

package/dist/slider/slider-track.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderTrack = props => {
   const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().trackProps, props));
+  const trackProps = mergeProps(() => slider().trackProps, props);
+  return createComponent(ark.div, trackProps);
 };
 
 export { SliderTrack };

package/dist/slider/slider.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -11,14 +11,17 @@ const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
 const Slider = props => {
-  const [useSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useSlider.useSlider(useSliderProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, slider()));
+  const [sliderParams, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useSlider.useSlider(sliderParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(sliderContext.SliderProvider, {
-    value: slider,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rootProps, divProps, {
-        children: view
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/slider/slider.d.ts

@@ -1,8 +1,8 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseSliderProps, type UseSliderReturn } from './use-slider';
 export type SliderProps = Assign<HTMLArkProps<'div'>, UseSliderProps & {
-    children?: ((api: ReturnType<UseSliderReturn>) => JSX.Element) | JSX.Element;
+    children?: ((api: UseSliderReturn) => JSX.Element) | JSX.Element;
 }>;
 export declare const Slider: (props: SliderProps) => JSX.Element;

package/dist/slider/slider.mjs

@@ -1,5 +1,5 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
@@ -7,14 +7,17 @@ import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
 
 const Slider = props => {
-  const [useSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useSlider(useSliderProps);
-  const view = () => children(() => runIfFn(divProps.children, slider()));
+  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useSlider(sliderParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(SliderProvider, {
-    value: slider,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => slider().rootProps, divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/splitter/splitter-panel.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
 const SplitterPanel = props => {
-  const [splitterPanelProps, divProps] = createSplitProps.createSplitProps()(props, ['id', 'snapSize']);
-  const splitter = splitterContext.useSplitterContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => splitter().getPanelProps(splitterPanelProps), divProps));
+  const [panelParams, restProps] = createSplitProps.createSplitProps()(props, ['id', 'snapSize']);
+  const api = splitterContext.useSplitterContext();
+  const panelProps = solid.mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return web.createComponent(factory.ark.div, panelProps);
 };
 
 exports.SplitterPanel = SplitterPanel;

package/dist/splitter/splitter-panel.d.ts

@@ -1,8 +1,8 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type connect } from '@zag-js/splitter';
 import { type HTMLArkProps } from '../factory';
-type GetPanelProps = Parameters<ReturnType<typeof connect>['getPanelProps']>[0];
-export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, GetPanelProps>;
+import type { Assign } from '../types';
+type PanelParams = Parameters<ReturnType<typeof connect>['getPanelProps']>[0];
+export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelParams>;
 export declare const SplitterPanel: (props: SplitterPanelProps) => JSX.Element;
 export {};

package/dist/splitter/splitter-panel.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterPanel = props => {
-  const [splitterPanelProps, divProps] = createSplitProps()(props, ['id', 'snapSize']);
-  const splitter = useSplitterContext();
-  return createComponent(ark.div, mergeProps(() => splitter().getPanelProps(splitterPanelProps), divProps));
+  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const panelProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return createComponent(ark.div, panelProps);
 };
 
 export { SplitterPanel };

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

@@ -2,22 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
 const SplitterResizeTrigger = props => {
-  const splitter = splitterContext.useSplitterContext();
-  const triggerProps = splitter?.().getResizeTriggerProps(props);
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = splitterContext.useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'id', 'step']);
+  const triggerProps = solid.mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.SplitterResizeTrigger = SplitterResizeTrigger;