@ark-ui/solid 0.2.0 → 0.3.0

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/rating-group/rating-context.d.ts

@@ -1,16 +1,17 @@
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type connect } from '@zag-js/rating-group';
+import type { Accessor } from 'solid-js';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
-export declare const RatingProvider: ContextProviderComponent<{
+export declare const RatingProvider: ContextProviderComponent<Accessor<{
     isEqual: boolean;
     isValueEmpty: boolean;
     isHighlighted: boolean;
     isHalf: boolean;
     isChecked: boolean;
-}>, useRatingContext: () => {
+}>>, useRatingContext: () => Accessor<{
     isEqual: boolean;
     isValueEmpty: boolean;
     isHighlighted: boolean;
     isHalf: boolean;
     isChecked: boolean;
-};
+}>;

package/dist/rating-group/rating-group-control.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 ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupControl = props => {
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, ratingGroup));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => ratingGroup().controlProps, props, {
+  const api = ratingGroupContext.useRatingGroupContext();
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

package/dist/rating-group/rating-group-control.d.ts

@@ -1,7 +1,8 @@
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type RatingGroupContext } from './rating-group-context';
-export type RatingGroupControlProps = Omit<HTMLArkProps<'div'>, 'children'> & {
+export type RatingGroupControlProps = Assign<HTMLArkProps<'div'>, {
     children: JSX.Element | ((context: RatingGroupContext) => JSX.Element);
-};
+}>;
 export declare const RatingGroupControl: (props: RatingGroupControlProps) => JSX.Element;

package/dist/rating-group/rating-group-control.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 { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupControl = props => {
-  const ratingGroup = useRatingGroupContext();
-  const view = children(() => runIfFn(props.children, ratingGroup));
-  return createComponent(ark.div, mergeProps(() => ratingGroup().controlProps, props, {
+  const api = useRatingGroupContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const controlProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergeProps$1(controlProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

package/dist/rating-group/rating-group-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 ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupLabel = props => {
   const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => ratingGroup().labelProps, props));
+  const labelProps = solid.mergeProps(() => ratingGroup().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.RatingGroupLabel = RatingGroupLabel;

package/dist/rating-group/rating-group-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 { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupLabel = props => {
   const ratingGroup = useRatingGroupContext();
-  return createComponent(ark.label, mergeProps(() => ratingGroup().labelProps, props));
+  const labelProps = mergeProps(() => ratingGroup().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { RatingGroupLabel };

package/dist/rating-group/rating-group.cjs

@@ -3,20 +3,22 @@
 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 ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = props => {
-  const [useRatingGroupProps, inputProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
-  const ratingGroup = useRatingGroup.useRatingGroup(useRatingGroupProps);
+  const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup.useRatingGroup(ratingParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(ratingGroupContext.RatingGroupProvider, {
-    value: ratingGroup,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => ratingGroup().rootProps, {
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
         get children() {
-          return [web.memo(() => props.children), web.createComponent(factory.ark.input, web.mergeProps(() => ratingGroup().hiddenInputProps, inputProps))];
+          return [web.memo(() => restProps.children), web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps))];
         }
       }));
     }

package/dist/rating-group/rating-group.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 UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, UseRatingGroupProps>;
+export type RatingGroupProps = Assign<HTMLArkProps<'div'>, UseRatingGroupProps>;
 export declare const RatingGroup: (props: RatingGroupProps) => JSX.Element;

package/dist/rating-group/rating-group.mjs

@@ -1,18 +1,20 @@
-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 { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = props => {
-  const [useRatingGroupProps, inputProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
-  const ratingGroup = useRatingGroup(useRatingGroupProps);
+  const [ratingParams, restProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(ratingParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(RatingGroupProvider, {
-    value: ratingGroup,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => ratingGroup().rootProps, {
+      return createComponent(ark.div, mergeProps$1(rootProps, {
         get children() {
-          return [memo(() => props.children), createComponent(ark.input, mergeProps(() => ratingGroup().hiddenInputProps, inputProps))];
+          return [memo(() => restProps.children), createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps))];
         }
       }));
     }

package/dist/rating-group/rating.cjs

@@ -3,24 +3,25 @@
 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');
 const ratingContext = require('./rating-context.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
 const Rating = props => {
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const ratingState = ratingGroup().getRatingState(props.index);
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, ratingState));
-  return web.createComponent(factory.ark.span, web.mergeProps(() => ratingGroup().getRatingProps({
-    index: props.index
-  }), props, {
+  const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const api = ratingGroupContext.useRatingGroupContext();
+  const ratingState = () => api().getRatingState(ratingParams.index);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, ratingState);
+  const ratingProps = solid.mergeProps(() => api().getRatingProps(ratingParams), restProps);
+  return web.createComponent(factory.ark.span, web.mergeProps(ratingProps, {
     get children() {
       return web.createComponent(ratingContext.RatingProvider, {
         value: ratingState,
         get children() {
-          return view();
+          return getChildren();
         }
       });
     }

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

@@ -1,8 +1,10 @@
+import type { Accessor } from 'solid-js';
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type RatingContext } from './rating-context';
-export type RatingProps = Omit<HTMLArkProps<'span'>, 'children'> & {
+export type RatingProps = Assign<HTMLArkProps<'span'>, {
     index: number;
-    children: (state: RatingContext) => JSX.Element | JSX.Element;
-};
+    children: (state: Accessor<RatingContext>) => JSX.Element | JSX.Element;
+}>;
 export declare const Rating: (props: RatingProps) => JSX.Element;

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;