@ark-ui/solid 0.2.0 → 0.3.0

package/dist/menu/menu-option-item.mjs

@@ -1,5 +1,6 @@
-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 { createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
@@ -7,12 +8,16 @@ import { useMenuContext } from './menu-context.mjs';
 
 const MenuOptionItem = props => {
   const menu = useMenuContext();
-  const [optionProps, divProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
-  const view = () => children(() => runIfFn(divProps.children, {
+  const [optionProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
+  const itemProps = mergeProps(() => menu?.().getOptionItemProps(optionProps), localProps);
+  const itemState = createMemo(() => ({
     isActive: menu?.().isOptionChecked(optionProps) ?? false
   }));
-  return createComponent(ark.div, mergeProps(() => menu?.().getOptionItemProps(optionProps), divProps, {
-    children: view
+  const getChildren = () => runIfFn(localProps.children, itemState);
+  return createComponent(ark.div, mergeProps$1(itemProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/menu/menu-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 menuContext = require('./menu-context.cjs');
 
 const MenuPositioner = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().positionerProps, props));
+  const positionerProps = solid.mergeProps(() => menu?.().positionerProps, props);
+  return web.createComponent(factory.ark.div, positionerProps);
 };
 
 exports.MenuPositioner = MenuPositioner;

package/dist/menu/menu-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 { useMenuContext } from './menu-context.mjs';
 
 const MenuPositioner = props => {
   const menu = useMenuContext();
-  return createComponent(ark.div, mergeProps(() => menu?.().positionerProps, props));
+  const positionerProps = mergeProps(() => menu?.().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
 };
 
 export { MenuPositioner };

package/dist/menu/menu-separator.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 menuContext = require('./menu-context.cjs');
 
 const MenuSeparator = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.hr, web.mergeProps(() => menu?.().separatorProps, props));
+  const separatorProps = solid.mergeProps(() => menu?.().separatorProps, props);
+  return web.createComponent(factory.ark.hr, separatorProps);
 };
 
 exports.MenuSeparator = MenuSeparator;

package/dist/menu/menu-separator.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 { useMenuContext } from './menu-context.mjs';
 
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  return createComponent(ark.hr, mergeProps(() => menu?.().separatorProps, props));
+  const separatorProps = mergeProps(() => menu?.().separatorProps, props);
+  return createComponent(ark.hr, separatorProps);
 };
 
 export { MenuSeparator };

package/dist/menu/menu-trigger-item.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 menuContext = require('./menu-context.cjs');
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = menuContext.useMenuTriggerItemContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => getTriggerItemProps?.(), props));
+  const triggerProps = solid.mergeProps(() => getTriggerItemProps?.(), props);
+  return web.createComponent(factory.ark.div, triggerProps);
 };
 
 exports.MenuTriggerItem = MenuTriggerItem;

package/dist/menu/menu-trigger-item.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 { useMenuTriggerItemContext } from './menu-context.mjs';
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = useMenuTriggerItemContext();
-  return createComponent(ark.div, mergeProps(() => getTriggerItemProps?.(), props));
+  const triggerProps = mergeProps(() => getTriggerItemProps?.(), props);
+  return createComponent(ark.div, triggerProps);
 };
 
 export { MenuTriggerItem };

package/dist/menu/menu-trigger.cjs

@@ -2,21 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuTrigger = props => {
   const menu = menuContext.useMenuContext();
-  const getChildren = solidJs.children(() => props.children);
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      const accessor = menu?.()?.triggerProps;
-      web.spread(children, accessor);
-    }
-  });
-  return getChildren();
+  const triggerProps = solid.mergeProps(() => menu?.().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.MenuTrigger = MenuTrigger;

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

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

package/dist/menu/menu-trigger.mjs

@@ -1,18 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useMenuContext } from './menu-context.mjs';
 
 const MenuTrigger = props => {
   const menu = useMenuContext();
-  const getChildren = children(() => props.children);
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      const accessor = menu?.()?.triggerProps;
-      spread(children, accessor);
-    }
-  });
-  return getChildren();
+  const triggerProps = mergeProps(() => menu?.().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { MenuTrigger };

package/dist/menu/menu.cjs

@@ -10,37 +10,37 @@ const menuContext = require('./menu-context.cjs');
 const useMenu = require('./use-menu.cjs');
 
 const Menu = props => {
-  const [menuProps, localProps] = createSplitProps.createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onClose', 'onOpen', 'onSelect', 'onValueChange', 'positioning', 'value']);
+  const [menuParams, restProps] = createSplitProps.createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onClose', 'onOpen', 'onSelect', 'onValueChange', 'positioning', 'value']);
   const parentMenu = menuContext.useMenuContext();
   const parentMachine = menuContext.useMenuMachineContext();
-  const menu = useMenu.useMenu(menuProps);
+  const menu = useMenu.useMenu(menuParams);
   solidJs.createEffect(() => {
     if (!parentMachine) return;
     parentMenu?.().setChild(menu().machine);
     menu().api().setParent(parentMachine());
   });
   solidJs.createEffect(() => {
-    if (!localProps.isOpen) return;
-    localProps.isOpen?.() ? menu().api().open() : menu().api().close();
+    if (!restProps.isOpen) return;
+    restProps.isOpen?.() ? menu().api().open() : menu().api().close();
   });
+  const triggerItemContext = solidJs.createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn.runIfFn(restProps.children, () => ({
+    isOpen: menu?.().api().isOpen,
+    onClose: menu?.().api().close
+  }));
   return web.createComponent(menuContext.MenuTriggerItemProvider, {
-    get value() {
-      return solidJs.createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
-    },
+    value: triggerItemContext,
     get children() {
       return web.createComponent(menuContext.MenuMachineProvider, {
-        value: () => menu().machine,
+        value: machineContext,
         get children() {
           return web.createComponent(menuContext.MenuProvider, {
             get value() {
               return menu().api;
             },
             get children() {
-              return web.createComponent(MenuContextWrapper, {
-                get children() {
-                  return localProps.children;
-                }
-              });
+              return getChildren();
             }
           });
         }
@@ -48,13 +48,5 @@ const Menu = props => {
     }
   });
 };
-const MenuContextWrapper = props => {
-  const menu = menuContext.useMenuContext();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, solidJs.createMemo(() => ({
-    isOpen: menu?.().isOpen,
-    onClose: menu?.().close
-  }))));
-  return web.memo(view);
-};
 
 exports.Menu = Menu;

package/dist/menu/menu.d.ts

@@ -1,5 +1,5 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type Accessor, type JSX } from 'solid-js';
+import type { Assign } from '../types';
 import { type UseMenuProps } from './use-menu';
 export type MenuState = {
     isOpen?: boolean;

package/dist/menu/menu.mjs

@@ -1,42 +1,42 @@
-import { createComponent, memo } from 'solid-js/web';
-import { createEffect, createMemo, children } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+import { createEffect, createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useMenuContext, useMenuMachineContext, MenuTriggerItemProvider, MenuMachineProvider, MenuProvider } from './menu-context.mjs';
 import { useMenu } from './use-menu.mjs';
 
 const Menu = props => {
-  const [menuProps, localProps] = createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onClose', 'onOpen', 'onSelect', 'onValueChange', 'positioning', 'value']);
+  const [menuParams, restProps] = createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onClose', 'onOpen', 'onSelect', 'onValueChange', 'positioning', 'value']);
   const parentMenu = useMenuContext();
   const parentMachine = useMenuMachineContext();
-  const menu = useMenu(menuProps);
+  const menu = useMenu(menuParams);
   createEffect(() => {
     if (!parentMachine) return;
     parentMenu?.().setChild(menu().machine);
     menu().api().setParent(parentMachine());
   });
   createEffect(() => {
-    if (!localProps.isOpen) return;
-    localProps.isOpen?.() ? menu().api().open() : menu().api().close();
+    if (!restProps.isOpen) return;
+    restProps.isOpen?.() ? menu().api().open() : menu().api().close();
   });
+  const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn(restProps.children, () => ({
+    isOpen: menu?.().api().isOpen,
+    onClose: menu?.().api().close
+  }));
   return createComponent(MenuTriggerItemProvider, {
-    get value() {
-      return createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
-    },
+    value: triggerItemContext,
     get children() {
       return createComponent(MenuMachineProvider, {
-        value: () => menu().machine,
+        value: machineContext,
         get children() {
           return createComponent(MenuProvider, {
             get value() {
               return menu().api;
             },
             get children() {
-              return createComponent(MenuContextWrapper, {
-                get children() {
-                  return localProps.children;
-                }
-              });
+              return getChildren();
             }
           });
         }
@@ -44,13 +44,5 @@ const Menu = props => {
     }
   });
 };
-const MenuContextWrapper = props => {
-  const menu = useMenuContext();
-  const view = () => children(() => runIfFn(props.children, createMemo(() => ({
-    isOpen: menu?.().isOpen,
-    onClose: menu?.().close
-  }))));
-  return memo(view);
-};
 
 export { Menu };

package/dist/number-input/number-input-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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputControl = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => numberInput().controlProps, props));
+  const api = numberInputContext.useNumberInputContext();
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.NumberInputControl = NumberInputControl;

package/dist/number-input/number-input-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 { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputControl = props => {
-  const numberInput = useNumberInputContext();
-  return createComponent(ark.div, mergeProps(() => numberInput().controlProps, props));
+  const api = useNumberInputContext();
+  const controlProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { NumberInputControl };

package/dist/number-input/number-input-decrement-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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputDecrementTrigger = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  const triggerProps = numberInput().decrementTriggerProps;
-  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 = numberInputContext.useNumberInputContext();
+  const triggerProps = solid.mergeProps(() => api().decrementTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.NumberInputDecrementTrigger = NumberInputDecrementTrigger;

package/dist/number-input/number-input-decrement-trigger.d.ts

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

package/dist/number-input/number-input-decrement-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 { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputDecrementTrigger = props => {
-  const numberInput = useNumberInputContext();
-  const triggerProps = numberInput().decrementTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useNumberInputContext();
+  const triggerProps = mergeProps(() => api().decrementTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { NumberInputDecrementTrigger };

package/dist/number-input/number-input-field.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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputField = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => numberInput().inputProps, props));
+  const api = numberInputContext.useNumberInputContext();
+  const inputProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.NumberInputField = NumberInputField;

package/dist/number-input/number-input-field.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 { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputField = props => {
-  const numberInput = useNumberInputContext();
-  return createComponent(ark.input, mergeProps(() => numberInput().inputProps, props));
+  const api = useNumberInputContext();
+  const inputProps = mergeProps(() => api().inputProps, props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { NumberInputField };

package/dist/number-input/number-input-increment-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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputIncrementTrigger = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  const triggerProps = numberInput().incrementTriggerProps;
-  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 = numberInputContext.useNumberInputContext();
+  const triggerProps = solid.mergeProps(() => api().incrementTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;

package/dist/number-input/number-input-increment-trigger.d.ts

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

package/dist/number-input/number-input-increment-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 { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputIncrementTrigger = props => {
-  const numberInput = useNumberInputContext();
-  const triggerProps = numberInput().incrementTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useNumberInputContext();
+  const triggerProps = mergeProps(() => api().incrementTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { NumberInputIncrementTrigger };

package/dist/number-input/number-input-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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputLabel = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => numberInput().labelProps, props));
+  const api = numberInputContext.useNumberInputContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.NumberInputLabel = NumberInputLabel;

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

package/dist/number-input/number-input-scrubber.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 numberInputContext = require('./number-input-context.cjs');
 
 const NumberInputScrubber = props => {
-  const numberInput = numberInputContext.useNumberInputContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => numberInput().scrubberProps, props));
+  const api = numberInputContext.useNumberInputContext();
+  const scrubberProps = solid.mergeProps(() => api().scrubberProps, props);
+  return web.createComponent(factory.ark.div, scrubberProps);
 };
 
 exports.NumberInputScrubber = NumberInputScrubber;

package/dist/number-input/number-input-scrubber.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 { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputScrubber = props => {
-  const numberInput = useNumberInputContext();
-  return createComponent(ark.div, mergeProps(() => numberInput().scrubberProps, props));
+  const api = useNumberInputContext();
+  const scrubberProps = mergeProps(() => api().scrubberProps, props);
+  return createComponent(ark.div, scrubberProps);
 };
 
 export { NumberInputScrubber };