@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/menu/menu-arrow-tip.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuArrowTipBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuArrowTipProps extends Assign<HTMLProps<'div'>, MenuArrowTipBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuArrowTipProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getArrowTipProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-arrow-tip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuArrowTipBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuArrowTipProps extends Assign<HTMLProps<'div'>, MenuArrowTipBaseProps> {
+}
+declare const MenuArrowTip: import("svelte").Component<MenuArrowTipProps, {}, "">;
+type MenuArrowTip = ReturnType<typeof MenuArrowTip>;
+export default MenuArrowTip;

package/dist/components/menu/menu-arrow.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuArrowBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuArrowProps extends Assign<HTMLProps<'div'>, MenuArrowBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuArrowProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getArrowProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuArrowBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuArrowProps extends Assign<HTMLProps<'div'>, MenuArrowBaseProps> {
+}
+declare const MenuArrow: import("svelte").Component<MenuArrowProps, {}, "">;
+type MenuArrow = ReturnType<typeof MenuArrow>;
+export default MenuArrow;

package/dist/components/menu/menu-checkbox-item.svelte

@@ -0,0 +1,51 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { OptionItemProps } from '@zag-js/menu'
+
+  type PartialOptionItemProps = Omit<OptionItemProps, 'type'>
+
+  export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {}
+  export interface MenuCheckboxItemProps extends Assign<HTMLProps<'div'>, MenuCheckboxItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemProvider } from './use-menu-item-context'
+  import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
+
+  let { checked = $bindable<boolean>(), ...props }: MenuCheckboxItemProps = $props()
+
+  const [partialOptionItemProps, localProps] = $derived(
+    // @ts-expect-error - TODO: fix this
+    createSplitProps<PartialOptionItemProps>()(props, [
+      'checked',
+      'closeOnSelect',
+      'disabled',
+      'onCheckedChange',
+      'value',
+      'valueText',
+    ]),
+  )
+
+  const optionItemProps = $derived<OptionItemProps>({
+    ...partialOptionItemProps,
+    type: 'checkbox',
+    checked,
+    onCheckedChange(nextChecked) {
+      if (checked !== undefined) checked = nextChecked
+      partialOptionItemProps.onCheckedChange?.(nextChecked)
+    },
+  })
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getOptionItemProps(optionItemProps), localProps))
+  const optionItemState = $derived(menu().getOptionItemState(optionItemProps))
+
+  MenuItemPropsProvider(() => optionItemProps)
+  MenuItemProvider(() => optionItemState)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-checkbox-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { OptionItemProps } from '@zag-js/menu';
+type PartialOptionItemProps = Omit<OptionItemProps, 'type'>;
+export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {
+}
+export interface MenuCheckboxItemProps extends Assign<HTMLProps<'div'>, MenuCheckboxItemBaseProps> {
+}
+declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

package/dist/components/menu/menu-content.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface MenuContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuContentProps extends Assign<HTMLProps<'div'>, MenuContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useMenuContext } from './use-menu-context'
+
+  let { ref = $bindable<Element | null>(), ...props }: MenuContentProps = $props()
+
+  const menu = useMenuContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(menu().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: HTMLElement | null) {
+    presence().setNode(node)
+    ref = node
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {@attach setNode} {...mergedProps} />
+{/if}

package/dist/components/menu/menu-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface MenuContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuContentProps extends Assign<HTMLProps<'div'>, MenuContentBaseProps> {
+}
+declare const MenuContent: import("svelte").Component<MenuContentProps, {}, "ref">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/menu/menu-context-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuContextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface MenuContextTriggerProps extends Assign<HTMLProps<'button'>, MenuContextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuContextTriggerProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getContextTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuContextTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface MenuContextTriggerProps extends Assign<HTMLProps<'button'>, MenuContextTriggerBaseProps> {
+}
+declare const MenuContextTrigger: import("svelte").Component<MenuContextTriggerProps, {}, "">;
+type MenuContextTrigger = ReturnType<typeof MenuContextTrigger>;
+export default MenuContextTrigger;

package/dist/components/menu/menu-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseMenuContext } from './use-menu-context'
+
+  export interface MenuContextProps {
+    render: Snippet<[UseMenuContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useMenuContext } from './use-menu-context'
+
+  const { render }: MenuContextProps = $props()
+  const context = useMenuContext()
+</script>
+
+{@render render(context)}

package/dist/components/menu/menu-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseMenuContext } from './use-menu-context';
+export interface MenuContextProps {
+    render: Snippet<[UseMenuContext]>;
+}
+declare const MenuContext: import("svelte").Component<MenuContextProps, {}, "">;
+type MenuContext = ReturnType<typeof MenuContext>;
+export default MenuContext;

