@ark-ui/solid 0.1.0 → 0.3.0

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

package/dist/pagination/pagination-list-item.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const pagination_anatomy = require('./pagination.anatomy.cjs');
+
+const PaginationListItem = props => web.createComponent(factory.ark.li, web.mergeProps(() => pagination_anatomy.parts.listItem.attrs, props));
+
+exports.PaginationListItem = PaginationListItem;

package/dist/pagination/pagination-list-item.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type PaginationListItemProps = HTMLArkProps<'li'>;
+export declare const PaginationListItem: (props: PaginationListItemProps) => JSX.Element;

package/dist/pagination/pagination-list-item.mjs

@@ -0,0 +1,7 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { parts } from './pagination.anatomy.mjs';
+
+const PaginationListItem = props => createComponent(ark.li, mergeProps(() => parts.listItem.attrs, props));
+
+export { PaginationListItem };

package/dist/pagination/pagination-list.cjs

@@ -4,7 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
 const factory = require('../factory.cjs');
+const pagination_anatomy = require('./pagination.anatomy.cjs');
 
-const PaginationList = props => web.createComponent(factory.ark.ul, props);
+const PaginationList = props => web.createComponent(factory.ark.ul, web.mergeProps(() => pagination_anatomy.parts.list.attrs, props));
 
 exports.PaginationList = PaginationList;

package/dist/pagination/pagination-list.mjs

@@ -1,6 +1,7 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps } from 'solid-js/web';
 import { ark } from '../factory.mjs';
+import { parts } from './pagination.anatomy.mjs';
 
-const PaginationList = props => createComponent(ark.ul, props);
+const PaginationList = props => createComponent(ark.ul, mergeProps(() => parts.list.attrs, props));
 
 export { PaginationList };

package/dist/pagination/pagination-page-trigger.d.ts

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

package/dist/pagination/pagination-prev-page-trigger.cjs

