@ark-ui/solid 0.2.0 → 0.4.0

package/dist/index.mjs

@@ -5,6 +5,14 @@ export { AccordionIcon } from './accordion/accordion-icon.mjs';
 export { AccordionItem } from './accordion/accordion-item.mjs';
 export { AccordionTrigger } from './accordion/accordion-trigger.mjs';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { Carousel } from './carousel/carousel.mjs';
+export { CarouselControl } from './carousel/carousel-control.mjs';
+export { CarouselNextSlideTrigger } from './carousel/carousel-next-slide-trigger.mjs';
+export { CarouselPrevSlideTrigger } from './carousel/carousel-prev-slide-trigger.mjs';
+export { CarouselSlide } from './carousel/carousel-slide.mjs';
+export { CarouselSlideGroup } from './carousel/carousel-slide-group.mjs';
+export { CarouselViewport } from './carousel/carousel-viewport.mjs';
+export { carouselAnatomy } from './carousel/carousel.anatomy.mjs';
 export { Checkbox } from './checkbox/checkbox.mjs';
 export { CheckboxControl } from './checkbox/checkbox-control.mjs';
 export { CheckboxInput } from './checkbox/checkbox-input.mjs';
@@ -72,6 +80,7 @@ export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { Pagination } from './pagination/pagination.mjs';
 export { PaginationEllipsis } from './pagination/pagination-ellipsis.mjs';
 export { PaginationList } from './pagination/pagination-list.mjs';
+export { PaginationListItem } from './pagination/pagination-list-item.mjs';
 export { PaginationNextPageTrigger } from './pagination/pagination-next-page-trigger.mjs';
 export { PaginationPageTrigger } from './pagination/pagination-page-trigger.mjs';
 export { PaginationPrevPageTrigger } from './pagination/pagination-prev-page-trigger.mjs';
@@ -139,6 +148,12 @@ export { Splitter } from './splitter/splitter.mjs';
 export { SplitterPanel } from './splitter/splitter-panel.mjs';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
+export { Switch } from './switch/switch.mjs';
+export { SwitchControl } from './switch/switch-control.mjs';
+export { SwitchInput } from './switch/switch-input.mjs';
+export { SwitchLabel } from './switch/switch-label.mjs';
+export { SwitchThumb } from './switch/switch-thumb.mjs';
+export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { TabContent } from './tabs/tab-content.mjs';
 export { TabIndicator } from './tabs/tab-indicator.mjs';
 export { TabList } from './tabs/tab-list.mjs';

package/dist/menu/menu-arrow-tip.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuArrowTip = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().arrowTipProps, props));
+  const arrowTipProps = solid.mergeProps(() => menu?.().arrowTipProps, props);
+  return web.createComponent(factory.ark.div, arrowTipProps);
 };
 
 exports.MenuArrowTip = MenuArrowTip;

package/dist/menu/menu-arrow-tip.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useMenuContext } from './menu-context.mjs';
 
 const MenuArrowTip = props => {
   const menu = useMenuContext();
-  return createComponent(ark.div, mergeProps(() => menu?.().arrowTipProps, props));
+  const arrowTipProps = mergeProps(() => menu?.().arrowTipProps, props);
+  return createComponent(ark.div, arrowTipProps);
 };
 
 export { MenuArrowTip };

package/dist/menu/menu-arrow.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuArrow = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().arrowProps, props));
+  const arrowProps = solid.mergeProps(() => menu?.().arrowProps, props);
+  return web.createComponent(factory.ark.div, arrowProps);
 };
 
 exports.MenuArrow = MenuArrow;

