ui-ingredients 0.0.37 → 0.0.38

package/dist/file-upload/item-preview-image.svelte

@@ -9,16 +9,16 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    fileUploadContext,
-    fileUploadItemPropsContext,
+    getFileUploadContext,
+    getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, ...props}: FileUploadItemPreviewImageProps = $props();
 
   let url = $state('');
 
-  let fileUpload = fileUploadContext.get();
-  let itemProps = fileUploadItemPropsContext.get();
+  let fileUpload = getFileUploadContext();
+  let itemProps = getFileUploadItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, fileUpload.getItemPreviewImageProps({url, ...itemProps})),

package/dist/file-upload/item-preview.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    fileUploadContext,
-    fileUploadItemPropsContext,
+    getFileUploadContext,
+    getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadItemPreviewProps = $props();
 
-  let fileUpload = fileUploadContext.get();
-  let itemProps = fileUploadItemPropsContext.get();
+  let fileUpload = getFileUploadContext();
+  let itemProps = getFileUploadItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, fileUpload.getItemPreviewProps(itemProps)),

package/dist/file-upload/item-size-text.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    fileUploadContext,
-    fileUploadItemPropsContext,
+    getFileUploadContext,
+    getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadItemSizeTextProps = $props();
 
-  let fileUpload = fileUploadContext.get();
-  let itemProps = fileUploadItemPropsContext.get();
+  let fileUpload = getFileUploadContext();
+  let itemProps = getFileUploadItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, fileUpload.getItemSizeTextProps(itemProps)),

package/dist/file-upload/item.svelte

@@ -12,13 +12,13 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import {
-    fileUploadContext,
-    fileUploadItemPropsContext,
+    getFileUploadContext,
+    setFileUploadItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadItemProps = $props();
 
-  let fileUpload = fileUploadContext.get();
+  let fileUpload = getFileUploadContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['file'])(props),
@@ -28,7 +28,7 @@
     mergeProps(otherProps, fileUpload.getItemProps(itemProps)),
   );
 