package/dist/components/menu/menu-indicator.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuIndicatorProps extends Assign<HTMLProps<'div'>, MenuIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuIndicatorProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getIndicatorProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuIndicatorProps extends Assign<HTMLProps<'div'>, MenuIndicatorBaseProps> {
+}
+declare const MenuIndicator: import("svelte").Component<MenuIndicatorProps, {}, "">;
+type MenuIndicator = ReturnType<typeof MenuIndicator>;
+export default MenuIndicator;

package/dist/components/menu/menu-item-context.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { useMenuItemContext, type UseMenuItemContext } from './use-menu-item-context'
+
+  export interface MenuItemContextProps {
+    render: Snippet<[UseMenuItemContext]>
+  }
+
+  const props: MenuItemContextProps = $props()
+
+  const context = useMenuItemContext()
+</script>
+
+{@render props.render(context)}

package/dist/components/menu/menu-item-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type UseMenuItemContext } from './use-menu-item-context';
+export interface MenuItemContextProps {
+    render: Snippet<[UseMenuItemContext]>;
+}
+declare const MenuItemContext: import("svelte").Component<MenuItemContextProps, {}, "">;
+type MenuItemContext = ReturnType<typeof MenuItemContext>;
+export default MenuItemContext;

package/dist/components/menu/menu-item-group-label.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemGroupLabelProps extends Assign<HTMLProps<'div'>, MenuItemGroupLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemGroupContext } from './use-menu-item-group-context'
+
+  const props: MenuItemGroupLabelProps = $props()
+
+  const menu = useMenuContext()
+  const itemGroup = useMenuItemGroupContext()
+  const mergedProps = $derived(mergeProps(menu().getItemGroupLabelProps({ htmlFor: itemGroup().id }), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-item-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuItemGroupLabelProps extends Assign<HTMLProps<'div'>, MenuItemGroupLabelBaseProps> {
+}
+declare const MenuItemGroupLabel: import("svelte").Component<MenuItemGroupLabelProps, {}, "">;
+type MenuItemGroupLabel = ReturnType<typeof MenuItemGroupLabel>;
+export default MenuItemGroupLabel;

package/dist/components/menu/menu-item-group.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { ItemGroupProps } from '@zag-js/menu'
+
+  type OptionalItemGroupProps = Optional<ItemGroupProps, 'id'>
+
+  export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'> {}
+  export interface MenuItemGroupProps extends Assign<HTMLProps<'div'>, MenuItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemGroupProvider } from './use-menu-item-group-context'
+
+  const props: MenuItemGroupProps = $props()
+
+  const menu = useMenuContext()
+  const id = $props.id()
+  const itemGroupProps = $derived({ id, ...props })
+  const mergedProps = $derived(mergeProps(menu().getItemGroupProps(itemGroupProps), props))
+
+  MenuItemGroupProvider(() => itemGroupProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-item-group.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { ItemGroupProps } from '@zag-js/menu';
+type OptionalItemGroupProps = Optional<ItemGroupProps, 'id'>;
+export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'> {
+}
+export interface MenuItemGroupProps extends Assign<HTMLProps<'div'>, MenuItemGroupBaseProps> {
+}
+declare const MenuItemGroup: import("svelte").Component<MenuItemGroupProps, {}, "">;
+type MenuItemGroup = ReturnType<typeof MenuItemGroup>;
+export default MenuItemGroup;

package/dist/components/menu/menu-item-indicator.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemIndicatorProps extends Assign<HTMLProps<'div'>, MenuItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
+
+  const props: MenuItemIndicatorProps = $props()
+
+  const menu = useMenuContext()
+  const itemProps = useMenuItemPropsContext()
+  const mergedProps = $derived(mergeProps(menu().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuItemIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuItemIndicatorProps extends Assign<HTMLProps<'div'>, MenuItemIndicatorBaseProps> {
+}
+declare const MenuItemIndicator: import("svelte").Component<MenuItemIndicatorProps, {}, "">;
+type MenuItemIndicator = ReturnType<typeof MenuItemIndicator>;
+export default MenuItemIndicator;

package/dist/components/menu/menu-item-text.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuItemTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuItemTextProps extends Assign<HTMLProps<'div'>, MenuItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
+
+  const props: MenuItemTextProps = $props()
+
+  const menu = useMenuContext()
+  const itemProps = useMenuItemPropsContext()
+  const mergedProps = $derived(mergeProps(menu().getItemTextProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuItemTextBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuItemTextProps extends Assign<HTMLProps<'div'>, MenuItemTextBaseProps> {
+}
+declare const MenuItemText: import("svelte").Component<MenuItemTextProps, {}, "">;
+type MenuItemText = ReturnType<typeof MenuItemText>;
+export default MenuItemText;

package/dist/components/menu/menu-item.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  interface ItemBaseProps extends ItemProps {
+    /**
+     * The function to call when the item is selected
+     */
+    onSelect?: VoidFunction
+  }
+
+  export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'> {}
+  export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { ItemProps } from '@zag-js/menu'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemProvider } from './use-menu-item-context'
+  import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  const props: MenuItemProps = $props()
+
+  const [itemProps, localProps] = $derived(
+    createSplitProps<ItemBaseProps>()(props, ['closeOnSelect', 'disabled', 'value', 'valueText', 'onSelect']),
+  )
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getItemProps(itemProps), localProps))
+  const itemState = $derived(menu().getItemState(itemProps))
+
+  $effect(() => {
+    return menu().addItemListener({
+      id: itemState.id,
+      onSelect: itemProps.onSelect,
+    })
+  })
+
+  MenuItemPropsProvider(() => itemProps)
+  MenuItemProvider(() => itemState)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-item.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+interface ItemBaseProps extends ItemProps {
+    /**
+     * The function to call when the item is selected
+     */
+    onSelect?: VoidFunction;
+}
+export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'> {
+}
+export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {
+}
+import type { ItemProps } from '@zag-js/menu';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/menu/menu-positioner.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuPositionerProps extends Assign<HTMLProps<'div'>, MenuPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuPositionerProps = $props()
+
+  const menu = useMenuContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(menu().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/menu/menu-positioner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuPositionerBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuPositionerProps extends Assign<HTMLProps<'div'>, MenuPositionerBaseProps> {
+}
+declare const MenuPositioner: import("svelte").Component<MenuPositionerProps, {}, "">;
+type MenuPositioner = ReturnType<typeof MenuPositioner>;
+export default MenuPositioner;

package/dist/components/menu/menu-radio-item-group.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { UseMenuItemGroupContext } from './use-menu-item-group-context'
+
+  type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>
+
+  export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'> {}
+  export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemGroupProvider } from './use-menu-item-group-context'
+
+  const props: MenuRadioItemGroupProps = $props()
+  const id = $props.id()
+
+  const [optionalItemGroupProps, localProps] = $derived(
+    createSplitProps<OptionalUseMenuItemGroupContext>()(props, ['id', 'onValueChange', 'value']),
+  )
+
+  const menu = useMenuContext()
+  const itemGroupProps = $derived({ id, ...optionalItemGroupProps })
+  const mergedProps = $derived(mergeProps(menu().getItemGroupProps({ id: itemGroupProps.id }), localProps))
+
+  MenuItemGroupProvider(() => itemGroupProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-radio-item-group.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { UseMenuItemGroupContext } from './use-menu-item-group-context';
+type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>;
+export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'> {
+}
+export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {
+}
+declare const MenuRadioItemGroup: import("svelte").Component<MenuRadioItemGroupProps, {}, "">;
+type MenuRadioItemGroup = ReturnType<typeof MenuRadioItemGroup>;
+export default MenuRadioItemGroup;

package/dist/components/menu/menu-radio-item.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { OptionItemProps } from '@zag-js/menu'
+
+  type PartialOptionItemProps = Omit<OptionItemProps, 'type' | 'checked' | 'onCheckedChange'>
+
+  export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {}
+  export interface MenuRadioItemProps extends Assign<HTMLProps<'div'>, MenuRadioItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemProvider } from './use-menu-item-context'
+  import { useMenuItemGroupContext } from './use-menu-item-group-context'
+  import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
+
+  const props: MenuRadioItemProps = $props()
+
+  const [partialItemProps, localProps] = $derived(
+    createSplitProps<PartialOptionItemProps>()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']),
+  )
+
+  const menu = useMenuContext()
+  const itemGroup = useMenuItemGroupContext()
+
+  const optionItemProps: OptionItemProps = $derived({
+    ...partialItemProps,
+    checked: itemGroup().value === partialItemProps.value,
+    type: 'radio',
+    onCheckedChange: () => itemGroup().onValueChange?.({ value: partialItemProps.value }),
+  })
+
+  const mergedProps = $derived(mergeProps(menu().getOptionItemProps(optionItemProps), localProps))
+  const optionItemState = $derived(menu().getOptionItemState(optionItemProps))
+
+  MenuItemPropsProvider(() => optionItemProps)
+  MenuItemProvider(() => optionItemState)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/menu/menu-radio-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { OptionItemProps } from '@zag-js/menu';
+type PartialOptionItemProps = Omit<OptionItemProps, 'type' | 'checked' | 'onCheckedChange'>;
+export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'> {
+}
+export interface MenuRadioItemProps extends Assign<HTMLProps<'div'>, MenuRadioItemBaseProps> {
+}
+declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;