@ark-ui/solid 0.2.0 → 0.4.0

package/dist/radio-group/radio-group.mjs

@@ -1,16 +1,18 @@
-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 { RadioGroupProvider } from './radio-group-context.mjs';
 import { useRadioGroup } from './use-radio-group.mjs';
 
 const RadioGroup = props => {
-  const [useRadioGroupProps, divProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
-  const radioGroup = useRadioGroup(useRadioGroupProps);
+  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const api = useRadioGroup(groupParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(RadioGroupProvider, {
-    value: radioGroup,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => radioGroup().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/radio-group/radio-input.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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioInput = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => radioGroup().getRadioInputProps(context), props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioParams = radioContext.useRadioContext();
+  const inputProps = solid.mergeProps(() => api().getRadioInputProps(radioParams), props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.RadioInput = RadioInput;

package/dist/radio-group/radio-input.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 { ark } from '../factory.mjs';
 import { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioInput = props => {
-  const radioGroup = useRadioGroupContext();
-  const context = useRadioContext();
-  return createComponent(ark.input, mergeProps(() => radioGroup().getRadioInputProps(context), props));
+  const api = useRadioGroupContext();
+  const radioParams = useRadioContext();
+  const inputProps = mergeProps(() => api().getRadioInputProps(radioParams), props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { RadioInput };

package/dist/radio-group/radio-label.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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioLabel = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => radioGroup().getRadioLabelProps(context), props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioParams = radioContext.useRadioContext();
+  const labelProps = solid.mergeProps(() => api().getRadioLabelProps(radioParams), props);
+  return web.createComponent(factory.ark.span, labelProps);
 };
 
 exports.RadioLabel = RadioLabel;

package/dist/radio-group/radio-label.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 { ark } from '../factory.mjs';
 import { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioLabel = props => {
-  const radioGroup = useRadioGroupContext();
-  const context = useRadioContext();
-  return createComponent(ark.span, mergeProps(() => radioGroup().getRadioLabelProps(context), props));
+  const api = useRadioGroupContext();
+  const radioParams = useRadioContext();
+  const labelProps = mergeProps(() => api().getRadioLabelProps(radioParams), props);
+  return createComponent(ark.span, labelProps);
 };
 
 export { RadioLabel };

package/dist/radio-group/radio.cjs

@@ -3,21 +3,20 @@
 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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const Radio = props => {
-  const [contextProps, labelProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
-  const radioGroup = radioGroupContext.useRadioGroupContext();
+  const [contextProps, restProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioProps = solid.mergeProps(() => api().getRadioProps(contextProps), restProps);
   return web.createComponent(radioContext.RadioProvider, {
     value: contextProps,
     get children() {
-      return web.createComponent(factory.ark.label, web.mergeProps(() => radioGroup().getRadioProps({
-        value: contextProps.value,
-        disabled: contextProps.disabled
-      }), labelProps));
+      return web.createComponent(factory.ark.label, radioProps);
     }
   });
 };

package/dist/radio-group/radio.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type RadioContext } from './radio-context';
 export type RadioProps = Assign<HTMLArkProps<'label'>, RadioContext>;
 export declare const Radio: (props: RadioProps) => JSX.Element;

package/dist/radio-group/radio.mjs

@@ -1,19 +1,18 @@
-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 { RadioProvider } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const Radio = props => {
-  const [contextProps, labelProps] = createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
-  const radioGroup = useRadioGroupContext();
+  const [contextProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
+  const api = useRadioGroupContext();
+  const radioProps = mergeProps(() => api().getRadioProps(contextProps), restProps);
   return createComponent(RadioProvider, {
     value: contextProps,
     get children() {
-      return createComponent(ark.label, mergeProps(() => radioGroup().getRadioProps({
-        value: contextProps.value,
-        disabled: contextProps.disabled
-      }), labelProps));
+      return createComponent(ark.label, radioProps);
     }
   });
 };

package/dist/radio-group/use-radio-group.cjs

@@ -28,7 +28,7 @@ const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useRadioGroup = props => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({
+  const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);

package/dist/radio-group/use-radio-group.d.ts

@@ -26,4 +26,5 @@ export declare const useRadioGroup: (props: UseRadioGroupProps) => Accessor<{
     getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
+    indicatorProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/radio-group/use-radio-group.mjs

@@ -1,6 +1,6 @@
 import * as radio from '@zag-js/radio-group';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRadioGroup = props => {

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderControl = props => {
   const slider = rangeSliderContext.useRangeSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().controlProps, props));
+  const controlProps = solid.mergeProps(() => slider().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.RangeSliderControl = RangeSliderControl;

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderControl = props => {
   const slider = useRangeSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().controlProps, props));
+  const controlProps = mergeProps(() => slider().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { RangeSliderControl };

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderLabel = props => {
   const slider = rangeSliderContext.useRangeSliderContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => slider().labelProps, props));
+  const labelProps = solid.mergeProps(() => slider().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.RangeSliderLabel = RangeSliderLabel;

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderLabel = props => {
   const slider = useRangeSliderContext();
-  return createComponent(ark.label, mergeProps(() => slider().labelProps, props));
+  const labelProps = mergeProps(() => slider().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { RangeSliderLabel };

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderMarkerGroup = props => {
   const slider = rangeSliderContext.useRangeSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().markerGroupProps, props));
+  const groupProps = solid.mergeProps(() => slider().markerGroupProps, props);
+  return web.createComponent(factory.ark.div, groupProps);
 };
 
 exports.RangeSliderMarkerGroup = RangeSliderMarkerGroup;

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderMarkerGroup = props => {
   const slider = useRangeSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().markerGroupProps, props));
+  const groupProps = mergeProps(() => slider().markerGroupProps, props);
+  return createComponent(ark.div, groupProps);
 };
 
 export { RangeSliderMarkerGroup };

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderMarker = props => {
-  const [markerProps, spanProps] = createSplitProps.createSplitProps()(props, ['value']);
-  const slider = rangeSliderContext.useRangeSliderContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+  const [markerParams, spanProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const api = rangeSliderContext.useRangeSliderContext();
+  const markerProps = solid.mergeProps(() => api().getMarkerProps(markerParams), spanProps);
+  return web.createComponent(factory.ark.span, markerProps);
 };
 
 exports.RangeSliderMarker = RangeSliderMarker;

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

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 type GetMarkerPropsArgs = {
     value: number;
 };

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderMarker = props => {
-  const [markerProps, spanProps] = createSplitProps()(props, ['value']);
-  const slider = useRangeSliderContext();
-  return createComponent(ark.span, mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+  const [markerParams, spanProps] = createSplitProps()(props, ['value']);
+  const api = useRangeSliderContext();
+  const markerProps = mergeProps(() => api().getMarkerProps(markerParams), spanProps);
+  return createComponent(ark.span, markerProps);
 };
 
 export { RangeSliderMarker };

package/dist/range-slider/range-slider-output.cjs

@@ -3,17 +3,18 @@
 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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderOutput = props => {
-  const slider = rangeSliderContext.useRangeSliderContext();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, slider()));
-  return web.createComponent(factory.ark.output, web.mergeProps(() => slider().outputProps, props, {
+  const api = rangeSliderContext.useRangeSliderContext();
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  const outputProps = solid.mergeProps(() => api().outputProps, props);
+  return web.createComponent(factory.ark.output, web.mergeProps(outputProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

package/dist/range-slider/range-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 UseRangeSliderReturn } from './use-range-slider';
 export type RangeSliderOutputProps = Assign<HTMLArkProps<'output'>, {
-    children?: JSX.Element | ((api: ReturnType<UseRangeSliderReturn>) => JSX.Element);
+    children?: JSX.Element | ((api: UseRangeSliderReturn) => JSX.Element);
 }>;
 export declare const RangeSliderOutput: (props: RangeSliderOutputProps) => JSX.Element;

package/dist/range-slider/range-slider-output.mjs

@@ -1,15 +1,16 @@
-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderOutput = props => {
-  const slider = useRangeSliderContext();
-  const view = () => children(() => runIfFn(props.children, slider()));
-  return createComponent(ark.output, mergeProps(() => slider().outputProps, props, {
+  const api = useRangeSliderContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const outputProps = mergeProps(() => api().outputProps, props);
+  return createComponent(ark.output, mergeProps$1(outputProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderRange = props => {
   const slider = rangeSliderContext.useRangeSliderContext();
-  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.RangeSliderRange = RangeSliderRange;

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderRange = props => {
   const slider = useRangeSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().rangeProps, props));
+  const rangeProps = mergeProps(() => slider().rangeProps, props);
+  return createComponent(ark.div, rangeProps);
 };
 
 export { RangeSliderRange };

package/dist/range-slider/range-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 createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderThumb = props => {
-  const [thumbParams, divProps] = createSplitProps.createSplitProps()(props, ['index']);
-  const slider = rangeSliderContext.useRangeSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().getThumbProps(thumbParams.index()), divProps));
+  const [thumbParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const api = rangeSliderContext.useRangeSliderContext();
+  const thumbProps = solid.mergeProps(() => api().getThumbProps(thumbParams.index()), restProps);
+  return web.createComponent(factory.ark.div, thumbProps);
 };
 
 exports.RangeSliderThumb = RangeSliderThumb;

package/dist/range-slider/range-slider-thumb.d.ts

@@ -1,6 +1,6 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import type { JSX, type Accessor } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 type RangeSliderThumbParams = {
     index: Accessor<number>;
 };

package/dist/range-slider/range-slider-thumb.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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderThumb = props => {
-  const [thumbParams, divProps] = createSplitProps()(props, ['index']);
-  const slider = useRangeSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().getThumbProps(thumbParams.index()), divProps));
+  const [thumbParams, restProps] = createSplitProps()(props, ['index']);
+  const api = useRangeSliderContext();
+  const thumbProps = mergeProps(() => api().getThumbProps(thumbParams.index()), restProps);
+  return createComponent(ark.div, thumbProps);
 };
 
 export { RangeSliderThumb };

package/dist/range-slider/range-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 rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderTrack = props => {
   const slider = rangeSliderContext.useRangeSliderContext();
-  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.RangeSliderTrack = RangeSliderTrack;

package/dist/range-slider/range-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderTrack = props => {
   const slider = useRangeSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().trackProps, props));
+  const trackProps = mergeProps(() => slider().trackProps, props);
+  return createComponent(ark.div, trackProps);
 };
 
 export { RangeSliderTrack };

package/dist/range-slider/range-slider.cjs

@@ -3,7 +3,6 @@
 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 factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -12,13 +11,15 @@ const useRangeSlider = require('./use-range-slider.cjs');
 
 const RangeSlider = props => {
   const [useRangeSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useRangeSlider.useRangeSlider(useRangeSliderProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, slider()));
+  const api = useRangeSlider.useRangeSlider(useRangeSliderProps);
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
   return web.createComponent(rangeSliderContext.RangeSliderProvider, {
-    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(() => api().rootProps, divProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/range-slider/range-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 UseRangeSliderProps, type UseRangeSliderReturn } from './use-range-slider';
 export type RangeSliderProps = Assign<HTMLArkProps<'div'>, UseRangeSliderProps & {
-    children?: JSX.Element | ((api: ReturnType<UseRangeSliderReturn>) => JSX.Element);
+    children?: JSX.Element | ((api: UseRangeSliderReturn) => JSX.Element);
 }>;
 export declare const RangeSlider: (props: RangeSliderProps) => JSX.Element;

package/dist/range-slider/range-slider.mjs

@@ -1,5 +1,4 @@
 import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
@@ -8,13 +7,15 @@ import { useRangeSlider } from './use-range-slider.mjs';
 
 const RangeSlider = props => {
   const [useRangeSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useRangeSlider(useRangeSliderProps);
-  const view = () => children(() => runIfFn(props.children, slider()));
+  const api = useRangeSlider(useRangeSliderProps);
+  const getChildren = () => runIfFn(props.children, api);
   return createComponent(RangeSliderProvider, {
-    value: slider,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => slider().rootProps, divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps(() => api().rootProps, divProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

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

@@ -28,7 +28,7 @@ const rangeSlider__namespace = /*#__PURE__*/_interopNamespaceDefault(rangeSlider
 
 const useRangeSlider = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), values: props.value, getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), values: props.value, getRootNode }, props);
   const [state, send] = solid.useMachine(rangeSlider__namespace.machine(context), {
     context
   });

package/dist/range-slider/use-range-slider.mjs

@@ -1,6 +1,6 @@
 import * as rangeSlider from '@zag-js/range-slider';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {