@ark-ui/solid 0.1.0 → 0.3.0

package/dist/rating-group/rating.mjs

@@ -1,22 +1,23 @@
-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';
 import { RatingProvider } from './rating-context.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const Rating = props => {
-  const ratingGroup = useRatingGroupContext();
-  const ratingState = ratingGroup().getRatingState(props.index);
-  const view = children(() => runIfFn(props.children, ratingState));
-  return createComponent(ark.span, mergeProps(() => ratingGroup().getRatingProps({
-    index: props.index
-  }), props, {
+  const [ratingParams, restProps] = createSplitProps()(props, ['index']);
+  const api = useRatingGroupContext();
+  const ratingState = () => api().getRatingState(ratingParams.index);
+  const getChildren = () => runIfFn(restProps.children, ratingState);
+  const ratingProps = mergeProps(() => api().getRatingProps(ratingParams), restProps);
+  return createComponent(ark.span, mergeProps$1(ratingProps, {
     get children() {
       return createComponent(RatingProvider, {
         value: ratingState,
         get children() {
-          return view();
+          return getChildren();
         }
       });
     }

package/dist/select/select-content.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 selectContext = require('./select-context.cjs');
 
 const SelectContent = props => {
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.ul, web.mergeProps(() => select().contentProps, props));
+  const api = selectContext.useSelectContext();
+  const contentProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(factory.ark.ul, contentProps);
 };
 
 exports.SelectContent = SelectContent;

package/dist/select/select-content.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 { useSelectContext } from './select-context.mjs';
 
 const SelectContent = props => {
-  const select = useSelectContext();
-  return createComponent(ark.ul, mergeProps(() => select().contentProps, props));
+  const api = useSelectContext();
+  const contentProps = mergeProps(() => api().contentProps, props);
+  return createComponent(ark.ul, contentProps);
 };
 
 export { SelectContent };

package/dist/select/select-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 selectContext = require('./select-context.cjs');
 
 const SelectLabel = props => {
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => select().labelProps, props));
+  const api = selectContext.useSelectContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.SelectLabel = SelectLabel;

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

package/dist/select/select-option-group-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 createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectOptionGroupLabel = props => {
-  const [optionProps, labelProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => select().getOptionGroupLabelProps(optionProps), labelProps));
+  const [labelParams, restProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
+  const api = selectContext.useSelectContext();
+  const groupLabelProps = solid.mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
+  return web.createComponent(factory.ark.label, groupLabelProps);
 };
 
 exports.SelectOptionGroupLabel = SelectOptionGroupLabel;

package/dist/select/select-option-group-label.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 OptionGroupLabelProps = {
+import type { Assign } from '../types';
+type GroupLabelParams = {
     htmlFor: string;
 };
-export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'label'>, OptionGroupLabelProps>;
+export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'label'>, GroupLabelParams>;
 export declare const SelectOptionGroupLabel: (props: SelectOptionGroupLabelProps) => JSX.Element;
 export {};

package/dist/select/select-option-group-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 { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectOptionGroupLabel = props => {
-  const [optionProps, labelProps] = createSplitProps()(props, ['htmlFor']);
-  const select = useSelectContext();
-  return createComponent(ark.label, mergeProps(() => select().getOptionGroupLabelProps(optionProps), labelProps));
+  const [labelParams, restProps] = createSplitProps()(props, ['htmlFor']);
+  const api = useSelectContext();
+  const groupLabelProps = mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
+  return createComponent(ark.label, groupLabelProps);
 };
 
 export { SelectOptionGroupLabel };

package/dist/select/select-option-group.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 selectContext = require('./select-context.cjs');
 
 const SelectOptionGroup = props => {
-  const [getOptionGroupProps, divProps] = createSplitProps.createSplitProps()(props, ['id']);
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => select().getOptionGroupProps(getOptionGroupProps), divProps));
+  const [optionGroupParams, restProps] = createSplitProps.createSplitProps()(props, ['id']);
+  const api = selectContext.useSelectContext();
+  const groupProps = solid.mergeProps(() => api().getOptionGroupProps(optionGroupParams), restProps);
+  return web.createComponent(factory.ark.div, groupProps);
 };
 
 exports.SelectOptionGroup = SelectOptionGroup;

package/dist/select/select-option-group.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 GetOptionGroupProps = {
+import type { Assign } from '../types';
+type OptionGroupParams = {
     id: string;
 };
-export type SelectOptionGroupProps = Assign<HTMLArkProps<'div'>, GetOptionGroupProps>;
+export type SelectOptionGroupProps = Assign<HTMLArkProps<'div'>, OptionGroupParams>;
 export declare const SelectOptionGroup: (props: SelectOptionGroupProps) => JSX.Element;
 export {};

package/dist/select/select-option-group.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 { useSelectContext } from './select-context.mjs';
 
 const SelectOptionGroup = props => {
-  const [getOptionGroupProps, divProps] = createSplitProps()(props, ['id']);
-  const select = useSelectContext();
-  return createComponent(ark.div, mergeProps(() => select().getOptionGroupProps(getOptionGroupProps), divProps));
+  const [optionGroupParams, restProps] = createSplitProps()(props, ['id']);
+  const api = useSelectContext();
+  const groupProps = mergeProps(() => api().getOptionGroupProps(optionGroupParams), restProps);
+  return createComponent(ark.div, groupProps);
 };
 
 export { SelectOptionGroup };

package/dist/select/select-option.cjs

@@ -3,16 +3,18 @@
 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 selectContext = require('./select-context.cjs');
 
 const SelectOption = props => {
-  const [optionProps, liProps] = createSplitProps.createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.li, web.mergeProps(() => select().getOptionProps(optionProps), liProps, {
+  const [optionParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
+  const api = selectContext.useSelectContext();
+  const optionProps = solid.mergeProps(() => api().getOptionProps(optionParams), restProps);
+  return web.createComponent(factory.ark.li, web.mergeProps(optionProps, {
     get children() {
-      return liProps.children ? liProps.children : optionProps.label;
+      return restProps.children ?? optionParams.label;
     }
   }));
 };

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

@@ -1,8 +1,8 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { useSelectContext } from './select-context';
-type OptionProps = Parameters<ReturnType<ReturnType<typeof useSelectContext>>['getOptionProps']>[0];
-export type SelectOptionProps = Assign<HTMLArkProps<'li'>, OptionProps>;
+type OptionParams = Parameters<ReturnType<ReturnType<typeof useSelectContext>>['getOptionProps']>[0];
+export type SelectOptionProps = Assign<HTMLArkProps<'li'>, OptionParams>;
 export declare const SelectOption: (props: SelectOptionProps) => JSX.Element;
 export {};

package/dist/select/select-option.mjs

@@ -1,14 +1,16 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+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 { useSelectContext } from './select-context.mjs';
 
 const SelectOption = props => {
-  const [optionProps, liProps] = createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
-  const select = useSelectContext();
-  return createComponent(ark.li, mergeProps(() => select().getOptionProps(optionProps), liProps, {
+  const [optionParams, restProps] = createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
+  const api = useSelectContext();
+  const optionProps = mergeProps(() => api().getOptionProps(optionParams), restProps);
+  return createComponent(ark.li, mergeProps$1(optionProps, {
     get children() {
-      return liProps.children ? liProps.children : optionProps.label;
+      return restProps.children ?? optionParams.label;
     }
   }));
 };

package/dist/select/select-positioner.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 selectContext = require('./select-context.cjs');
 
 const SelectPositioner = props => {
-  const select = selectContext.useSelectContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => select().positionerProps, props));
+  const api = selectContext.useSelectContext();
+  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(factory.ark.div, positionerProps);
 };
 
 exports.SelectPositioner = SelectPositioner;

package/dist/select/select-positioner.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 { useSelectContext } from './select-context.mjs';
 
 const SelectPositioner = props => {
-  const select = useSelectContext();
-  return createComponent(ark.div, mergeProps(() => select().positionerProps, props));
+  const api = useSelectContext();
+  const positionerProps = mergeProps(() => api().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
 };
 
 export { SelectPositioner };

package/dist/select/select-trigger.cjs

@@ -2,22 +2,15 @@
 
 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 factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectTrigger = props => {
-  const select = selectContext.useSelectContext();
-  const triggerProps = select().triggerProps;
-  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 = selectContext.useSelectContext();
+  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.SelectTrigger = SelectTrigger;

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

@@ -1,5 +1,4 @@
-import type { ChildrenReturn, type JSX } from 'solid-js';
-export type SelectTriggerProps = {
-    children: JSX.Element;
-};
-export declare const SelectTrigger: (props: SelectTriggerProps) => ChildrenReturn;
+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 };