ui-ingredients 0.0.16 → 0.0.18

package/dist/hover-card/arrow.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface HoverCardArrowProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/hover-card/content.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardContentProps extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useHoverCardContext} from './context.svelte.js';
+  import {hoverCardContext} from './context.svelte.js';
 
   let {children, ...props}: HoverCardContentProps = $props();
 
-  let context = useHoverCardContext();
+  let context = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>

package/dist/hover-card/content.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface HoverCardContentProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/hover-card/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as hoverCard from '@zag-js/hover-card';
-export interface CreateHoverCardContextProps extends hoverCard.Context {
-}
-export interface CreateHoverCardContextReturn extends ReturnType<typeof createHoverCardContext> {
-}
-export declare function createHoverCardContext(props: CreateHoverCardContextProps): any;
-export declare function setHoverCardContext(value: CreateHoverCardContextReturn): void;
-export declare function useHoverCardContext(): CreateHoverCardContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateHoverCardReturn } from './create-hover-card.svelte.js';
+export declare const hoverCardContext: Context<CreateHoverCardReturn>;

package/dist/hover-card/context.svelte.js

@@ -1,14 +1,2 @@
-import * as hoverCard from '@zag-js/hover-card';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createHoverCardContext(props) {
-    const [state, send] = useMachine(hoverCard.machine(props));
-    const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setHoverCardContext(value) {
-    setContext('HoverCard', value);
-}
-export function useHoverCardContext() {
-    return getContext('HoverCard');
-}
+import { Context } from '../utils.svelte.js';
+export const hoverCardContext = new Context('HoverCard');

package/dist/hover-card/create-hover-card.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as hoverCard from '@zag-js/hover-card';
+export interface CreateHoverCardProps extends Omit<hoverCard.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+}
+export interface CreateHoverCardReturn extends hoverCard.Api {
+}
+export declare function createHoverCard(props: CreateHoverCardProps): CreateHoverCardReturn;

package/dist/hover-card/create-hover-card.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 hoverCard from '@zag-js/hover-card';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createHoverCard(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(hoverCard.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/hover-card/positioner.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardPositionerProps
-    extends HtmlIngredientProps<'div'> {}
+  export interface HoverCardPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useHoverCardContext} from './context.svelte.js';
+  import {hoverCardContext} from './context.svelte.js';
 
   let {children, ...props}: HoverCardPositionerProps = $props();
 
-  let context = useHoverCardContext();
+  let context = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPositionerProps()));
 </script>

package/dist/hover-card/positioner.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface HoverCardPositionerProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/hover-card/root.svelte

@@ -1,39 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import type {
-    CreateHoverCardContextProps,
-    CreateHoverCardContextReturn,
-  } from './context.svelte.js';
+  import type {CreateHoverCardProps, CreateHoverCardReturn} from './create-hover-card.svelte.js';
 
