ui-ingredients 0.0.36 → 0.0.38

package/dist/toast/title.svelte

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

package/dist/toggle-group/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateToggleGroupReturn } from './create-toggle-group.svelte.js';
-export declare const toggleGroupContext: Context<CreateToggleGroupReturn>;
+export declare const getToggleGroupContext: () => CreateToggleGroupReturn, setToggleGroupContext: (context: CreateToggleGroupReturn | (() => CreateToggleGroupReturn)) => void;

package/dist/toggle-group/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const toggleGroupContext = new Context('ToggleGroup');
+import { createContext } from '../create-context.svelte.js';
+export const [getToggleGroupContext, setToggleGroupContext] = createContext('ToggleGroup');

package/dist/toggle-group/create-toggle-group.svelte.js

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

package/dist/toggle-group/index.d.ts

@@ -2,3 +2,4 @@ export * as ToggleGroup from './toggle-group.js';
 export type { ToggleGroupItemProps } from './item.svelte';
 export type { ToggleGroupProps } from './root.svelte';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export { getToggleGroupContext } from './context.svelte.js';

package/dist/toggle-group/index.js

@@ -1,2 +1,3 @@
 export * as ToggleGroup from './toggle-group.js';
 export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export { getToggleGroupContext } from './context.svelte.js';

package/dist/toggle-group/item.svelte

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

package/dist/toggle-group/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 {toggleGroupContext} from './context.svelte.js';
+  import {setToggleGroupContext} from './context.svelte.js';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
 
   let {asChild, children, ...props}: ToggleGroupProps = $props();
@@ -42,7 +42,7 @@
     mergeProps(otherProps, toggleGroup.getRootProps()),
   );
 
-  toggleGroupContext.set(toggleGroup);
+  setToggleGroupContext(toggleGroup);
 </script>
 
 {#if asChild}

package/dist/tooltip/arrow-tip.svelte

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

package/dist/tooltip/arrow.svelte

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

package/dist/tooltip/content.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateTooltipReturn } from './create-tooltip.svelte.js';
-export declare const tooltipContext: Context<CreateTooltipReturn>;
+export declare const getTooltipContext: () => CreateTooltipReturn, setTooltipContext: (context: CreateTooltipReturn | (() => CreateTooltipReturn)) => void;

package/dist/tooltip/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const tooltipContext = new Context('Tooltip');
+import { createContext } from '../create-context.svelte.js';
+export const [getTooltipContext, setTooltipContext] = createContext('Tooltip');

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

@@ -6,14 +6,16 @@ import { uid } from 'uid';
 export function createTooltip(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(tooltip.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(tooltip.machine(context), { context });
     const api = $derived(reflect(() => tooltip.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/tooltip/index.d.ts

@@ -6,3 +6,4 @@ export type { TooltipPositionerProps } from './positioner.svelte';
 export type { TooltipProps } from './root.svelte';
 export type { TooltipTriggerProps } from './trigger.svelte';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
+export { getTooltipContext } from './context.svelte.js';

package/dist/tooltip/index.js

@@ -1,2 +1,3 @@
 export * as Tooltip from './tooltip.js';
 export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
+export { getTooltipContext } from './context.svelte.js';

package/dist/tooltip/positioner.svelte

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

package/dist/tooltip/root.svelte

@@ -11,14 +11,14 @@
 </script>
 
 <script lang="ts">
-  import {tooltipContext} from './context.svelte.js';
+  import {setTooltipContext} from './context.svelte.js';
   import {createTooltip} from './create-tooltip.svelte.js';
 
   let {children, ...props}: TooltipProps = $props();
 
   let tooltip = createTooltip(props);
 
-  tooltipContext.set(tooltip);
+  setTooltipContext(tooltip);
 </script>
 
 {@render children?.(tooltip)}

package/dist/tooltip/trigger.svelte

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

package/dist/tree-view/branch-content.svelte

@@ -9,15 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewBranchPropsContext,
+    getTreeViewContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchContentProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let branchProps = treeViewBranchPropsContext.get();
+  let branchProps = getTreeViewBranchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getBranchContentProps(branchProps)),

package/dist/tree-view/branch-control.svelte

@@ -9,15 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewBranchPropsContext,
+    getTreeViewContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchControlProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let branchProps = treeViewBranchPropsContext.get();
+  let branchProps = getTreeViewBranchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getBranchControlProps(branchProps)),

package/dist/tree-view/branch-indicator.svelte

@@ -9,15 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewBranchPropsContext,
+    getTreeViewContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchIndicatorProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let branchProps = treeViewBranchPropsContext.get();
+  let branchProps = getTreeViewBranchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getBranchIndicatorProps(branchProps)),

package/dist/tree-view/branch-text.svelte

@@ -9,15 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewBranchPropsContext,
+    getTreeViewContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchTextProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let branchProps = treeViewBranchPropsContext.get();
+  let branchProps = getTreeViewBranchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getBranchTextProps(branchProps)),

