@ark-ui/solid 0.2.0 → 0.4.0

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/menu/use-menu.cjs

@@ -28,7 +28,7 @@ const menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
 
 const useMenu = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), { context });
   return solidJs.createMemo(() => ({
     api: () => menu__namespace.connect(state, send, solid.normalizeProps),

package/dist/menu/use-menu.mjs

@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu';
-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 useMenu = (props) => {

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 };

package/dist/number-input/number-input.cjs

@@ -3,18 +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 numberInputContext = require('./number-input-context.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 
 const NumberInput = props => {
-  const [useNumberInputProps, divProps] = createSplitProps.createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'format', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'max', 'maxFractionDigits', 'min', 'minFractionDigits', 'name', 'onBlur', 'onChange', 'onFocus', 'onInvalid', 'parse', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'validateCharacter', 'value']);
-  const pinInput = useNumberInput.useNumberInput(useNumberInputProps);
+  const [useNumberInputProps, localProps] = createSplitProps.createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'format', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'max', 'maxFractionDigits', 'min', 'minFractionDigits', 'name', 'onBlur', 'onChange', 'onFocus', 'onInvalid', 'parse', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'validateCharacter', 'value']);
+  const api = useNumberInput.useNumberInput(useNumberInputProps);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(numberInputContext.NumberInputProvider, {
-    value: pinInput,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => pinInput().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/number-input/number-input.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 UseNumberInputProps } from './use-number-input';
 export type NumberInputProps = Assign<HTMLArkProps<'div'>, UseNumberInputProps>;
 export declare const NumberInput: (props: NumberInputProps) => JSX.Element;

package/dist/number-input/number-input.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 { NumberInputProvider } from './number-input-context.mjs';
 import { useNumberInput } from './use-number-input.mjs';
 
 const NumberInput = props => {
-  const [useNumberInputProps, divProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'format', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'max', 'maxFractionDigits', 'min', 'minFractionDigits', 'name', 'onBlur', 'onChange', 'onFocus', 'onInvalid', 'parse', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'validateCharacter', 'value']);
-  const pinInput = useNumberInput(useNumberInputProps);
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'format', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'max', 'maxFractionDigits', 'min', 'minFractionDigits', 'name', 'onBlur', 'onChange', 'onFocus', 'onInvalid', 'parse', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'validateCharacter', 'value']);
+  const api = useNumberInput(useNumberInputProps);
+  const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(NumberInputProvider, {
-    value: pinInput,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => pinInput().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/number-input/use-number-input.cjs

@@ -28,7 +28,7 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
 
 const useNumberInput = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send] = solid.useMachine(numberInput__namespace.machine(context), { context });
   return solidJs.createMemo(() => numberInput__namespace.connect(state, send, solid.normalizeProps));
 };

package/dist/number-input/use-number-input.mjs

@@ -1,6 +1,6 @@
 import * as numberInput from '@zag-js/number-input';
-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 useNumberInput = (props) => {

package/dist/pagination/index.d.ts

@@ -1,6 +1,7 @@
 export { Pagination, type PaginationProps } from './pagination';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationList, type PaginationListProps } from './pagination-list';
+export { PaginationListItem, type PaginationListItemProps } from './pagination-list-item';
 export { PaginationNextPageTrigger, type PaginationNextPageTriggerProps, } from './pagination-next-page-trigger';
 export { PaginationPageTrigger, type PaginationPageTriggerProps } from './pagination-page-trigger';
 export { PaginationPrevPageTrigger, type PaginationPrevPageTriggerProps, } from './pagination-prev-page-trigger';

package/dist/pagination/pagination-context.d.ts

@@ -1,4 +1,4 @@
-import type { PaginationRange } from '@zag-js/pagination/dist/pagination.types';
+import type { PaginationRange, EllipsisProps, PageTriggerProps } from '@zag-js/pagination/dist/pagination.types';
 import type { Accessor, JSX } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UsePaginationReturn } from './use-pagination';
@@ -20,13 +20,8 @@ export declare const PaginationProvider: ContextProviderComponent<Accessor<{
     setPageSize(size: number): void;
     setPage(page: number): void;
     rootProps: JSX.HTMLAttributes<any>;
-    getEllipsisProps(props: {
-        index: number;
-    }): JSX.HTMLAttributes<any>;
-    getPageTriggerProps(page: {
-        type: "page";
-        value: number;
-    }): JSX.HTMLAttributes<any>;
+    getEllipsisProps(props: EllipsisProps): JSX.HTMLAttributes<any>;
+    getPageTriggerProps(page: PageTriggerProps): JSX.HTMLAttributes<any>;
     prevPageTriggerProps: JSX.HTMLAttributes<any>;
     nextPageTriggerProps: JSX.HTMLAttributes<any>;
 }>>, usePaginationContext: () => Accessor<{
@@ -46,13 +41,8 @@ export declare const PaginationProvider: ContextProviderComponent<Accessor<{
     setPageSize(size: number): void;
     setPage(page: number): void;
     rootProps: JSX.HTMLAttributes<any>;
-    getEllipsisProps(props: {
-        index: number;
-    }): JSX.HTMLAttributes<any>;
-    getPageTriggerProps(page: {
-        type: "page";
-        value: number;
-    }): JSX.HTMLAttributes<any>;
+    getEllipsisProps(props: EllipsisProps): JSX.HTMLAttributes<any>;
+    getPageTriggerProps(page: PageTriggerProps): JSX.HTMLAttributes<any>;
     prevPageTriggerProps: JSX.HTMLAttributes<any>;
     nextPageTriggerProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/pagination/pagination-ellipsis.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 paginationContext = require('./pagination-context.cjs');
 
 const PaginationEllipsis = props => {
-  const [ellipsisProps, spanProps] = createSplitProps.createSplitProps()(props, ['index']);
-  const pagination = paginationContext.usePaginationContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => pagination().getEllipsisProps(ellipsisProps), spanProps));
+  const [ellipsisParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const api = paginationContext.usePaginationContext();
+  const ellipsisProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisParams), restProps);
+  return web.createComponent(factory.ark.div, ellipsisProps);
 };
 
 exports.PaginationEllipsis = PaginationEllipsis;

package/dist/pagination/pagination-ellipsis.d.ts

@@ -1,9 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
+import type { EllipsisProps } from '@zag-js/pagination/dist/pagination.types';
 import { type HTMLArkProps } from '../factory';
-type PaginationEllipsisParams = {
-    index: number;
-};
-export type PaginationEllipsisProps = Assign<HTMLArkProps<'span'>, PaginationEllipsisParams>;
+import type { Assign } from '../types';
+export type PaginationEllipsisProps = Assign<HTMLArkProps<'div'>, EllipsisProps>;
 export declare const PaginationEllipsis: (props: PaginationEllipsisProps) => JSX.Element;
-export {};

package/dist/pagination/pagination-ellipsis.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 { usePaginationContext } from './pagination-context.mjs';
 
 const PaginationEllipsis = props => {
-  const [ellipsisProps, spanProps] = createSplitProps()(props, ['index']);
-  const pagination = usePaginationContext();
-  return createComponent(ark.span, mergeProps(() => pagination().getEllipsisProps(ellipsisProps), spanProps));
+  const [ellipsisParams, restProps] = createSplitProps()(props, ['index']);
+  const api = usePaginationContext();
+  const ellipsisProps = mergeProps(() => api().getEllipsisProps(ellipsisParams), restProps);
+  return createComponent(ark.div, ellipsisProps);
 };
 
 export { PaginationEllipsis };