@sprawlify/svelte 0.0.45 → 0.0.47

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

@@ -0,0 +1,50 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { OptionItemProps } from '@sprawlify/primitives/machines/menu'
+
+  type PartialOptionItemProps = Omit<OptionItemProps, 'type'>
+
+  export interface MenuCheckboxItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuCheckboxItemProps extends Assign<HTMLProps<'div'>, MenuCheckboxItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } 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 { ref = $bindable(null), checked = $bindable<boolean>(), ...props }: MenuCheckboxItemProps = $props()
+
+  const [partialOptionItemProps, localProps] = $derived(
+    createSplitProps<PartialOptionItemProps>()({ checked, ...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>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,27 @@
+<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 '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useMenuContext } from './use-menu-context'
+
+  let { ref = $bindable(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)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {@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, RefAttribute } from '../../types'
+
+  export interface MenuContextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface MenuContextTriggerProps extends Assign<HTMLProps<'button'>, MenuContextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  let { ref = $bindable(null), ...props }: MenuContextTriggerProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getContextTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface MenuContextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
+}
+export interface MenuContextTriggerProps extends Assign<HTMLProps<'button'>, MenuContextTriggerBaseProps> {
+}
+declare const MenuContextTrigger: import("svelte").Component<MenuContextTriggerProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface MenuIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuIndicatorProps extends Assign<HTMLProps<'div'>, MenuIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  let { ref = $bindable(null), ...props }: MenuIndicatorProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getIndicatorProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface MenuIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuIndicatorProps extends Assign<HTMLProps<'div'>, MenuIndicatorBaseProps> {
+}
+declare const MenuIndicator: import("svelte").Component<MenuIndicatorProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuItemGroupLabelProps extends Assign<HTMLProps<'div'>, MenuItemGroupLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemGroupContext } from './use-menu-item-group-context'
+
+  let { ref = $bindable(null), ...props }: MenuItemGroupLabelProps = $props()
+
+  const menu = useMenuContext()
+  const itemGroup = useMenuItemGroupContext()
+  const mergedProps = $derived(mergeProps(menu().getItemGroupLabelProps({ htmlFor: itemGroup().id }), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface MenuItemGroupLabelBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuItemGroupLabelProps extends Assign<HTMLProps<'div'>, MenuItemGroupLabelBaseProps> {
+}
+declare const MenuItemGroupLabel: import("svelte").Component<MenuItemGroupLabelProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+  import type { ItemGroupProps } from '@sprawlify/primitives/machines/menu'
+
+  type OptionalItemGroupProps = Optional<ItemGroupProps, 'id'>
+
+  export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuItemGroupProps extends Assign<HTMLProps<'div'>, MenuItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { MenuItemGroupProvider } from './use-menu-item-group-context'
+
+  let { ref = $bindable(null), ...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>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
+import type { ItemGroupProps } from '@sprawlify/primitives/machines/menu';
+type OptionalItemGroupProps = Optional<ItemGroupProps, 'id'>;
+export interface MenuItemGroupBaseProps extends OptionalItemGroupProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuItemGroupProps extends Assign<HTMLProps<'div'>, MenuItemGroupBaseProps> {
+}
+declare const MenuItemGroup: import("svelte").Component<MenuItemGroupProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface MenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuItemIndicatorProps extends Assign<HTMLProps<'div'>, MenuItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
+
+  let { ref = $bindable(null), ...props }: MenuItemIndicatorProps = $props()
+
+  const menu = useMenuContext()
+  const itemProps = useMenuItemPropsContext()
+  const mergedProps = $derived(mergeProps(menu().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface MenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuItemIndicatorProps extends Assign<HTMLProps<'div'>, MenuItemIndicatorBaseProps> {
+}
+declare const MenuItemIndicator: import("svelte").Component<MenuItemIndicatorProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface MenuItemTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuItemTextProps extends Assign<HTMLProps<'div'>, MenuItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuItemPropsContext } from './use-menu-option-item-props-context'
+
+  let { ref = $bindable(null), ...props }: MenuItemTextProps = $props()
+
+  const menu = useMenuContext()
+  const itemProps = useMenuItemPropsContext()
+  const mergedProps = $derived(mergeProps(menu().getItemTextProps(itemProps()), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,42 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  interface ItemBaseProps extends ItemProps {
+    onSelect?: VoidFunction
+  }
+
+  export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { ItemProps } from '@sprawlify/primitives/machines/menu'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } 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'
+
+  let { ref = $bindable(null), ...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>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+interface ItemBaseProps extends ItemProps {
+    onSelect?: VoidFunction;
+}
+export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {
+}
+import type { ItemProps } from '@sprawlify/primitives/machines/menu';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface MenuPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuPositionerProps extends Assign<HTMLProps<'div'>, MenuPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useMenuContext } from './use-menu-context'
+
+  let { ref = $bindable(null), ...props }: MenuPositionerProps = $props()
+
+  const menu = useMenuContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(menu().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} />
+{/if}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseMenuItemGroupContext } from './use-menu-item-group-context';
+type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>;
+export interface MenuRadioItemGroupBaseProps extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {
+}
+declare const MenuRadioItemGroup: import("svelte").Component<MenuRadioItemGroupProps, {}, "value" | "ref">;
+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, RefAttribute } from '../../types'
+  import type { OptionItemProps } from '@sprawlify/primitives/machines/menu'
+
+  type PartialOptionItemProps = Omit<OptionItemProps, 'type' | 'checked' | 'onCheckedChange'>
+
+  export interface MenuRadioItemBaseProps extends PartialOptionItemProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface MenuRadioItemProps extends Assign<HTMLProps<'div'>, MenuRadioItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } 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'
+
+  let { ref = $bindable(null), ...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>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/menu/menu-root-provider.svelte

@@ -0,0 +1,56 @@
+<script module lang="ts">
+  import { onMount, type Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseMenuReturn } from './use-menu.svelte'
+
+  interface RootProviderProps {
+    value: UseMenuReturn
+  }
+
+  export interface MenuRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet
+  }
+  export interface MenuRootProviderProps extends MenuRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { MenuProvider, useMenuContext } from './use-menu-context'
+  import { MenuMachineProvider, useMenuMachineContext } from './use-menu-machine-context'
+  import { MenuTriggerItemProvider } from './use-menu-trigger-item-context'
+
+  const { value, ...props }: MenuRootProviderProps = $props()
+
+  const parentApi = useMenuContext()
+  const parentMachine = useMenuMachineContext()
+
+  const [presenceProps, restProps] = $derived(splitPresenceProps(props))
+
+  const api = $derived(value().api)
+  const service = $derived(value().service)
+
+  const presence = usePresence(() => ({
+    present: api.open,
+    ...presenceProps,
+  }))
+
+  // Connect parent-child relationship for nested menus
+  onMount(() => {
+    const _parentService = parentMachine?.()
+    const _parentApi = parentApi?.()
+
+    if (!_parentService || !_parentApi) return
+
+    _parentApi.setChild(service)
+    api.setParent(_parentService)
+  })
+
+  const triggerItemContext = $derived(parentApi?.().getTriggerItemProps(api))
+
+  MenuTriggerItemProvider(() => triggerItemContext)
+  MenuMachineProvider(() => service)
+  MenuProvider(() => api)
+  PresenceProvider(presence)
+</script>
+
+{@render restProps.children?.()}

package/dist/components/menu/menu-root-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseMenuReturn } from './use-menu.svelte';
+interface RootProviderProps {
+    value: UseMenuReturn;
+}
+export interface MenuRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet;
+}
+export interface MenuRootProviderProps extends MenuRootProviderBaseProps {
+}
+declare const MenuRootProvider: import("svelte").Component<MenuRootProviderProps, {}, "">;
+type MenuRootProvider = ReturnType<typeof MenuRootProvider>;
+export default MenuRootProvider;