@ark-ui/solid 0.2.0 → 0.3.0

package/dist/tags-input/tag.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';
 export type TagProps = {
     index: string | number;
     value: string;

package/dist/tags-input/tag.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 { useTagsInputContext } from './tags-input-context.mjs';
 
 const Tag = props => {
-  const [tagProps, divProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = useTagsInputContext();
-  return createComponent(ark.div, mergeProps(() => tagsInput().getTagProps(tagProps), divProps));
+  const [tagParams, restProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = useTagsInputContext();
+  const tagProps = mergeProps(() => api().getTagProps(tagParams), restProps);
+  return createComponent(ark.div, tagProps);
 };
 
 export { Tag };

package/dist/tags-input/tags-input-clear-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 tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputClearTrigger = props => {
   const tagsInput = tagsInputContext.useTagsInputContext();
-  const triggerProps = tagsInput().clearTriggerProps;
-  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 triggerProps = solid.mergeProps(() => tagsInput().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.TagsInputClearTrigger = TagsInputClearTrigger;

package/dist/tags-input/tags-input-clear-trigger.d.ts

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

package/dist/tags-input/tags-input-clear-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 { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputClearTrigger = props => {
   const tagsInput = useTagsInputContext();
-  const triggerProps = tagsInput().clearTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = mergeProps(() => tagsInput().clearTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { TagsInputClearTrigger };

package/dist/tags-input/tags-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 tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputControl = props => {
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tagsInput().controlProps, props));
+  const api = tagsInputContext.useTagsInputContext();
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.TagsInputControl = TagsInputControl;

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

package/dist/tags-input/tags-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 tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputField = props => {
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => tagsInput().inputProps, props));
+  const api = tagsInputContext.useTagsInputContext();
+  const inputProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.TagsInputField = TagsInputField;

package/dist/tags-input/tags-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 { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputField = props => {
-  const tagsInput = useTagsInputContext();
-  return createComponent(ark.input, mergeProps(() => tagsInput().inputProps, props));
+  const api = useTagsInputContext();
+  const inputProps = mergeProps(() => api().inputProps, props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { TagsInputField };

package/dist/tags-input/tags-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 tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputLabel = props => {
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => tagsInput().labelProps, props));
+  const api = tagsInputContext.useTagsInputContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.TagsInputLabel = TagsInputLabel;

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

package/dist/tags-input/tags-input.cjs

@@ -3,7 +3,7 @@
 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');
@@ -11,14 +11,17 @@ const tagsInputContext = require('./tags-input-context.cjs');
 const useTagsInput = require('./use-tags-input.cjs');
 
 const TagsInput = props => {
-  const [useTagsInputProps, divProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
-  const tagsInput = useTagsInput.useTagsInput(useTagsInputProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, tagsInput()));
+  const [tagsInputParams, restProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput.useTagsInput(tagsInputParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(tagsInputContext.TagsInputProvider, {
-    value: tagsInput,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => tagsInput().rootProps, divProps, {
-        children: view
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/tags-input/tags-input.d.ts

@@ -1,9 +1,9 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
 export type TagsInputChildren = {
-    children: (pages: ReturnType<UseTagsInputReturn>) => JSX.Element | JSX.Element;
+    children: (pages: UseTagsInputReturn) => JSX.Element | JSX.Element;
 };
-export type TagsInputProps = Assign<Assign<HTMLArkProps<'div'>, UseTagsInputProps>, TagsInputChildren>;
+export type TagsInputProps = Assign<HTMLArkProps<'div'>, UseTagsInputProps & TagsInputChildren>;
 export declare const TagsInput: (props: TagsInputProps) => JSX.Element;

package/dist/tags-input/tags-input.mjs

@@ -1,5 +1,5 @@
-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';
@@ -7,14 +7,17 @@ import { TagsInputProvider } from './tags-input-context.mjs';
 import { useTagsInput } from './use-tags-input.mjs';
 
 const TagsInput = props => {
-  const [useTagsInputProps, divProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
-  const tagsInput = useTagsInput(useTagsInputProps);
-  const view = () => children(() => runIfFn(divProps.children, tagsInput()));
+  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(tagsInputParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(TagsInputProvider, {
-    value: tagsInput,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => tagsInput().rootProps, divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/toast/toast-close-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 toastItemContext = require('./toast-item-context.cjs');
 
 const ToastCloseTrigger = props => {
-  const toast = toastItemContext.useToastItemContext();
-  const triggerProps = toast().closeTriggerProps;
-  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 = toastItemContext.useToastItemContext();
+  const triggerProps = solid.mergeProps(() => api().closeTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.ToastCloseTrigger = ToastCloseTrigger;

package/dist/toast/toast-close-trigger.d.ts

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

package/dist/toast/toast-close-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 { useToastItemContext } from './toast-item-context.mjs';
 
 const ToastCloseTrigger = props => {
-  const toast = useToastItemContext();
-  const triggerProps = toast().closeTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useToastItemContext();
+  const triggerProps = mergeProps(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { ToastCloseTrigger };

package/dist/toast/toast-description.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 factory = require('../factory.cjs');
 const toastItemContext = require('./toast-item-context.cjs');
 
 const ToastDescription = props => {
-  const toast = toastItemContext.useToastItemContext();
-  return web.createComponent(factory.ark.p, web.mergeProps(() => toast().descriptionProps, props, {
+  const api = toastItemContext.useToastItemContext();
+  const descriptionProps = solid.mergeProps(() => api().descriptionProps, props);
+  return web.createComponent(factory.ark.p, web.mergeProps(descriptionProps, {
     get children() {
-      return toast().description;
+      return api().description;
     }
   }));
 };

package/dist/toast/toast-description.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useToastItemContext } from './toast-item-context.mjs';
 
 const ToastDescription = props => {
-  const toast = useToastItemContext();
-  return createComponent(ark.p, mergeProps(() => toast().descriptionProps, props, {
+  const api = useToastItemContext();
+  const descriptionProps = mergeProps(() => api().descriptionProps, props);
+  return createComponent(ark.p, mergeProps$1(descriptionProps, {
     get children() {
-      return toast().description;
+      return api().description;
     }
   }));
 };

package/dist/toast/toast-group.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');
@@ -10,14 +11,15 @@ const runIfFn = require('../run-if-fn.cjs');
 const toastProvider = require('./toast-provider.cjs');
 
 const ToastGroup = props => {
-  const [toastGroupParams, divProps] = createSplitProps.createSplitProps()(props, ['placement', 'children']);
+  const [childrenProps, localProps] = solidJs.splitProps(props, ['children']);
+  const [groupParams, restProps] = createSplitProps.createSplitProps()(localProps, ['placement', 'label']);
   const toast = toastProvider.useToast();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(toastGroupParams.children, toast().toastsByPlacement[toastGroupParams.placement] ?? []));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => toast().getGroupProps({
-    placement: toastGroupParams.placement
-  }), divProps, {
+  const toastsByPlacement = solidJs.createMemo(() => toast().toastsByPlacement[groupParams.placement] ?? []);
+  const groupProps = solid.mergeProps(() => toast().getGroupProps(groupParams), restProps);
+  const getChildren = () => runIfFn.runIfFn(childrenProps.children, toastsByPlacement);
+  return web.createComponent(factory.ark.div, web.mergeProps(groupProps, {
     get children() {
-      return view;
+      return getChildren();
     }
   }));
 };

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

@@ -1,11 +1,13 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type Placement, type Service } from '@zag-js/toast';
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 type ToastGroupParams = {
     placement: Placement;
-    children: JSX.Element | ((toasts: Service[]) => JSX.Element);
+    label?: string;
 };
-export type ToastGroupProps = Assign<HTMLArkProps<'div'>, ToastGroupParams>;
+export type ToastGroupProps = Assign<HTMLArkProps<'div'>, ToastGroupParams & {
+    children: JSX.Element | ((toasts: Accessor<Service[]>) => JSX.Element);
+}>;
 export declare const ToastGroup: (props: ToastGroupProps) => JSX.Element;
 export {};

package/dist/toast/toast-group.mjs

@@ -1,19 +1,21 @@
-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 { splitProps, createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useToast } from './toast-provider.mjs';
 
 const ToastGroup = props => {
-  const [toastGroupParams, divProps] = createSplitProps()(props, ['placement', 'children']);
+  const [childrenProps, localProps] = splitProps(props, ['children']);
+  const [groupParams, restProps] = createSplitProps()(localProps, ['placement', 'label']);
   const toast = useToast();
-  const view = () => children(() => runIfFn(toastGroupParams.children, toast().toastsByPlacement[toastGroupParams.placement] ?? []));
-  return createComponent(ark.div, mergeProps(() => toast().getGroupProps({
-    placement: toastGroupParams.placement
-  }), divProps, {
+  const toastsByPlacement = createMemo(() => toast().toastsByPlacement[groupParams.placement] ?? []);
+  const groupProps = mergeProps(() => toast().getGroupProps(groupParams), restProps);
+  const getChildren = () => runIfFn(childrenProps.children, toastsByPlacement);
+  return createComponent(ark.div, mergeProps$1(groupProps, {
     get children() {
-      return view;
+      return getChildren();
     }
   }));
 };

package/dist/toast/toast-placements.cjs

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const web = require('solid-js/web');
 const solidJs = require('solid-js');
 const runIfFn = require('../run-if-fn.cjs');
 const toastProvider = require('./toast-provider.cjs');
 
 const ToastPlacements = props => {
   const toast = toastProvider.useToast();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, Object.keys(toast().toastsByPlacement)));
-  return view;
+  const placements = solidJs.createMemo(() => Object.keys(toast().toastsByPlacement));
+  const getChildren = () => runIfFn.runIfFn(props.children, placements);
+  return web.memo(getChildren);
 };
 
 exports.ToastPlacements = ToastPlacements;

package/dist/toast/toast-placements.d.ts

@@ -1,6 +1,6 @@
 import { type Placement } from '@zag-js/toast';
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 export type ToastPlacementsProps = {
-    children: (placements: Placement[]) => JSX.Element;
+    children: (placements: Accessor<Placement[]>) => JSX.Element;
 };
 export declare const ToastPlacements: (props: ToastPlacementsProps) => JSX.Element;

package/dist/toast/toast-placements.mjs

@@ -1,11 +1,13 @@
-import { children } from 'solid-js';
+import { memo } from 'solid-js/web';
+import { createMemo } from 'solid-js';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useToast } from './toast-provider.mjs';
 
 const ToastPlacements = props => {
   const toast = useToast();
-  const view = () => children(() => runIfFn(props.children, Object.keys(toast().toastsByPlacement)));
-  return view;
+  const placements = createMemo(() => Object.keys(toast().toastsByPlacement));
+  const getChildren = () => runIfFn(props.children, placements);
+  return memo(getChildren);
 };
 
 export { ToastPlacements };

package/dist/toast/toast-provider.cjs

@@ -31,7 +31,7 @@ const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
 
 const [ToastContextProvider, useToast] = createContext.createContext();
 const ToastProvider = props => {
-  const [toastProviderParams, machineProps] = createSplitProps.createSplitProps()(props, ['children']);
+  const [childrenProps, machineProps] = createSplitProps.createSplitProps()(props, ['children']);
   const getRootNode = environmentContext.useEnvironmentContext();
   const context = solidJs.mergeProps({
     id: solidJs.createUniqueId(),
@@ -42,7 +42,7 @@ const ToastProvider = props => {
   return web.createComponent(ToastContextProvider, {
     value: api,
     get children() {
-      return toastProviderParams.children;
+      return childrenProps.children;
     }
   });
 };

package/dist/toast/toast-provider.mjs

@@ -8,7 +8,7 @@ import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const [ToastContextProvider, useToast] = createContext();
 const ToastProvider = props => {
-  const [toastProviderParams, machineProps] = createSplitProps()(props, ['children']);
+  const [childrenProps, machineProps] = createSplitProps()(props, ['children']);
   const getRootNode = useEnvironmentContext();
   const context = mergeProps({
     id: createUniqueId(),
@@ -19,7 +19,7 @@ const ToastProvider = props => {
   return createComponent(ToastContextProvider, {
     value: api,
     get children() {
-      return toastProviderParams.children;
+      return childrenProps.children;
     }
   });
 };

package/dist/toast/toast-title.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 toastItemContext = require('./toast-item-context.cjs');
 
 const ToastTitle = props => {
   const toast = toastItemContext.useToastItemContext();
-  return web.createComponent(factory.ark.h3, web.mergeProps(() => toast().titleProps, props, {
+  const titleProps = solid.mergeProps(() => toast().titleProps, props);
+  return web.createComponent(factory.ark.h3, web.mergeProps(titleProps, {
     get children() {
       return toast().title;
     }

package/dist/toast/toast-title.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useToastItemContext } from './toast-item-context.mjs';
 
 const ToastTitle = props => {
   const toast = useToastItemContext();
-  return createComponent(ark.h3, mergeProps(() => toast().titleProps, props, {
+  const titleProps = mergeProps(() => toast().titleProps, props);
+  return createComponent(ark.h3, mergeProps$1(titleProps, {
     get children() {
       return toast().title;
     }

package/dist/toast/toast.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 toastItemContext = require('./toast-item-context.cjs');
 const useToastItem = require('./use-toast-item.cjs');
 
 const Toast = props => {
-  const [useToastItemProps, divProps] = createSplitProps.createSplitProps()(props, ['toast']);
-  const toast = useToastItem.useToastItem(useToastItemProps);
+  const [toastParams, localProps] = createSplitProps.createSplitProps()(props, ['toast']);
+  const api = useToastItem.useToastItem(toastParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(toastItemContext.ToastItemProvider, {
-    value: toast,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => toast().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/toast/toast.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 UseToastItemProps } from './use-toast-item';
 export type ToastProps = Assign<HTMLArkProps<'div'>, UseToastItemProps>;
 export declare const Toast: (props: ToastProps) => JSX.Element;