@ark-ui/solid 3.0.0-0 → 3.0.0-1

package/dist/source/file-upload/file-upload-root.jsx

@@ -0,0 +1,33 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useFileUpload } from './use-file-upload';
+import { FileUploadProvider } from './use-file-upload-context';
+export const FileUploadRoot = (props) => {
+    const [fileUploadProps, localProps] = createSplitProps()(props, [
+        'accept',
+        'allowDrop',
+        'capture',
+        'dir',
+        'directory',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'locale',
+        'maxFiles',
+        'maxFileSize',
+        'minFileSize',
+        'name',
+        'onFileAccept',
+        'onFileChange',
+        'onFileReject',
+        'translations',
+        'validate',
+    ]);
+    const api = useFileUpload(fileUploadProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<FileUploadProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </FileUploadProvider>);
+};

package/dist/source/file-upload/file-upload-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './use-file-upload-context';
+export const FileUploadTrigger = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/file-upload/file-upload.jsx

@@ -0,0 +1,13 @@
+import { FileUploadContext as Context, } from './file-upload-context';
+import { FileUploadDropzone as Dropzone, } from './file-upload-dropzone';
+import { FileUploadItem as Item } from './file-upload-item';
+import { FileUploadItemDeleteTrigger as ItemDeleteTrigger, } from './file-upload-item-delete-trigger';
+import { FileUploadItemGroup as ItemGroup, } from './file-upload-item-group';
+import { FileUploadItemName as ItemName, } from './file-upload-item-name';
+import { FileUploadItemPreview as ItemPreview, } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage as ItemPreviewImage, } from './file-upload-item-preview-image';
+import { FileUploadItemSizeText as ItemSizeText, } from './file-upload-item-size-text';
+import { FileUploadLabel as Label, } from './file-upload-label';
+import { FileUploadRoot as Root } from './file-upload-root';
+import { FileUploadTrigger as Trigger, } from './file-upload-trigger';
+export { Context, Dropzone, Item, ItemDeleteTrigger, ItemGroup, ItemName, ItemPreview, ItemPreviewImage, ItemSizeText, Label, Root, Trigger, };

package/dist/source/file-upload/index.js

@@ -0,0 +1,15 @@
+import { FileUploadContext } from './file-upload-context';
+import { FileUploadDropzone } from './file-upload-dropzone';
+import { FileUploadItem } from './file-upload-item';
+import { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger';
+import { FileUploadItemGroup } from './file-upload-item-group';
+import { FileUploadItemName } from './file-upload-item-name';
+import { FileUploadItemPreview } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
+import { FileUploadItemSizeText, } from './file-upload-item-size-text';
+import { FileUploadLabel } from './file-upload-label';
+import { FileUploadRoot } from './file-upload-root';
+import { FileUploadTrigger } from './file-upload-trigger';
+import { useFileUploadContext } from './use-file-upload-context';
+export * as FileUpload from './file-upload';
+export { FileUploadContext, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, useFileUploadContext, };

package/dist/source/file-upload/use-file-upload-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [FileUploadProvider, useFileUploadContext] = createContext({
+    hookName: 'useFileUploadContext',
+    providerName: '<FileUploadProvider />',
+});

package/dist/source/file-upload/use-file-upload-item-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
+    hookName: 'useFileUploadItemContext',
+    providerName: '<FileUploadItemProvider />',
+});

package/dist/source/file-upload/use-file-upload.js

@@ -0,0 +1,10 @@
+import * as fileUpload from '@zag-js/file-upload';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useFileUpload = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(fileUpload.machine(context), { context });
+    return createMemo(() => fileUpload.connect(state, send, normalizeProps));
+};

package/dist/source/format/format-byte.jsx

@@ -0,0 +1,9 @@
+import { formatBytes } from '@zag-js/i18n-utils';
+import { createMemo, splitProps } from 'solid-js';
+import { useLocaleContext } from '../locale';
+export const FormatByte = (props) => {
+    const [valueProps, intlProps] = splitProps(props, ['value']);
+    const ctx = useLocaleContext();
+    const text = createMemo(() => formatBytes(valueProps.value, ctx().locale, intlProps));
+    return <>{text}</>;
+};

package/dist/source/format/format-number.jsx

@@ -0,0 +1,9 @@
+import { formatNumber } from '@zag-js/i18n-utils';
+import { createMemo, splitProps } from 'solid-js';
+import { useLocaleContext } from '../locale';
+export const FormatNumber = (props) => {
+    const [valueProps, intlProps] = splitProps(props, ['value']);
+    const ctx = useLocaleContext();
+    const text = createMemo(() => formatNumber(valueProps.value, ctx().locale, intlProps));
+    return <>{text}</>;
+};