package/dist/menu/menu-arrow.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useMenuContext } from './menu-context.mjs';
 
 const MenuArrow = props => {
   const menu = useMenuContext();
-  return createComponent(ark.div, mergeProps(() => menu?.().arrowProps, props));
+  const arrowProps = mergeProps(() => menu?.().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
 };
 
 export { MenuArrow };

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

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

package/dist/menu/menu-context-trigger.cjs

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

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

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

package/dist/menu/menu-context-trigger.mjs

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

package/dist/menu/menu-item-group-label.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 menuContext = require('./menu-context.cjs');
 
 const MenuItemGroupLabel = props => {
   const menu = menuContext.useMenuContext();
-  const [itemGroupLabelProps, labelProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
-  return web.createComponent(factory.ark.label, web.mergeProps(() => menu?.()?.getItemGroupLabelProps(itemGroupLabelProps), labelProps));
+  const [itemGroupLabelProps, localProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
+  const labelProps = solid.mergeProps(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.MenuItemGroupLabel = MenuItemGroupLabel;

package/dist/menu/menu-item-group-label.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';
 type MenuItemGroupLabelParams = {
     htmlFor: string;
 };

package/dist/menu/menu-item-group-label.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 { useMenuContext } from './menu-context.mjs';
 
 const MenuItemGroupLabel = props => {
   const menu = useMenuContext();
-  const [itemGroupLabelProps, labelProps] = createSplitProps()(props, ['htmlFor']);
-  return createComponent(ark.label, mergeProps(() => menu?.()?.getItemGroupLabelProps(itemGroupLabelProps), labelProps));
+  const [itemGroupLabelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const labelProps = mergeProps(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
+  return createComponent(ark.label, labelProps);
 };
 
 export { MenuItemGroupLabel };

package/dist/menu/menu-item-group.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 menuContext = require('./menu-context.cjs');
 
 const MenuItemGroup = props => {
   const menu = menuContext.useMenuContext();
-  const [itemGroupProps, divProps] = createSplitProps.createSplitProps()(props, ['id']);
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.()?.getItemGroupProps(itemGroupProps), divProps));
+  const [itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ['id']);
+  const groupProps = solid.mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  return web.createComponent(factory.ark.div, groupProps);
 };
 
 exports.MenuItemGroup = MenuItemGroup;

package/dist/menu/menu-item-group.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 UseMenuReturn } from './use-menu';
 type MenuItemGroupParams = Parameters<ReturnType<ReturnType<UseMenuReturn>['api']>['getItemGroupProps']>[0];
 export type MenuItemGroupProps = Assign<HTMLArkProps<'div'>, MenuItemGroupParams>;

package/dist/menu/menu-item-group.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 { useMenuContext } from './menu-context.mjs';
 
 const MenuItemGroup = props => {
   const menu = useMenuContext();
-  const [itemGroupProps, divProps] = createSplitProps()(props, ['id']);
-  return createComponent(ark.div, mergeProps(() => menu?.()?.getItemGroupProps(itemGroupProps), divProps));
+  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const groupProps = mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ark.div, groupProps);
 };
 
 export { MenuItemGroup };

package/dist/menu/menu-item.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 menuContext = require('./menu-context.cjs');
 
 const MenuItem = props => {
   const menu = menuContext.useMenuContext();
-  const [menuItemProps, divProps] = createSplitProps.createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().getItemProps(menuItemProps), divProps));
+  const [itemParams, restProps] = createSplitProps.createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
+  const itemProps = solid.mergeProps(() => menu?.().getItemProps(itemParams), restProps);
+  return web.createComponent(factory.ark.div, itemProps);
 };
 
 exports.MenuItem = MenuItem;

package/dist/menu/menu-item.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 UseMenuReturn } from './use-menu';
 type MenuItemParams = Parameters<ReturnType<ReturnType<UseMenuReturn>['api']>['getItemProps']>[0];
 export type MenuItemProps = Assign<HTMLArkProps<'div'>, MenuItemParams>;