-  export interface HoverCardProps
-    extends Omit<CreateHoverCardContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateHoverCardContextReturn]>;
+  export interface HoverCardProps extends CreateHoverCardProps {
+    children?: Snippet<[api: CreateHoverCardReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
-  import {
-    createHoverCardContext,
-    setHoverCardContext,
-  } from './context.svelte.js';
+  import {hoverCardContext} from './context.svelte.js';
+  import {createHoverCard} from './create-hover-card.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: HoverCardProps = $props();
+  let {id, children, ...props}: HoverCardProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let context = createHoverCard({id, ...props});
 
-  let context = createHoverCardContext({
-    id: id ?? createUniqueId(),
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
-
-  setHoverCardContext(context);
+  hoverCardContext.set(context);
 </script>
 
 {@render children?.(context)}

package/dist/hover-card/root.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { CreateHoverCardContextProps, CreateHoverCardContextReturn } from './context.svelte.js';
-export interface HoverCardProps extends Omit<CreateHoverCardContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateHoverCardContextReturn]>;
-}
 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;

package/dist/hover-card/trigger.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface HoverCardTriggerProps extends HtmlIngredientProps<'a'> {}
+  export interface HoverCardTriggerProps extends HtmlProps<'a'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useHoverCardContext} from './context.svelte.js';
+  import {hoverCardContext} from './context.svelte.js';
 
   let {children, ...props}: HoverCardTriggerProps = $props();
 
-  let context = useHoverCardContext();
+  let context = hoverCardContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface HoverCardTriggerProps extends HtmlIngredientProps<'a'> {
-}
 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;

package/dist/index.d.ts

@@ -5,11 +5,14 @@ export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
 export * from './combobox/index.js';
+export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './editable/index.js';
 export * from './environment-provider/index.js';
+export * from './file-upload/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
+export * from './menu/index.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';
@@ -31,4 +34,3 @@ export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
-export type { HtmlIngredientProps } from './types.js';

package/dist/index.js

@@ -5,11 +5,14 @@ export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
 export * from './combobox/index.js';
+export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './editable/index.js';
 export * from './environment-provider/index.js';
+export * from './file-upload/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
+export * from './menu/index.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';

package/dist/locale-provider/context.svelte.d.ts

@@ -1,11 +1,4 @@
-export interface CreateLocaleContextProps {
-    locale: string;
-}
-export interface CreateLocaleContextReturn extends ReturnType<typeof createLocaleContext> {
-}
-export declare function createLocaleContext(props: CreateLocaleContextProps): {
-    readonly locale: string;
-    readonly dir: "rtl" | "ltr";
-};
-export declare function setLocaleContext(value: CreateLocaleContextReturn): void;
-export declare function useLocaleContext(): CreateLocaleContextReturn | null;
+import { Context } from '../utils.svelte.js';
+import type { Locale } from '@zag-js/i18n-utils';
+export declare const localeContext: Context<Locale>;
+export declare const getLocaleContext: () => Locale | null;

package/dist/locale-provider/context.svelte.js

@@ -1,23 +1,3 @@
-import { isRTL } from '@zag-js/i18n-utils';
-import { getContext, hasContext, setContext } from 'svelte';
-export function createLocaleContext(props) {
-    return {
-        get locale() {
-            return props.locale;
-        },
-        get dir() {
-            return isRTL(props.locale) ? 'rtl' : 'ltr';
-        },
-    };
-}
-export function setLocaleContext(value) {
-    setContext('LocaleProvider', value);
-}
-export function useLocaleContext() {
-    if (!hasContext('LocaleProvider')) {
-        return null;
-    }
-    else {
-        return getContext('LocaleProvider');
-    }
-}
+import { Context } from '../utils.svelte.js';
+export const localeContext = new Context('LocaleProvider', false);
+export const getLocaleContext = () => localeContext.get();

package/dist/locale-provider/index.d.ts

@@ -1,2 +1,3 @@
-export { useLocaleContext } from './context.svelte.js';
-export { default as LocaleProvider, type LocaleProviderProps, } from './root.svelte';
+export type { Locale } from '@zag-js/i18n-utils';
+export { getLocaleContext } from './context.svelte.js';
+export { default as LocaleProvider, type LocaleProviderProps } from './root.svelte';

package/dist/locale-provider/index.js

@@ -1,2 +1,2 @@
-export { useLocaleContext } from './context.svelte.js';
-export { default as LocaleProvider, } from './root.svelte';
+export { getLocaleContext } from './context.svelte.js';
+export { default as LocaleProvider } from './root.svelte';

package/dist/locale-provider/root.svelte

@@ -1,20 +1,24 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import type {CreateLocaleContextProps} from './context.svelte.js';
 
-  export interface LocaleProviderProps extends CreateLocaleContextProps {
+  export interface LocaleProviderProps {
+    locale: string;
     children: Snippet;
   }
 </script>
 
 <script lang="ts">
-  import {createLocaleContext, setLocaleContext} from './context.svelte.js';
+  import {isRTL, type Locale} from '@zag-js/i18n-utils';
+  import {localeContext} from './context.svelte.js';
 
   let {children, ...props}: LocaleProviderProps = $props();
 
-  let context = createLocaleContext(props);
+  let context: Locale = $derived({
+    locale: props.locale,
+    dir: isRTL(props.locale) ? 'rtl' : 'ltr',
+  });
 
-  setLocaleContext(context);
+  localeContext.set(() => context);
 </script>
 
 {@render children()}

package/dist/locale-provider/root.svelte.d.ts

@@ -1,8 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { CreateLocaleContextProps } from './context.svelte.js';
-export interface LocaleProviderProps extends CreateLocaleContextProps {
-    children: Snippet;
-}
 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;

package/dist/menu/arrow-tip.svelte

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

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

@@ -1,21 +1,8 @@
-export default ArrowTip;
-type ArrowTip = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ArrowTip: $$__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 ArrowTip: $$__sveltets_2_IsomorphicComponent<MenuArrowTipProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ArrowTip = InstanceType<typeof ArrowTip>;
+export default ArrowTip;

package/dist/menu/arrow.svelte

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

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

@@ -1,21 +1,8 @@
-export default Arrow;
-type Arrow = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Arrow: $$__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 Arrow: $$__sveltets_2_IsomorphicComponent<MenuArrowProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Arrow = InstanceType<typeof Arrow>;
+export default Arrow;

package/dist/menu/content.svelte

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

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

@@ -1,21 +1,8 @@
-export default Content;
-type Content = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Content: $$__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 Content: $$__sveltets_2_IsomorphicComponent<MenuContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Content = InstanceType<typeof Content>;
+export default Content;

package/dist/menu/context-trigger.svelte

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

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

@@ -1,21 +1,8 @@
-export default ContextTrigger;
-type ContextTrigger = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ContextTrigger: $$__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 ContextTrigger: $$__sveltets_2_IsomorphicComponent<MenuContextTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ContextTrigger = InstanceType<typeof ContextTrigger>;
+export default ContextTrigger;

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

@@ -1,10 +1,6 @@
-import * as menu from '@zag-js/menu';
-export interface CreateMenuContextProps extends menu.Context {
-}
-export interface CreateMenuContextReturn extends ReturnType<typeof createMenuContext> {
-}
-export declare function createMenuContext(props: CreateMenuContextProps): any;
-export declare function setMenuContext(value: CreateMenuContextReturn): void;
-export declare function useMenuContext(): CreateMenuContextReturn;
-export declare function setMenuItemPropsContext(value: CreateMenuContextReturn): void;
-export declare function useMenuItemPropsContext(): CreateMenuContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { ItemGroupProps, OptionItemProps } from '@zag-js/menu';
+import type { CreateMenuReturn } from './create-menu.svelte.js';
+export declare const menuContext: Context<CreateMenuReturn>;
+export declare const menuItemGroupPropsContext: Context<ItemGroupProps>;
+export declare const menuOptionItemPropsContext: Context<OptionItemProps>;

package/dist/menu/context.svelte.js

@@ -1,20 +1,4 @@
-import * as menu from '@zag-js/menu';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createMenuContext(props) {
-    const [state, send] = useMachine(menu.machine(props));
-    const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setMenuContext(value) {
-    setContext('Menu', value);
-}
-export function useMenuContext() {
-    return getContext('Menu');
-}
-export function setMenuItemPropsContext(value) {
-    setContext('MenuItem', value);
-}
-export function useMenuItemPropsContext() {
-    return getContext('MenuItem');
-}
+import { Context } from '../utils.svelte.js';
+export const menuContext = new Context('Menu');
+export const menuItemGroupPropsContext = new Context('MenuItemGroup');
+export const menuOptionItemPropsContext = new Context('MenuOptionItem');

package/dist/menu/create-menu.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as menu from '@zag-js/menu';
+export interface CreateMenuProps extends Omit<menu.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+}
+export interface CreateMenuReturn extends menu.Api {
+}
+export declare function createMenu(props: CreateMenuProps): CreateMenuReturn;