@@ -8,12 +8,12 @@ const factory = require('../factory.cjs');
 const paginationContext = require('./pagination-context.cjs');
 
 const PaginationPrevPageTrigger = props => {
-  const pagination = paginationContext.usePaginationContext();
+  const api = paginationContext.usePaginationContext();
   const getChildren = solidJs.children(() => props.children);
   solidJs.createEffect(() => {
     const children = getChildren();
     if (children instanceof HTMLElement) {
-      web.spread(children, pagination().prevPageTriggerProps);
+      web.spread(children, api().prevPageTriggerProps);
     }
   });
   return web.createComponent(factory.ark.li, web.mergeProps(props, {

package/dist/pagination/pagination-prev-page-trigger.mjs

@@ -4,12 +4,12 @@ import { ark } from '../factory.mjs';
 import { usePaginationContext } from './pagination-context.mjs';
 
 const PaginationPrevPageTrigger = props => {
-  const pagination = usePaginationContext();
+  const api = usePaginationContext();
   const getChildren = children(() => props.children);
   createEffect(() => {
     const children = getChildren();
     if (children instanceof HTMLElement) {
-      spread(children, pagination().prevPageTriggerProps);
+      spread(children, api().prevPageTriggerProps);
     }
   });
   return createComponent(ark.li, mergeProps(props, {

package/dist/pagination/pagination.anatomy.cjs

@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const pagination = require('@zag-js/pagination');
 
-const paginationAnatomy = pagination.anatomy.extendWith("list");
+const paginationAnatomy = pagination.anatomy.extendWith("list", "listItem");
+const parts = paginationAnatomy.build();
 
 exports.paginationAnatomy = paginationAnatomy;
+exports.parts = parts;

package/dist/pagination/pagination.anatomy.d.ts

@@ -1,2 +1,3 @@
-import type { AnatomyInstance } from '@zag-js/anatomy/dist/create-anatomy';
-export declare const paginationAnatomy: AnatomyInstance<"ellipsis" | "list" | "root" | "pageTrigger" | "prevPageTrigger" | "nextPageTrigger">;
+import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy/dist/create-anatomy';
+export declare const paginationAnatomy: AnatomyInstance<"ellipsis" | "list" | "root" | "pageTrigger" | "prevPageTrigger" | "nextPageTrigger" | "listItem">;
+export declare const parts: Record<"ellipsis" | "list" | "root" | "pageTrigger" | "prevPageTrigger" | "nextPageTrigger" | "listItem", AnatomyPart>;

package/dist/pagination/pagination.anatomy.mjs

@@ -1,5 +1,6 @@
 import { anatomy } from '@zag-js/pagination';
 
-const paginationAnatomy = anatomy.extendWith("list");
+const paginationAnatomy = anatomy.extendWith("list", "listItem");
+const parts = paginationAnatomy.build();
 
-export { paginationAnatomy };
+export { paginationAnatomy, parts };

package/dist/pagination/pagination.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
@@ -11,16 +12,17 @@ const paginationContext = require('./pagination-context.cjs');
 const usePagination = require('./use-pagination.cjs');
 
 const Pagination = props => {
-  const [paginationProps, restProps] = createSplitProps.createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations']);
-  const [local, navProps] = solidJs.splitProps(restProps, ['children']);
-  const pagination = usePagination.usePagination(paginationProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(local.children, pagination()));
+  const [paginationParams, restProps] = createSplitProps.createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
+  const api = usePagination.usePagination(paginationParams);
+  const getChildren = () => runIfFn.runIfFn(childrenProps.children, api);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(paginationContext.PaginationProvider, {
-    value: pagination,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.nav, web.mergeProps(() => pagination().rootProps, navProps, {
+      return web.createComponent(factory.ark.nav, web.mergeProps(rootProps, {
         get children() {
-          return view();
+          return getChildren();
         }
       }));
     }

package/dist/pagination/pagination.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 UsePaginationProps, type UsePaginationReturn } from './use-pagination';
-export type PaginationProps = Assign<Assign<HTMLArkProps<'nav'>, UsePaginationProps>, {
-    children: JSX.Element | ((pages: ReturnType<UsePaginationReturn>) => JSX.Element);
+export type PaginationProps = Assign<HTMLArkProps<'nav'>, UsePaginationProps & {
+    children: JSX.Element | ((pages: UsePaginationReturn) => JSX.Element);
 }>;
 export declare const Pagination: (props: PaginationProps) => JSX.Element;

package/dist/pagination/pagination.mjs

@@ -1,5 +1,6 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { splitProps, children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
@@ -7,16 +8,17 @@ import { PaginationProvider } from './pagination-context.mjs';
 import { usePagination } from './use-pagination.mjs';
 
 const Pagination = props => {
-  const [paginationProps, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations']);
-  const [local, navProps] = splitProps(restProps, ['children']);
-  const pagination = usePagination(paginationProps);
-  const view = () => children(() => runIfFn(local.children, pagination()));
+  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [childrenProps, localProps] = splitProps(restProps, ['children']);
+  const api = usePagination(paginationParams);
+  const getChildren = () => runIfFn(childrenProps.children, api);
+  const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(PaginationProvider, {
-    value: pagination,
+    value: api,
     get children() {
-      return createComponent(ark.nav, mergeProps(() => pagination().rootProps, navProps, {
+      return createComponent(ark.nav, mergeProps$1(rootProps, {
         get children() {
-          return view();
+          return getChildren();
         }
       }));
     }

package/dist/pagination/use-pagination.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 * as pagination from '@zag-js/pagination';
 import { type Optional } from '../types';
@@ -20,13 +20,8 @@ export declare const usePagination: (props: UsePaginationProps) => 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/pin-input/pin-input-control.cjs

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`, 1);
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const PinInputControl = props => {
-  const pinInput = pinInputContext.usePinInputContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => pinInput().controlProps, props, {
+  const api = pinInputContext.usePinInputContext();
+  const [childrenProps, restProps] = solidJs.splitProps(props, ['children']);
+  const controlProps = solid.mergeProps(() => api().controlProps, restProps);
+  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
     get children() {
-      return [web.memo(() => props.children), (() => {
-        const _el$ = _tmpl$.cloneNode(true);
-        web.spread(_el$, web.mergeProps(() => pinInput().hiddenInputProps), false, false);
+      return [web.memo(() => childrenProps.children), (() => {
+        const _el$ = _tmpl$();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
     }

package/dist/pin-input/pin-input-control.mjs

@@ -1,15 +1,19 @@
-import { createComponent, mergeProps, memo, spread, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, memo, spread, template } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`, 1);
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInputControl = props => {
-  const pinInput = usePinInputContext();
-  return createComponent(ark.div, mergeProps(() => pinInput().controlProps, props, {
+  const api = usePinInputContext();
+  const [childrenProps, restProps] = splitProps(props, ['children']);
+  const controlProps = mergeProps(() => api().controlProps, restProps);
+  return createComponent(ark.div, mergeProps$1(controlProps, {
     get children() {
-      return [memo(() => props.children), (() => {
-        const _el$ = _tmpl$.cloneNode(true);
-        spread(_el$, mergeProps(() => pinInput().hiddenInputProps), false, false);
+      return [memo(() => childrenProps.children), (() => {
+        const _el$ = _tmpl$();
+        spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
     }