-  fileUploadItemPropsContext.set(() => itemProps);
+  setFileUploadItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/file-upload/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {fileUploadContext} from './context.svelte.js';
+  import {getFileUploadContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadLabelProps = $props();
 
-  let fileUpload = fileUploadContext.get();
+  let fileUpload = getFileUploadContext();
 
   let mergedProps = $derived(mergeProps(props, fileUpload.getLabelProps()));
 </script>

package/dist/file-upload/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {fileUploadContext} from './context.svelte.js';
+  import {setFileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
 
   let {asChild, children, ...props}: FileUploadProps = $props();
@@ -49,7 +49,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
 
-  fileUploadContext.set(fileUpload);
+  setFileUploadContext(fileUpload);
 </script>
 
 {#if asChild}

package/dist/file-upload/trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {fileUploadContext} from './context.svelte.js';
+  import {getFileUploadContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadTriggerProps = $props();
 
-  let fileUpload = fileUploadContext.get();
+  let fileUpload = getFileUploadContext();
 
   let mergedProps = $derived(mergeProps(props, fileUpload.getTriggerProps()));
 </script>

package/dist/hover-card/arrow-tip.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {hoverCardContext} from './context.svelte.js';
+  import {getHoverCardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: HoverCardArrowTipProps = $props();
 
-  let hoverCard = hoverCardContext.get();
+  let hoverCard = getHoverCardContext();
 
   let mergedProps = $derived(mergeProps(props, hoverCard.getArrowTipProps()));
 </script>

package/dist/hover-card/arrow.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {hoverCardContext} from './context.svelte.js';
+  import {getHoverCardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: HoverCardArrowProps = $props();
 
-  let hoverCard = hoverCardContext.get();
+  let hoverCard = getHoverCardContext();
 
   let mergedProps = $derived(mergeProps(props, hoverCard.getArrowProps()));
 </script>

package/dist/hover-card/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {hoverCardContext} from './context.svelte.js';
+  import {getHoverCardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: HoverCardContentProps = $props();
 
-  let hoverCard = hoverCardContext.get();
+  let hoverCard = getHoverCardContext();
 
   let mergedProps = $derived(mergeProps(props, hoverCard.getContentProps()));
 </script>

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateHoverCardReturn } from './create-hover-card.svelte.js';
-export declare const hoverCardContext: Context<CreateHoverCardReturn>;
+export declare const getHoverCardContext: () => CreateHoverCardReturn, setHoverCardContext: (context: CreateHoverCardReturn | (() => CreateHoverCardReturn)) => void;

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

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const hoverCardContext = new Context('HoverCard');
+import { createContext } from '../create-context.svelte.js';
+export const [getHoverCardContext, setHoverCardContext] = createContext('HoverCard');

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

@@ -6,14 +6,16 @@ import { uid } from 'uid';
 export function createHoverCard(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(hoverCard.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    }));
+    })));
+    const [state, send] = useMachine(hoverCard.machine(context), { context });
     const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/hover-card/index.d.ts

@@ -6,3 +6,4 @@ export type { HoverCardPositionerProps } from './positioner.svelte';
 export type { HoverCardProps } from './root.svelte';
 export type { HoverCardTriggerProps } from './trigger.svelte';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { getHoverCardContext } from './context.svelte.js';

package/dist/hover-card/index.js

@@ -1,2 +1,3 @@
 export * as HoverCard from './hover-card.js';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { getHoverCardContext } from './context.svelte.js';

package/dist/hover-card/positioner.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {hoverCardContext} from './context.svelte.js';
+  import {getHoverCardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: HoverCardPositionerProps = $props();
 
-  let hoverCard = hoverCardContext.get();
+  let hoverCard = getHoverCardContext();
 
   let mergedProps = $derived(mergeProps(props, hoverCard.getPositionerProps()));
 </script>

package/dist/hover-card/root.svelte

@@ -11,14 +11,14 @@
 </script>
 
 <script lang="ts">
-  import {hoverCardContext} from './context.svelte.js';
+  import {setHoverCardContext} from './context.svelte.js';
   import {createHoverCard} from './create-hover-card.svelte.js';
 
   let {children, ...props}: HoverCardProps = $props();
 
   let hoverCard = createHoverCard(props);
 
-  hoverCardContext.set(hoverCard);
+  setHoverCardContext(hoverCard);
 </script>
 
 {@render children?.(hoverCard)}

package/dist/hover-card/trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {hoverCardContext} from './context.svelte.js';
+  import {getHoverCardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: HoverCardTriggerProps = $props();
 
-  let hoverCard = hoverCardContext.get();
+  let hoverCard = getHoverCardContext();
 
   let mergedProps = $derived(mergeProps(props, hoverCard.getTriggerProps()));
 </script>

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

@@ -1,4 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { Locale } from '@zag-js/i18n-utils';
-export declare const localeContext: Context<Locale>;
-export declare const getLocaleContext: () => Locale | null;
+export declare const getLocaleContext: () => Locale, setLocaleContext: (context: Locale | (() => Locale)) => void;

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const localeContext = new Context('LocaleProvider', false);
-export const getLocaleContext = () => localeContext.get();
+import { createContext } from '../create-context.svelte.js';
+export const [getLocaleContext, setLocaleContext] = createContext('LocaleProvider', false);

package/dist/locale-provider/root.svelte

@@ -9,7 +9,7 @@
 
 <script lang="ts">
   import {isRTL, type Locale} from '@zag-js/i18n-utils';
-  import {localeContext} from './context.svelte.js';
+  import {setLocaleContext} from './context.svelte.js';
 
   let {children, ...props}: LocaleProviderProps = $props();
 
@@ -18,7 +18,7 @@
     dir: isRTL(props.locale) ? 'rtl' : 'ltr',
   });
 
-  localeContext.set(() => locale);
+  setLocaleContext(() => locale);
 </script>
 
 {@render children()}

package/dist/menu/arrow-tip.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuArrowTipProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getArrowTipProps()));
 </script>

package/dist/menu/arrow.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuArrowProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getArrowProps()));
 </script>

package/dist/menu/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuContentProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getContentProps()));
 </script>

package/dist/menu/context-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuContextTriggerProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getContextTriggerProps()));
 </script>

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