package/dist/source/format/format.jsx

@@ -0,0 +1,3 @@
+import { FormatByte as Byte } from './format-byte';
+import { FormatNumber as Number } from './format-number';
+export { Byte, Number };

package/dist/source/format/index.js

@@ -0,0 +1,4 @@
+import { FormatByte } from './format-byte';
+import { FormatNumber } from './format-number';
+export * as Format from './format';
+export { FormatByte, FormatNumber };

package/dist/source/hover-card/hover-card-arrow-tip.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardArrowTip = (props) => {
+    const hoverCard = useHoverCardContext();
+    const mergedProps = mergeProps(() => hoverCard().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/hover-card/hover-card-arrow.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardArrow = (props) => {
+    const hoverCard = useHoverCardContext();
+    const mergedProps = mergeProps(() => hoverCard().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/hover-card/hover-card-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardContent = (props) => {
+    const api = useHoverCardContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/hover-card/hover-card-context.jsx

@@ -0,0 +1,2 @@
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardContext = (props) => props.children(useHoverCardContext());

package/dist/source/hover-card/hover-card-positioner.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardPositioner = (props) => {
+    const api = useHoverCardContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/hover-card/hover-card-root.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { useHoverCard } from './use-hover-card';
+import { HoverCardProvider } from './use-hover-card-context';
+export const HoverCardRoot = (props) => {
+    const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+    const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
+        'closeDelay',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onOpenChange',
+        'open',
+        'openDelay',
+        'positioning',
+    ]);
+    const api = useHoverCard(useHoverCardProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    return (<HoverCardProvider value={api}>
+      <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
+    </HoverCardProvider>);
+};

package/dist/source/hover-card/hover-card-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './use-hover-card-context';
+export const HoverCardTrigger = (props) => {
+    const hoverCard = useHoverCardContext();
+    const mergedProps = mergeProps(() => hoverCard().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/hover-card/hover-card.jsx

@@ -0,0 +1,8 @@
+import { HoverCardArrow as Arrow } from './hover-card-arrow';
+import { HoverCardArrowTip as ArrowTip, } from './hover-card-arrow-tip';
+import { HoverCardContent as Content, } from './hover-card-content';
+import { HoverCardContext as Context, } from './hover-card-context';
+import { HoverCardPositioner as Positioner, } from './hover-card-positioner';
+import { HoverCardRoot as Root } from './hover-card-root';
+import { HoverCardTrigger as Trigger, } from './hover-card-trigger';
+export { Arrow, ArrowTip, Content, Context, Positioner, Root, Trigger };

package/dist/source/hover-card/index.js

@@ -0,0 +1,10 @@
+import { HoverCardArrow } from './hover-card-arrow';
+import { HoverCardArrowTip } from './hover-card-arrow-tip';
+import { HoverCardContent } from './hover-card-content';
+import { HoverCardContext } from './hover-card-context';
+import { HoverCardPositioner } from './hover-card-positioner';
+import { HoverCardRoot } from './hover-card-root';
+import { HoverCardTrigger } from './hover-card-trigger';
+import { useHoverCardContext } from './use-hover-card-context';
+export * as HoverCard from './hover-card';
+export { HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, useHoverCardContext, };

package/dist/source/hover-card/use-hover-card-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [HoverCardProvider, useHoverCardContext] = createContext({
+    hookName: 'useHoverCardContext',
+    providerName: '<HoverCardProvider />',
+});

package/dist/source/hover-card/use-hover-card.js

@@ -0,0 +1,10 @@
+import * as hoverCard from '@zag-js/hover-card';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useHoverCard = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(hoverCard.machine(context), { context });
+    return createMemo(() => hoverCard.connect(state, send, normalizeProps));
+};

package/dist/source/index.jsx

@@ -0,0 +1,37 @@
+export * from './accordion';
+export * from './avatar';
+export * from './carousel';
+export * from './checkbox';
+export * from './clipboard';
+export * from './collapsible';
+export * from './color-picker';
+export * from './combobox';
+export * from './date-picker';
+export * from './dialog';
+export * from './editable';
+export * from './environment';
+export * from './factory';
+export * from './file-upload';
+export * from './format';
+export * from './hover-card';
+export * from './locale';
+export * from './menu';
+export * from './number-input';
+export * from './pagination';
+export * from './pin-input';
+export * from './popover';
+export * from './presence';
+export * from './progress';
+export * from './radio-group';
+export * from './rating-group';
+export * from './segment-group';
+export * from './select';
+export * from './slider';
+export * from './splitter';
+export * from './switch';
+export * from './tabs';
+export * from './tags-input';
+export * from './toast';
+export * from './toggle-group';
+export * from './tooltip';
+export * from './tree-view';

package/dist/source/locale/index.js

@@ -0,0 +1,2 @@
+export { LocaleProvider } from './locale';
+export { useLocaleContext } from './use-locale-context';

package/dist/source/locale/locale.jsx

@@ -0,0 +1,24 @@
+import { isRTL, trackLocale } from '@zag-js/i18n-utils';
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { LocaleContextProvider } from './use-locale-context';
+export const LocaleProvider = (props) => {
+    const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+    const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+        const cleanup = trackLocale({
+            locale: localeProps.locale,
+            getRootNode,
+            onLocaleChange(locale) {
+                setLocale(locale.locale);
+            },
+        });
+        onCleanup(cleanup);
+    });
+    const context = createMemo(() => ({
+        locale: locale(),
+        dir: isRTL(locale()) ? 'rtl' : 'ltr',
+    }));
+    return <LocaleContextProvider value={context}>{restProps.children}</LocaleContextProvider>;
+};

package/dist/source/locale/use-locale-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from '../create-context';
+export const [LocaleContextProvider, useLocaleContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+    defaultValue: () => ({ dir: 'ltr', locale: 'en-US' }),
+});

package/dist/source/menu/index.js

@@ -0,0 +1,29 @@
+import { MenuArrow } from './menu-arrow';
+import { MenuArrowTip } from './menu-arrow-tip';
+// import { MenuCheckboxItem, type MenuCheckboxItemProps } from './menu-checkbox-item'
+import { MenuContent } from './menu-content';
+import { MenuContext } from './menu-context';
+import { MenuContextTrigger } from './menu-context-trigger';
+import { MenuIndicator } from './menu-indicator';
+import { MenuItem } from './menu-item';
+import { MenuItemContext } from './menu-item-context';
+import { MenuItemGroup } from './menu-item-group';
+import { MenuItemGroupLabel } from './menu-item-group-label';
+import { MenuItemIndicator } from './menu-item-indicator';
+import { MenuItemText } from './menu-item-text';
+import { MenuPositioner } from './menu-positioner';
+// import { MenuRadioItem, type MenuRadioItemProps } from './menu-radio-item'
+// import { MenuRadioItemGroup, type MenuRadioItemGroupProps } from './menu-radio-item-group'
+import { MenuRoot } from './menu-root';
+import { MenuSeparator } from './menu-separator';
+import { MenuTrigger } from './menu-trigger';
+import { MenuTriggerItem } from './menu-trigger-item';
+import { useMenuContext } from './use-menu-context';
+import { useMenuItemContext } from './use-menu-item-context';
+export * as Menu from './menu';
+export { MenuArrow, MenuArrowTip, 
+// MenuCheckboxItem,
+MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, 
+// MenuRadioItem,
+// MenuRadioItemGroup,
+MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, useMenuItemContext, };

package/dist/source/menu/menu-arrow-tip.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+export const MenuArrowTip = (props) => {
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-arrow.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+export const MenuArrow = (props) => {
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-checkbox-item.jsx

@@ -0,0 +1,28 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { MenuItemProvider } from './use-menu-item-context';
+import { MenuOptionItemPropsProvider } from './use-menu-option-item-context';
+export const MenuCheckboxItem = (props) => {
+    const [partialOptionItemProps, localProps] = createSplitProps()(props, [
+        'checked',
+        'closeOnSelect',
+        'disabled',
+        'onCheckedChange',
+        'value',
+        'valueText',
+    ]);
+    const optionItemProps = mergeProps(partialOptionItemProps, {
+        type: 'checkbox',
+    });
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
+    const itemState = createMemo(() => context().getItemState(optionItemProps));
+    return (<MenuOptionItemPropsProvider value={optionItemProps}>
+      <MenuItemProvider value={itemState}>
+        <ark.div {...mergedProps}/>
+      </MenuItemProvider>
+    </MenuOptionItemPropsProvider>);
+};

package/dist/source/menu/menu-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useMenuContext } from './use-menu-context';
+export const MenuContent = (props) => {
+    const context = useMenuContext();
+    const presenceContext = usePresenceContext();
+    const mergedProps = mergeProps(() => context().contentProps, () => presenceContext().presenceProps, props);
+    return (<Show when={!presenceContext().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/menu/menu-context-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+export const MenuContextTrigger = (props) => {
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().contextTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/menu/menu-context.jsx

@@ -0,0 +1,2 @@
+import { useMenuContext } from './use-menu-context';
+export const MenuContext = (props) => props.children(useMenuContext());

package/dist/source/menu/menu-indicator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+export const MenuIndicator = (props) => {
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().indicatorProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-item-context.jsx

@@ -0,0 +1,2 @@
+import { useMenuItemContext } from './use-menu-item-context';
+export const MenuItemContext = (props) => props.children(useMenuItemContext());

package/dist/source/menu/menu-item-group-label.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { useMenuItemGroupContext } from './use-menu-item-group-context';
+export const MenuItemGroupLabel = (props) => {
+    const context = useMenuContext();
+    const itemGroupContext = useMenuItemGroupContext();
+    const mergedProps = mergeProps(context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }), props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-item-group.jsx

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { MenuItemGroupProvider } from './use-menu-item-group-context';
+export const MenuItemGroup = (props) => {
+    const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
+        'id',
+    ]);
+    const itemGroupProps = mergeProps({ id: createUniqueId() }, optionalItemGroupProps);
+    const menu = useMenuContext();
+    const mergedProps = mergeProps(() => menu().getItemGroupProps(itemGroupProps), localProps);
+    return (<MenuItemGroupProvider value={itemGroupProps}>
+      <ark.div {...mergedProps}/>
+    </MenuItemGroupProvider>);
+};

package/dist/source/menu/menu-item-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { useMenuOptionItemPropsContext } from './use-menu-option-item-context';
+export const MenuItemIndicator = (props) => {
+    const context = useMenuContext();
+    const optionItemProps = useMenuOptionItemPropsContext();
+    const mergedProps = mergeProps(() => context().getItemIndicatorProps(optionItemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-item-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { useMenuOptionItemPropsContext } from './use-menu-option-item-context';
+export const MenuItemText = (props) => {
+    const context = useMenuContext();
+    const optionItemProps = useMenuOptionItemPropsContext();
+    const mergedProps = mergeProps(() => context().getItemTextProps(optionItemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/menu/menu-item.jsx

@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { MenuItemProvider } from './use-menu-item-context';
+export const MenuItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, [
+        'closeOnSelect',
+        'disabled',
+        'value',
+        'valueText',
+    ]);
+    const context = useMenuContext();
+    const mergedProps = mergeProps(() => context().getItemProps(itemProps), localProps);
+    const itemState = createMemo(() => context().getItemState(itemProps));
+    return (<MenuItemProvider value={itemState}>
+      <ark.div {...mergedProps}/>
+    </MenuItemProvider>);
+};

package/dist/source/menu/menu-positioner.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useMenuContext } from './use-menu-context';
+export const MenuPositioner = (props) => {
+    const context = useMenuContext();
+    const presence = usePresenceContext();
+    const mergedProps = mergeProps(() => context().positionerProps, props);
+    return (<Show when={!presence().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/menu/menu-radio-item-group.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { MenuItemGroupProvider } from './use-menu-item-group-context';
+export const MenuRadioItemGroup = (props) => {
+    const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
+    const context = useMenuContext();
+    const itemGroupProps = mergeProps({ id: createUniqueId() }, optionalItemGroupProps);
+    const mergedProps = mergeProps(() => context().getItemGroupProps(itemGroupProps), localProps);
+    return (<MenuItemGroupProvider value={itemGroupProps}>
+      <ark.div {...mergedProps}/>
+    </MenuItemGroupProvider>);
+};

package/dist/source/menu/menu-radio-item.jsx

@@ -0,0 +1,30 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './use-menu-context';
+import { MenuItemProvider } from './use-menu-item-context';
+import { useMenuItemGroupContext } from './use-menu-item-group-context';
+import { MenuOptionItemPropsProvider } from './use-menu-option-item-context';
+export const MenuRadioItem = (props) => {
+    const [partialItemProps, localProps] = createSplitProps()(props, [
+        'closeOnSelect',
+        'disabled',
+        'value',
+        'valueText',
+    ]);
+    const context = useMenuContext();
+    const itemGroup = useMenuItemGroupContext();
+    const optionItemProps = mergeProps(partialItemProps, () => ({
+        type: 'radio',
+        checked: itemGroup.value === partialItemProps.value,
+        onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value }),
+    }));
+    const mergedProps = mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
+    const itemState = createMemo(() => context().getItemState(optionItemProps));
+    return (<MenuOptionItemPropsProvider value={optionItemProps}>
+      <MenuItemProvider value={itemState}>
+        <ark.div {...mergedProps}/>
+      </MenuItemProvider>
+    </MenuOptionItemPropsProvider>);
+};