ui-ingredients 0.0.16 → 0.0.18

package/dist/menu/create-menu.svelte.js

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as menu from '@zag-js/menu';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createMenu(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(menu.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/menu/index.d.ts

@@ -1 +1,18 @@
-export {};
+export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { type MenuArrowTipProps } from './arrow-tip.svelte';
+export { type MenuArrowProps } from './arrow.svelte';
+export { type MenuContentProps } from './content.svelte';
+export { type MenuContextTriggerProps } from './context-trigger.svelte';
+export { type MenuIndicatorProps } from './indicator.svelte';
+export { type MenuItemGroupLabelProps } from './item-group-label.svelte';
+export { type MenuItemGroupProps } from './item-group.svelte';
+export { type MenuItemProps } from './item.svelte';
+export * as Menu from './menu.js';
+export { type MenuOptionItemIndicatorProps } from './option-item-indicator.svelte';
+export { type MenuOptionItemTextProps } from './option-item-text.svelte';
+export { type MenuOptionItemProps } from './option-item.svelte';
+export { type MenuPositionerProps } from './positioner.svelte';
+export { type MenuRootProps } from './root.svelte';
+export { type MenuSeparatorProps } from './separator.svelte';
+export { type MenuTriggerItemIndicatorProps } from './trigger-item.svelte';
+export { type MenuTriggerProps } from './trigger.svelte';

package/dist/menu/index.js

@@ -1 +1,18 @@
-"use strict";
+export { anatomy as menuAnatomy } from '@zag-js/menu';
+export {} from './arrow-tip.svelte';
+export {} from './arrow.svelte';
+export {} from './content.svelte';
+export {} from './context-trigger.svelte';
+export {} from './indicator.svelte';
+export {} from './item-group-label.svelte';
+export {} from './item-group.svelte';
+export {} from './item.svelte';
+export * as Menu from './menu.js';
+export {} from './option-item-indicator.svelte';
+export {} from './option-item-text.svelte';
+export {} from './option-item.svelte';
+export {} from './positioner.svelte';
+export {} from './root.svelte';
+export {} from './separator.svelte';
+export {} from './trigger-item.svelte';
+export {} from './trigger.svelte';

package/dist/menu/indicator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuIndicatorProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuIndicatorProps = $props();
+
+  let context = menuContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

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

@@ -1,21 +1,8 @@
-export default Indicator;
-type Indicator = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Indicator: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Indicator: $$__sveltets_2_IsomorphicComponent<MenuIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Indicator = InstanceType<typeof Indicator>;
+export default Indicator;

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

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuItemGroupLabelProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuItemGroupLabelProps = $props();
+
+  let context = menuContext.get();
+
+  let itemGroupProps = menuItemGroupPropsContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemGroupLabelProps({
+        htmlFor: itemGroupProps.id,
+      }),
+    ),
+  );
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

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

@@ -1,21 +1,8 @@
-export default ItemGroupLabel;
-type ItemGroupLabel = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ItemGroupLabel: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const ItemGroupLabel: $$__sveltets_2_IsomorphicComponent<MenuItemGroupLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemGroupLabel = InstanceType<typeof ItemGroupLabel>;
+export default ItemGroupLabel;