@@ -1,6 +1,5 @@
-import { Context } from '../context.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>;
+export declare const getMenuContext: () => CreateMenuReturn, setMenuContext: (context: CreateMenuReturn | (() => CreateMenuReturn)) => void;
+export declare const getMenuItemGroupPropsContext: () => ItemGroupProps, setMenuItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;
+export declare const getMenuOptionItemPropsContext: () => OptionItemProps, setMenuOptionItemPropsContext: (context: OptionItemProps | (() => OptionItemProps)) => void;

package/dist/menu/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../context.svelte.js';
-export const menuContext = new Context('Menu');
-export const menuItemGroupPropsContext = new Context('MenuItemGroup');
-export const menuOptionItemPropsContext = new Context('MenuOptionItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getMenuContext, setMenuContext] = createContext('Menu');
+export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup');
+export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem');

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

@@ -6,14 +6,16 @@ import { uid } from 'uid';
 export function createMenu(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(menu.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    }));
+    })));
+    const [state, send] = useMachine(menu.machine(context), { context });
     const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/menu/index.d.ts

@@ -16,3 +16,4 @@ export { type MenuSeparatorProps } from './separator.svelte';
 export { type MenuTriggerItemIndicatorProps } from './trigger-item.svelte';
 export { type MenuTriggerProps } from './trigger.svelte';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { getMenuContext } from './context.svelte.js';

package/dist/menu/index.js

@@ -16,3 +16,4 @@ export {} from './separator.svelte';
 export {} from './trigger-item.svelte';
 export {} from './trigger.svelte';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { getMenuContext } from './context.svelte.js';

package/dist/menu/indicator.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuIndicatorProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getIndicatorProps()));
 </script>

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

@@ -8,13 +8,16 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
+  import {
+    getMenuContext,
+    getMenuItemGroupPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuItemGroupLabelProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
-  let itemGroupProps = menuItemGroupPropsContext.get();
+  let itemGroupProps = getMenuItemGroupPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/menu/item-group.svelte

@@ -9,11 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {uid} from 'uid';
-  import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
+  import {
+    getMenuContext,
+    setMenuItemGroupPropsContext,
+  } from './context.svelte.js';
 
   let {id, asChild, children, ...props}: MenuItemGroupProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let id_ = uid();
 
@@ -25,7 +28,7 @@
     mergeProps(props, menu.getItemGroupProps(itemGroupProps)),
   );
 
-  menuItemGroupPropsContext.set(() => itemGroupProps);
+  setMenuItemGroupPropsContext(() => itemGroupProps);
 </script>
 
 {#if asChild}

package/dist/menu/item.svelte

@@ -13,11 +13,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuItemProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>([

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

@@ -8,13 +8,16 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+  import {
+    getMenuContext,
+    getMenuOptionItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuOptionItemIndicatorProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
-  let itemProps = menuOptionItemPropsContext.get();
+  let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, menu.getItemIndicatorProps(itemProps)),

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

@@ -8,13 +8,16 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+  import {
+    getMenuContext,
+    getMenuOptionItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuOptionItemTextProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
-  let itemProps = menuOptionItemPropsContext.get();
+  let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, menu.getItemTextProps(itemProps)),

package/dist/menu/option-item.svelte

@@ -13,11 +13,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
+  import {
+    getMenuContext,
+    setMenuOptionItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuOptionItemProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<OptionItemProps>([
@@ -37,7 +40,7 @@
     mergeProps(otherProps, menu.getOptionItemProps(itemProps)),
   );
 
-  menuOptionItemPropsContext.set(() => itemProps);
+  setMenuOptionItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/menu/positioner.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuPositionerProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getPositionerProps()));
 </script>

package/dist/menu/root.svelte

@@ -11,14 +11,14 @@
 </script>
 
 <script lang="ts">
-  import {menuContext} from './context.svelte.js';
+  import {setMenuContext} from './context.svelte.js';
   import {createMenu} from './create-menu.svelte.js';
 
   let {children, ...props}: MenuRootProps = $props();
 
   let menu = createMenu(props);
 
-  menuContext.set(menu);
+  setMenuContext(menu);
 </script>
 
 {@render children?.(menu)}

package/dist/menu/separator.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuSeparatorProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getSeparatorProps()));
 </script>

package/dist/menu/trigger-item.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {menuContext} from './context.svelte.js';
+  import {getMenuContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: MenuTriggerItemIndicatorProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getTriggerItemProps(menu)));
 </script>