package/dist/tree-view/branch-trigger.svelte

@@ -9,15 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewBranchPropsContext,
+    getTreeViewContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchTriggerProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let branchProps = treeViewBranchPropsContext.get();
+  let branchProps = getTreeViewBranchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getBranchTriggerProps(branchProps)),

package/dist/tree-view/branch.svelte

@@ -14,13 +14,13 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import {
-    treeViewBranchPropsContext,
-    treeViewContext,
+    getTreeViewContext,
+    setTreeViewBranchPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewBranchProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
   let [branchProps, otherProps] = $derived(
     createSplitProps<BranchProps>(['depth', 'value', 'disabled'])(props),
@@ -32,7 +32,7 @@
     mergeProps(otherProps, treeView.getBranchProps(branchProps)),
   );
 
-  treeViewBranchPropsContext.set(() => branchProps);
+  setTreeViewBranchPropsContext(() => branchProps);
 </script>
 
 {#if asChild}

package/dist/tree-view/context.svelte.d.ts

@@ -1,6 +1,5 @@
-import { Context } from '../context.svelte.js';
 import type { BranchProps, ItemProps } from '@zag-js/tree-view';
 import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export declare const treeViewContext: Context<CreateTreeViewReturn>;
-export declare const treeViewItemPropsContext: Context<ItemProps>;
-export declare const treeViewBranchPropsContext: Context<BranchProps>;
+export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
+export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;

package/dist/tree-view/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../context.svelte.js';
-export const treeViewContext = new Context('TreeView');
-export const treeViewItemPropsContext = new Context('TreeViewItem');
-export const treeViewBranchPropsContext = new Context('TreeViewBranch');
+import { createContext } from '../create-context.svelte.js';
+export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
+export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem');
+export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch');

package/dist/tree-view/create-tree-view.svelte.js

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

package/dist/tree-view/index.d.ts

@@ -12,3 +12,4 @@ export type { TreeViewLabelProps } from './label.svelte';
 export type { TreeViewProps } from './root.svelte';
 export type { TreeViewTreeProps } from './tree.svelte';
 export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
+export { getTreeViewContext } from './context.svelte.js';

package/dist/tree-view/index.js

@@ -1,2 +1,3 @@
 export * as TreeView from './tree-view.js';
 export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
+export { getTreeViewContext } from './context.svelte.js';

package/dist/tree-view/item-indicator.svelte

@@ -8,13 +8,16 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+  import {
+    getTreeViewContext,
+    getTreeViewItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewItemIndicatorProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let itemProps = treeViewItemPropsContext.get();
+  let itemProps = getTreeViewItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getItemIndicatorProps(itemProps)),

package/dist/tree-view/item-text.svelte

@@ -8,13 +8,16 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+  import {
+    getTreeViewContext,
+    getTreeViewItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewItemTextProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
-  let itemProps = treeViewItemPropsContext.get();
+  let itemProps = getTreeViewItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, treeView.getItemTextProps(itemProps)),

package/dist/tree-view/item.svelte

@@ -13,11 +13,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+  import {
+    getTreeViewContext,
+    setTreeViewItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewItemProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['depth', 'value', 'disabled'])(props),
@@ -29,7 +32,7 @@
     mergeProps(otherProps, treeView.getItemProps(itemProps)),
   );
 
-  treeViewItemPropsContext.set(() => itemProps);
+  setTreeViewItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/tree-view/label.svelte

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

package/dist/tree-view/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 {treeViewContext} from './context.svelte.js';
+  import {setTreeViewContext} from './context.svelte.js';
   import {createTreeView} from './create-tree-view.svelte.js';
 
   let {asChild, children, ...props}: TreeViewProps = $props();
@@ -42,7 +42,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, treeView.getRootProps()));
 
-  treeViewContext.set(treeView);
+  setTreeViewContext(treeView);
 </script>
 
 {#if asChild}

package/dist/tree-view/tree.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {treeViewContext} from './context.svelte.js';
+  import {getTreeViewContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TreeViewTreeProps = $props();
 
-  let treeView = treeViewContext.get();
+  let treeView = getTreeViewContext();
 
   let mergedProps = $derived(mergeProps(props, treeView.getTreeProps()));
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/context.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { GenericObject } from './types.js';
-export declare class Context<T extends GenericObject> {
-    private key;
-    private strict;
-    constructor(key: string, strict?: boolean);
-    get(): T;
-    set(context: T | (() => T)): any;
-}