package/dist/menu/item-group.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ItemGroupProps} from '@zag-js/menu';
+
+  export interface MenuItemGroupProps
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+</script>
+
+<script lang="ts">
+  import {createUniqueId} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
+
+  let {id, children, ...props}: MenuItemGroupProps = $props();
+
+  let context = menuContext.get();
+
+  let uid = createUniqueId();
+
+  let itemGroupProps = $derived({
+    id: id ?? uid,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getItemGroupProps(itemGroupProps)));
+
+  menuItemGroupPropsContext.set(() => itemGroupProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,21 +1,8 @@
-export default ItemGroup;
-type ItemGroup = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ItemGroup: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const ItemGroup: $$__sveltets_2_IsomorphicComponent<MenuItemGroupProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemGroup = InstanceType<typeof ItemGroup>;
+export default ItemGroup;

package/dist/menu/item.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/menu';
+  import type {Snippet} from 'svelte';
+
+  export interface MenuItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();
+
+  let context = menuContext.get();
+
+  let itemProps = $derived({
+    value,
+    valueText,
+    disabled,
+    closeOnSelect,
+  });
+
+  let state = $derived(context.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

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

@@ -1,21 +1,8 @@
-export default Item;
-type Item = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Item: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Item: $$__sveltets_2_IsomorphicComponent<MenuItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Item = InstanceType<typeof Item>;
+export default Item;

package/dist/menu/menu.d.ts

@@ -1 +1,16 @@
-export {};
+export { default as ArrowTip } from './arrow-tip.svelte';
+export { default as Arrow } from './arrow.svelte';
+export { default as Content } from './content.svelte';
+export { default as ContextTrigger } from './context-trigger.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as ItemGroupLabel } from './item-group-label.svelte';
+export { default as ItemGroup } from './item-group.svelte';
+export { default as Item } from './item.svelte';
+export { default as OptionItemIndicator } from './option-item-indicator.svelte';
+export { default as OptionItemText } from './option-item-text.svelte';
+export { default as OptionItem } from './option-item.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as Separator } from './separator.svelte';
+export { default as TriggerItem } from './trigger-item.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/menu/menu.js

@@ -1 +1,16 @@
-"use strict";
+export { default as ArrowTip } from './arrow-tip.svelte';
+export { default as Arrow } from './arrow.svelte';
+export { default as Content } from './content.svelte';
+export { default as ContextTrigger } from './context-trigger.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as ItemGroupLabel } from './item-group-label.svelte';
+export { default as ItemGroup } from './item-group.svelte';
+export { default as Item } from './item.svelte';
+export { default as OptionItemIndicator } from './option-item-indicator.svelte';
+export { default as OptionItemText } from './option-item-text.svelte';
+export { default as OptionItem } from './option-item.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as Separator } from './separator.svelte';
+export { default as TriggerItem } from './trigger-item.svelte';
+export { default as Trigger } from './trigger.svelte';

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

@@ -0,0 +1,22 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuOptionItemIndicatorProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuOptionItemIndicatorProps = $props();
+
+  let context = menuContext.get();
+
+  let optionItemProps = menuOptionItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(optionItemProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OptionItemIndicator: $$__sveltets_2_IsomorphicComponent<MenuOptionItemIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type OptionItemIndicator = InstanceType<typeof OptionItemIndicator>;
+export default OptionItemIndicator;

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

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuOptionItemTextProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuOptionItemTextProps = $props();
+
+  let context = menuContext.get();
+
+  let optionItemProps = menuOptionItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getItemTextProps(optionItemProps)));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {optionItemProps.valueText}
+  {/if}
+</span>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OptionItemText: $$__sveltets_2_IsomorphicComponent<MenuOptionItemTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type OptionItemText = InstanceType<typeof OptionItemText>;
+export default OptionItemText;

package/dist/menu/option-item.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps, PickPartial} from '../types.js';
+  import type {OptionItemProps, OptionItemState} from '@zag-js/menu';
+  import type {Snippet} from 'svelte';
+
+  export interface MenuOptionItemProps
+    extends Assign<
+      Omit<HtmlProps<'div'>, 'children'>,
+      PickPartial<OptionItemProps, 'type' | 'checked'>
+    > {
+    children?: Snippet<[state: OptionItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+
+  let {
+    type = 'checkbox',
+    value,
+    checked = false,
+    disabled,
+    valueText,
+    closeOnSelect,
+    onCheckedChange,
+    children,
+    ...props
+  }: MenuOptionItemProps = $props();
+
+  let context = menuContext.get();
+
+  let itemProps = $derived({
+    type,
+    value,
+    checked,
+    disabled,
+    valueText,
+    closeOnSelect,
+    onCheckedChange,
+  });
+
+  let state = $derived(context.getOptionItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getOptionItemProps(itemProps)));
+
+  menuOptionItemPropsContext.set(() => itemProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

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

@@ -1,21 +1,8 @@
-export default OptionItem;
-type OptionItem = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const OptionItem: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const OptionItem: $$__sveltets_2_IsomorphicComponent<MenuOptionItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type OptionItem = InstanceType<typeof OptionItem>;
+export default OptionItem;

package/dist/menu/positioner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuPositionerProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuPositionerProps = $props();
+
+  let context = menuContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,21 +1,8 @@
-export default Positioner;
-type Positioner = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Positioner: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Positioner: $$__sveltets_2_IsomorphicComponent<MenuPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Positioner = InstanceType<typeof Positioner>;
+export default Positioner;

package/dist/menu/root.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+  import {type CreateMenuProps, type CreateMenuReturn} from './create-menu.svelte.js';
+
+  export interface MenuRootProps extends CreateMenuProps {
+    children?: Snippet<[api: CreateMenuReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {menuContext} from './context.svelte.js';
+  import {createMenu} from './create-menu.svelte.js';
+
+  let {children, ...props}: MenuRootProps = $props();
+
+  let context = createMenu(props);
+
+  menuContext.set(context);
+</script>
+
+{@render children?.(context)}

package/dist/menu/root.svelte.d.ts

@@ -1,21 +1,8 @@
-export default Root;
-type Root = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Root: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Root: $$__sveltets_2_IsomorphicComponent<MenuRootProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/menu/separator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuSeparatorProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuSeparatorProps = $props();
+
+  let context = menuContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>