ui-ingredients 0.0.16 → 0.0.17

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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuArrowTipProps extends HtmlIngredientProps<'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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuArrowProps extends HtmlIngredientProps<'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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuContentProps extends HtmlIngredientProps<'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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuContextTriggerProps extends HtmlIngredientProps<'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,6 @@
+import * as menu from '@zag-js/menu';
+export interface CreateMenuProps extends menu.Context {
+}
+export interface CreateMenuReturn extends menu.Api {
+}
+export declare function createMenu(props: CreateMenuProps): CreateMenuReturn;

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

@@ -0,0 +1,7 @@
+import * as menu from '@zag-js/menu';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createMenu(props) {
+    const [state, send] = useMachine(menu.machine(props));
+    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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuIndicatorProps extends HtmlIngredientProps<'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 {HtmlIngredientProps} from '../types.js';
+
+  export interface MenuItemGroupLabelProps extends HtmlIngredientProps<'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, HtmlIngredientProps} from '../types.js';
+  import type {ItemGroupProps} from '@zag-js/menu';
+
+  export interface MenuItemGroupProps
+    extends Assign<HtmlIngredientProps<'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,33 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/menu';
+  import type {Snippet} from 'svelte';
+
+  export interface MenuItemProps
+    extends Assign<Omit<HtmlIngredientProps<'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;