package/dist/menu/menu-item.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 { useMenuContext } from './menu-context.mjs';
 
 const MenuItem = props => {
   const menu = useMenuContext();
-  const [menuItemProps, divProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
-  return createComponent(ark.div, mergeProps(() => menu?.().getItemProps(menuItemProps), divProps));
+  const [itemParams, restProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
+  const itemProps = mergeProps(() => menu?.().getItemProps(itemParams), restProps);
+  return createComponent(ark.div, itemProps);
 };
 
 export { MenuItem };

package/dist/menu/menu-option-item.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,12 +12,16 @@ const menuContext = require('./menu-context.cjs');
 
 const MenuOptionItem = props => {
   const menu = menuContext.useMenuContext();
-  const [optionProps, divProps] = createSplitProps.createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, {
+  const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
+  const itemProps = solid.mergeProps(() => menu?.().getOptionItemProps(optionProps), localProps);
+  const itemState = solidJs.createMemo(() => ({
     isActive: menu?.().isOptionChecked(optionProps) ?? false
   }));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().getOptionItemProps(optionProps), divProps, {
-    children: view
+  const getChildren = () => runIfFn.runIfFn(localProps.children, itemState);
+  return web.createComponent(factory.ark.div, web.mergeProps(itemProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/menu/menu-option-item.d.ts

@@ -1,12 +1,12 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type connect } from '@zag-js/menu';
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 export type MenuOptionItemState = {
     isActive: boolean;
 };
 export type MenuOptionItemParams = Parameters<ReturnType<typeof connect>['getOptionItemProps']>[0];
 export type MenuOptionItemProps = Assign<HTMLArkProps<'div'>, MenuOptionItemParams & {
-    children?: JSX.Element | ((state: MenuOptionItemState) => JSX.Element);
+    children?: JSX.Element | ((state: Accessor<MenuOptionItemState>) => JSX.Element);
 }>;
 export declare const MenuOptionItem: (props: MenuOptionItemProps) => JSX.Element;

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

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

package/dist/menu/menu-positioner.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuPositioner = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => menu?.().positionerProps, props));
+  const positionerProps = solid.mergeProps(() => menu?.().positionerProps, props);
+  return web.createComponent(factory.ark.div, positionerProps);
 };
 
 exports.MenuPositioner = MenuPositioner;

package/dist/menu/menu-positioner.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useMenuContext } from './menu-context.mjs';
 
 const MenuPositioner = props => {
   const menu = useMenuContext();
-  return createComponent(ark.div, mergeProps(() => menu?.().positionerProps, props));
+  const positionerProps = mergeProps(() => menu?.().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
 };
 
 export { MenuPositioner };

package/dist/menu/menu-separator.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuSeparator = props => {
   const menu = menuContext.useMenuContext();
-  return web.createComponent(factory.ark.hr, web.mergeProps(() => menu?.().separatorProps, props));
+  const separatorProps = solid.mergeProps(() => menu?.().separatorProps, props);
+  return web.createComponent(factory.ark.hr, separatorProps);
 };
 
 exports.MenuSeparator = MenuSeparator;

package/dist/menu/menu-separator.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useMenuContext } from './menu-context.mjs';
 
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  return createComponent(ark.hr, mergeProps(() => menu?.().separatorProps, props));
+  const separatorProps = mergeProps(() => menu?.().separatorProps, props);
+  return createComponent(ark.hr, separatorProps);
 };
 
 export { MenuSeparator };

package/dist/menu/menu-trigger-item.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const menuContext = require('./menu-context.cjs');
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = menuContext.useMenuTriggerItemContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => getTriggerItemProps?.(), props));
+  const triggerProps = solid.mergeProps(() => getTriggerItemProps?.(), props);
+  return web.createComponent(factory.ark.div, triggerProps);
 };
 
 exports.MenuTriggerItem = MenuTriggerItem;

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

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useMenuTriggerItemContext } from './menu-context.mjs';
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = useMenuTriggerItemContext();
-  return createComponent(ark.div, mergeProps(() => getTriggerItemProps?.(), props));
+  const triggerProps = mergeProps(() => getTriggerItemProps?.(), props);
+  return createComponent(ark.div, triggerProps);
 };
 
 export { MenuTriggerItem };

package/dist/menu/menu-trigger.cjs

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

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

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

package/dist/menu/menu-trigger.mjs

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