@ark-ui/solid 0.2.0 → 0.4.0

package/dist/combobox/combobox-content.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxContent = props => {
   const combobox = comboboxContext.useComboboxContext();
-  return web.createComponent(factory.ark.ul, web.mergeProps(() => combobox().contentProps, props));
+  const contentProps = solid.mergeProps(() => combobox().contentProps, props);
+  return web.createComponent(factory.ark.ul, contentProps);
 };
 
 exports.ComboboxContent = ComboboxContent;

package/dist/combobox/combobox-content.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxContent = props => {
   const combobox = useComboboxContext();
-  return createComponent(ark.ul, mergeProps(() => combobox().contentProps, props));
+  const contentProps = mergeProps(() => combobox().contentProps, props);
+  return createComponent(ark.ul, contentProps);
 };
 
 export { ComboboxContent };

package/dist/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxControl = props => {
   const combobox = comboboxContext.useComboboxContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => combobox().controlProps, props));
+  const controlProps = solid.mergeProps(() => combobox().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.ComboboxControl = ComboboxControl;

package/dist/combobox/combobox-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 { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxControl = props => {
   const combobox = useComboboxContext();
-  return createComponent(ark.div, mergeProps(() => combobox().controlProps, props));
+  const controlProps = mergeProps(() => combobox().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { ComboboxControl };

package/dist/combobox/combobox-input.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 comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxInput = props => {
   const combobox = comboboxContext.useComboboxContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => combobox().inputProps, props));
+  const inputProps = solid.mergeProps(() => combobox().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.ComboboxInput = ComboboxInput;

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

package/dist/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxLabel = props => {
   const combobox = comboboxContext.useComboboxContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => combobox().labelProps, props));
+  const labelProps = solid.mergeProps(() => combobox().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.ComboboxLabel = ComboboxLabel;

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

package/dist/combobox/combobox-option.cjs

@@ -3,21 +3,20 @@
 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');
 const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxOption = props => {
-  const [optionProps, {
-    children,
-    ...liProps
-  }] = createSplitProps.createSplitProps()(props, ['count', 'disabled', 'label', 'value', 'index']);
+  const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ['count', 'disabled', 'label', 'value', 'index']);
+  const [childrenProps, restProps] = solidJs.splitProps(localProps, ['children']);
   const combobox = comboboxContext.useComboboxContext();
-  const mergedProps = () => solidJs.mergeProps(combobox().getOptionProps(optionProps), liProps);
+  const mergedProps = solid.mergeProps(() => combobox().getOptionProps(optionProps), restProps);
   return web.createComponent(factory.ark.li, web.mergeProps(mergedProps, {
     get children() {
-      return children ? children : optionProps.label;
+      return childrenProps.children || optionProps.label;
     }
   }));
 };

package/dist/combobox/combobox-option.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 { useComboboxContext } from './combobox-context';
 type OptionProps = Parameters<ReturnType<ReturnType<typeof useComboboxContext>>['getOptionProps']>[0];
 export type ComboboxOptionProps = Assign<HTMLArkProps<'li'>, OptionProps>;

package/dist/combobox/combobox-option.mjs

@@ -1,19 +1,18 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { mergeProps as mergeProps$1 } 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 { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxOption = props => {
-  const [optionProps, {
-    children,
-    ...liProps
-  }] = createSplitProps()(props, ['count', 'disabled', 'label', 'value', 'index']);
+  const [optionProps, localProps] = createSplitProps()(props, ['count', 'disabled', 'label', 'value', 'index']);
+  const [childrenProps, restProps] = splitProps(localProps, ['children']);
   const combobox = useComboboxContext();
-  const mergedProps = () => mergeProps$1(combobox().getOptionProps(optionProps), liProps);
-  return createComponent(ark.li, mergeProps(mergedProps, {
+  const mergedProps = mergeProps(() => combobox().getOptionProps(optionProps), restProps);
+  return createComponent(ark.li, mergeProps$1(mergedProps, {
     get children() {
-      return children ? children : optionProps.label;
+      return childrenProps.children || optionProps.label;
     }
   }));
 };

package/dist/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxPositioner = props => {
   const combobox = comboboxContext.useComboboxContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => combobox().positionerProps, props));
+  const positionProps = solid.mergeProps(() => combobox().positionerProps, props);
+  return web.createComponent(factory.ark.div, positionProps);
 };
 
 exports.ComboboxPositioner = ComboboxPositioner;

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

package/dist/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxTrigger = props => {
   const combobox = comboboxContext.useComboboxContext();
-  const triggerProps = combobox().triggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = solid.mergeProps(() => combobox().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.ComboboxTrigger = ComboboxTrigger;

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

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

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

package/dist/combobox/combobox.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,23 +11,20 @@ const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
 
 const Combobox = props => {
-  const [useComboboxProps, divProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
+  const [useComboboxProps, localProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
   const combobox = useCombobox.useCombobox(useComboboxProps);
+  const rootProps = solid.mergeProps(() => combobox().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, combobox);
   return web.createComponent(comboboxContext.ComboboxProvider, {
     value: combobox,
     get children() {
-      return web.createComponent(ComboboxContextWrapper, divProps);
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
-const ComboboxContextWrapper = props => {
-  const combobox = comboboxContext.useComboboxContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, combobox));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => combobox().rootProps, props, {
-    get children() {
-      return view();
-    }
-  }));
-};
 
 exports.Combobox = Combobox;

package/dist/combobox/combobox.d.ts

@@ -1,11 +1,9 @@
-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 ComboboxContext } from './combobox-context';
 import { type UseComboboxProps } from './use-combobox';
-export type ComboboxProps = Assign<ComboboxContextWrapperProps, UseComboboxProps>;
-export declare const Combobox: (props: ComboboxProps) => JSX.Element;
-type ComboboxContextWrapperProps = Assign<HTMLArkProps<'div'>, {
+export type ComboboxProps = Assign<HTMLArkProps<'div'>, UseComboboxProps & {
     children: JSX.Element | ((context: ComboboxContext) => JSX.Element);
 }>;
-export {};
+export declare const Combobox: (props: ComboboxProps) => JSX.Element;

package/dist/combobox/combobox.mjs

@@ -1,29 +1,26 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
-import { ComboboxProvider, useComboboxContext } from './combobox-context.mjs';
+import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
 
 const Combobox = props => {
-  const [useComboboxProps, divProps] = createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
+  const [useComboboxProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
   const combobox = useCombobox(useComboboxProps);
+  const rootProps = mergeProps(() => combobox().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, combobox);
   return createComponent(ComboboxProvider, {
     value: combobox,
     get children() {
-      return createComponent(ComboboxContextWrapper, divProps);
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
-const ComboboxContextWrapper = props => {
-  const combobox = useComboboxContext();
-  const view = children(() => runIfFn(props.children, combobox));
-  return createComponent(ark.div, mergeProps(() => combobox().rootProps, props, {
-    get children() {
-      return view();
-    }
-  }));
-};
 
 export { Combobox };

package/dist/combobox/use-combobox.cjs

@@ -28,7 +28,7 @@ const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 
 const useCombobox = (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(combobox__namespace.machine(context), { context });
   return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
 };

package/dist/combobox/use-combobox.d.ts

@@ -1,4 +1,4 @@
-import type { OptionData, OptionProps, OptionGroupProps } from '@zag-js/combobox/dist/combobox.types';
+import type { OptionData } from '@zag-js/combobox/dist/combobox.types';
 import type { Accessor, JSX } from 'solid-js';
 import * as combobox from '@zag-js/combobox';
 import { type Optional } from '../types';
@@ -23,11 +23,11 @@ export declare const useCombobox: (props: UseComboboxProps) => Accessor<{
     triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     contentProps: JSX.HTMLAttributes<any>;
     clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionState(props: OptionProps): {
+    getOptionState(props: combobox.OptionProps): {
         disabled: boolean | undefined;
         focused: boolean;
         checked: boolean;
     };
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
+    getOptionProps(props: combobox.OptionProps): JSX.HTMLAttributes<any>;
+    getOptionGroupProps(props: combobox.OptionGroupProps): JSX.HTMLAttributes<any>;
 }>;

package/dist/combobox/use-combobox.mjs

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

package/dist/create-split-props.d.ts

@@ -1 +1,3 @@
-export declare const createSplitProps: <Target extends Record<never, never>>() => <Keys extends (keyof Target)[], Props extends Target = Target>(props: Props, keys: Keys & ([keyof Target] extends [Keys[number]] ? unknown : never)) => [Pick<Props, Extract<Keys & ([keyof Target] extends [Keys[number]] ? unknown : never), readonly (keyof Props)[]>[number]>, Omit<Props, (Keys & ([keyof Target] extends [Keys[number]] ? unknown : never))[number]>];
+type EnsureKeys<ExpectedKeys extends (keyof Target)[], Target> = ExpectedKeys extends (keyof Target)[] ? [keyof Target] extends [ExpectedKeys[number]] ? unknown : `Missing required keys: ${Exclude<keyof Target, ExpectedKeys[number]>}` : never;
+export declare const createSplitProps: <Target extends Record<never, never>>() => <Keys extends (keyof Target)[], Props extends Target = Target>(props: Props, keys: Keys & EnsureKeys<Keys, Target>) => [Pick<Props, Extract<Keys & EnsureKeys<Keys, Target>, readonly (keyof Props)[]>[number]>, Omit<Props, (Keys & EnsureKeys<Keys, Target>)[number]>];
+export {};

package/dist/dialog/dialog-backdrop.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 dialogContext = require('./dialog-context.cjs');
 
 const DialogBackdrop = props => {
   const dialog = dialogContext.useDialogContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => dialog().backdropProps, props));
+  const backdropProps = solid.mergeProps(() => dialog().backdropProps, props);
+  return web.createComponent(factory.ark.div, backdropProps);
 };
 
 exports.DialogBackdrop = DialogBackdrop;

package/dist/dialog/dialog-backdrop.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 { useDialogContext } from './dialog-context.mjs';
 
 const DialogBackdrop = props => {
   const dialog = useDialogContext();
-  return createComponent(ark.div, mergeProps(() => dialog().backdropProps, props));
+  const backdropProps = mergeProps(() => dialog().backdropProps, props);
+  return createComponent(ark.div, backdropProps);
 };
 
 export { DialogBackdrop };

package/dist/dialog/dialog-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 dialogContext = require('./dialog-context.cjs');
 
 const DialogCloseTrigger = props => {
   const dialog = dialogContext.useDialogContext();
-  const triggerProps = dialog().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 triggerProps = solid.mergeProps(() => dialog().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.DialogCloseTrigger = DialogCloseTrigger;

package/dist/dialog/dialog-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 DialogCloseTriggerProps = {
-    children: JSX.Element;
-};
-export declare const DialogCloseTrigger: (props: DialogCloseTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DialogCloseTriggerProps = HTMLArkProps<'button'>;
+export declare const DialogCloseTrigger: (props: DialogCloseTriggerProps) => JSX.Element;

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

package/dist/dialog/dialog-container.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 dialogContext = require('./dialog-context.cjs');
 
 const DialogContainer = props => {
   const dialog = dialogContext.useDialogContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => dialog().containerProps, props));
+  const containerProps = solid.mergeProps(() => dialog().containerProps, props);
+  return web.createComponent(factory.ark.div, containerProps);
 };
 
 exports.DialogContainer = DialogContainer;

package/dist/dialog/dialog-container.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 { useDialogContext } from './dialog-context.mjs';
 
 const DialogContainer = props => {
   const dialog = useDialogContext();
-  return createComponent(ark.div, mergeProps(() => dialog().containerProps, props));
+  const containerProps = mergeProps(() => dialog().containerProps, props);
+  return createComponent(ark.div, containerProps);
 };
 
 export { DialogContainer };

package/dist/dialog/dialog-content.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogContent = props => {
   const dialog = dialogContext.useDialogContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => dialog().contentProps, props));
+  const contentProps = solid.mergeProps(() => dialog().contentProps, props);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.DialogContent = DialogContent;

package/dist/dialog/dialog-content.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogContent = props => {
   const dialog = useDialogContext();
-  return createComponent(ark.div, mergeProps(() => dialog().contentProps, props));
+  const contentProps = mergeProps(() => dialog().contentProps, props);
+  return createComponent(ark.div, contentProps);
 };
 
 export { DialogContent };

package/dist/dialog/dialog-description.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 dialogContext = require('./dialog-context.cjs');
 
 const DialogDescription = props => {
   const dialog = dialogContext.useDialogContext();
-  return web.createComponent(factory.ark.p, web.mergeProps(() => dialog().descriptionProps, props));
+  const descriptionProps = solid.mergeProps(() => dialog().descriptionProps, props);
+  return web.createComponent(factory.ark.p, descriptionProps);
 };
 
 exports.DialogDescription = DialogDescription;