@ark-ui/solid 0.2.0 → 0.3.0

package/dist/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
 
 const HoverCardArrowTip = props => {
   const hoverCard = hoverCardContext.useHoverCardContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => hoverCard().arrowTipProps, props));
+  const tipProps = solid.mergeProps(() => hoverCard().arrowTipProps, props);
+  return web.createComponent(factory.ark.div, tipProps);
 };
 
 exports.HoverCardArrowTip = HoverCardArrowTip;

package/dist/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
 
 const HoverCardArrowTip = props => {
   const hoverCard = useHoverCardContext();
-  return createComponent(ark.div, mergeProps(() => hoverCard().arrowTipProps, props));
+  const tipProps = mergeProps(() => hoverCard().arrowTipProps, props);
+  return createComponent(ark.div, tipProps);
 };
 
 export { HoverCardArrowTip };

package/dist/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
 
 const HoverCardArrow = props => {
   const hoverCard = hoverCardContext.useHoverCardContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => hoverCard().arrowProps, props));
+  const arrowProps = solid.mergeProps(() => hoverCard().arrowProps, props);
+  return web.createComponent(factory.ark.div, arrowProps);
 };
 
 exports.HoverCardArrow = HoverCardArrow;

package/dist/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
 
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
-  return createComponent(ark.div, mergeProps(() => hoverCard().arrowProps, props));
+  const arrowProps = mergeProps(() => hoverCard().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
 };
 
 export { HoverCardArrow };

package/dist/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
 
 const HoverCardContent = props => {
   const hoverCard = hoverCardContext.useHoverCardContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => hoverCard().contentProps, props));
+  const contentProps = solid.mergeProps(() => hoverCard().contentProps, props);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.HoverCardContent = HoverCardContent;

package/dist/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
 
 const HoverCardContent = props => {
   const hoverCard = useHoverCardContext();
-  return createComponent(ark.div, mergeProps(() => hoverCard().contentProps, props));
+  const contentProps = mergeProps(() => hoverCard().contentProps, props);
+  return createComponent(ark.div, contentProps);
 };
 
 export { HoverCardContent };

package/dist/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
 
 const HoverCardPositioner = props => {
   const hoverCard = hoverCardContext.useHoverCardContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => hoverCard().positionerProps, props));
+  const positionerProps = solid.mergeProps(() => hoverCard().positionerProps, props);
+  return web.createComponent(factory.ark.div, positionerProps);
 };
 
 exports.HoverCardPositioner = HoverCardPositioner;

package/dist/hover-card/hover-card-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 { useHoverCardContext } from './hover-card-context.mjs';
 
 const HoverCardPositioner = props => {
   const hoverCard = useHoverCardContext();
-  return createComponent(ark.div, mergeProps(() => hoverCard().positionerProps, props));
+  const positionerProps = mergeProps(() => hoverCard().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
 };
 
 export { HoverCardPositioner };

package/dist/hover-card/hover-card-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 hoverCardContext = require('./hover-card-context.cjs');
 
 const HoverCardTrigger = props => {
   const hoverCard = hoverCardContext.useHoverCardContext();
-  const triggerProps = hoverCard().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(() => hoverCard().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.HoverCardTrigger = HoverCardTrigger;

package/dist/hover-card/hover-card-trigger.d.ts

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

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

package/dist/index.cjs

@@ -9,6 +9,14 @@ const accordionIcon = require('./accordion/accordion-icon.cjs');
 const accordionItem = require('./accordion/accordion-item.cjs');
 const accordionTrigger = require('./accordion/accordion-trigger.cjs');
 const accordion$1 = require('@zag-js/accordion');
+const carousel = require('./carousel/carousel.cjs');
+const carouselControl = require('./carousel/carousel-control.cjs');
+const carouselNextSlideTrigger = require('./carousel/carousel-next-slide-trigger.cjs');
+const carouselPrevSlideTrigger = require('./carousel/carousel-prev-slide-trigger.cjs');
+const carouselSlide = require('./carousel/carousel-slide.cjs');
+const carouselSlideGroup = require('./carousel/carousel-slide-group.cjs');
+const carouselViewport = require('./carousel/carousel-viewport.cjs');
+const carousel_anatomy = require('./carousel/carousel.anatomy.cjs');
 const checkbox = require('./checkbox/checkbox.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
 const checkboxInput = require('./checkbox/checkbox-input.cjs');
@@ -76,6 +84,7 @@ const numberInput$1 = require('@zag-js/number-input');
 const pagination = require('./pagination/pagination.cjs');
 const paginationEllipsis = require('./pagination/pagination-ellipsis.cjs');
 const paginationList = require('./pagination/pagination-list.cjs');
+const paginationListItem = require('./pagination/pagination-list-item.cjs');
 const paginationNextPageTrigger = require('./pagination/pagination-next-page-trigger.cjs');
 const paginationPageTrigger = require('./pagination/pagination-page-trigger.cjs');
 const paginationPrevPageTrigger = require('./pagination/pagination-prev-page-trigger.cjs');
@@ -189,6 +198,14 @@ Object.defineProperty(exports, 'accordionAnatomy', {
 	enumerable: true,
 	get: () => accordion$1.anatomy
 });
+exports.Carousel = carousel.Carousel;
+exports.CarouselControl = carouselControl.CarouselControl;
+exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;
+exports.CarouselPrevSlideTrigger = carouselPrevSlideTrigger.CarouselPrevSlideTrigger;
+exports.CarouselSlide = carouselSlide.CarouselSlide;
+exports.CarouselSlideGroup = carouselSlideGroup.CarouselSlideGroup;
+exports.CarouselViewport = carouselViewport.CarouselViewport;
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.Checkbox = checkbox.Checkbox;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxInput = checkboxInput.CheckboxInput;
@@ -277,6 +294,7 @@ Object.defineProperty(exports, 'numberInputAnatomy', {
 exports.Pagination = pagination.Pagination;
 exports.PaginationEllipsis = paginationEllipsis.PaginationEllipsis;
 exports.PaginationList = paginationList.PaginationList;
+exports.PaginationListItem = paginationListItem.PaginationListItem;
 exports.PaginationNextPageTrigger = paginationNextPageTrigger.PaginationNextPageTrigger;
 exports.PaginationPageTrigger = paginationPageTrigger.PaginationPageTrigger;
 exports.PaginationPrevPageTrigger = paginationPrevPageTrigger.PaginationPrevPageTrigger;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { createAnatomy } from '@zag-js/anatomy';
 export * from './accordion';
+export * from './carousel';
 export * from './checkbox';
 export * from './combobox';
 export * from './dialog';

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

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;