ui-ingredients 0.0.37 → 0.0.38

package/dist/time-picker/index.d.ts

@@ -14,3 +14,4 @@ export type { TimePickerSecondCellProps } from './second-cell.svelte';
 export type { TimePickerSpacerProps } from './spacer.svelte';
 export type { TimePickerTriggerProps } from './trigger.svelte';
 export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';
+export { getTimePickerContext } from './context.svelte.js';

package/dist/time-picker/index.js

@@ -1,2 +1,3 @@
 export * as TimePicker from './time-picker.js';
 export { anatomy as timePickerAnatomy } from '@zag-js/time-picker';
+export { getTimePickerContext } from './context.svelte.js';

package/dist/time-picker/input.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, ...props}: TimePickerInputProps = $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(mergeProps(props, timePicker.getInputProps()));
 </script>

package/dist/time-picker/label.svelte

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

package/dist/time-picker/minute-cell.svelte

@@ -10,12 +10,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {value, asChild, children, ...props}: TimePickerMinuteCellProps =
     $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, timePicker.getMinuteCellProps({value})),

package/dist/time-picker/period-cell.svelte

@@ -10,12 +10,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {value, asChild, children, ...props}: TimePickerPeriodCellProps =
     $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/time-picker/positioner.svelte

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

package/dist/time-picker/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 {timePickerContext} from './context.svelte.js';
+  import {setTimePickerContext} from './context.svelte.js';
   import {createTimePicker} from './create-time-picker.svelte.js';
 
   let {asChild, children, ...props}: TimePickerProps = $props();
@@ -50,7 +50,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
 
-  timePickerContext.set(timePicker);
+  setTimePickerContext(timePicker);
 </script>
 
 {#if asChild}

package/dist/time-picker/second-cell.svelte

@@ -10,12 +10,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {value, asChild, children, ...props}: TimePickerSecondCellProps =
     $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, timePicker.getSecondCellProps({value})),

package/dist/time-picker/spacer.svelte

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

package/dist/time-picker/trigger.svelte

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

package/dist/timer/action-trigger.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timerContext} from './context.svelte.js';
+  import {getTimerContext} from './context.svelte.js';
 
   let {action, asChild, children, ...props}: TimerActionTriggerProps = $props();
 
-  let timer = timerContext.get();
+  let timer = getTimerContext();
 
   let mergedProps = $derived(
     mergeProps(props, timer.getActionTriggerProps({action})),

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

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/timer';
 import type { CreateTimerReturn } from './create-timer.svelte.js';
-export declare const timerContext: Context<CreateTimerReturn>;
-export declare const timerItemPropsContext: Context<ItemProps>;
+export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => void;
+export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/timer/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const timerContext = new Context('Timer');
-export const timerItemPropsContext = new Context('TimerItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getTimerContext, setTimerContext] = createContext('Timer');
+export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem');

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

@@ -4,11 +4,13 @@ import * as timer from '@zag-js/timer';
 import { uid } from 'uid';
 export function createTimer(props) {
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(timer.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(timer.machine(context), { context });
     const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/timer/index.d.ts

@@ -6,3 +6,4 @@ export type { TimerItemProps } from './item.svelte';
 export type { TimerProps } from './root.svelte';
 export type { TimerSeparatorProps } from './separator.svelte';
 export { anatomy as timerAnatomy } from '@zag-js/timer';
+export { getTimerContext } from './context.svelte.js';

package/dist/timer/index.js

@@ -1,2 +1,3 @@
 export * as Timer from './timer.js';
 export { anatomy as timerAnatomy } from '@zag-js/timer';
+export { getTimerContext } from './context.svelte.js';

package/dist/timer/item-label.svelte

@@ -8,12 +8,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timerContext, timerItemPropsContext} from './context.svelte.js';
+  import {getTimerContext, getTimerItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimerItemLabelProps = $props();
 
-  let timer = timerContext.get();
-  let itemProps = timerItemPropsContext.get();
+  let timer = getTimerContext();
+  let itemProps = getTimerItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, timer.getItemLabelProps(itemProps)),

package/dist/timer/item-value.svelte

@@ -8,12 +8,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timerContext, timerItemPropsContext} from './context.svelte.js';
+  import {getTimerContext, getTimerItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimerItemValueProps = $props();
 
-  let timer = timerContext.get();
-  let itemProps = timerItemPropsContext.get();
+  let timer = getTimerContext();
+  let itemProps = getTimerItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, timer.getItemValueProps(itemProps)),

package/dist/timer/item.svelte

@@ -10,11 +10,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {timerContext, timerItemPropsContext} from './context.svelte.js';
+  import {getTimerContext, setTimerItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimerItemProps = $props();
 
-  let timer = timerContext.get();
+  let timer = getTimerContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['type'])(props),
@@ -24,7 +24,7 @@
     mergeProps(otherProps, timer.getItemProps(itemProps)),
   );
 
-  timerItemPropsContext.set(() => itemProps);
+  setTimerItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/timer/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 {timerContext} from './context.svelte.js';
+  import {setTimerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
 
   let {asChild, children, ...props}: TimerProps = $props();
@@ -39,7 +39,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, timer.getRootProps()));
 
-  timerContext.set(timer);
+  setTimerContext(timer);
 </script>
 
 {#if asChild}

package/dist/timer/separator.svelte

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

package/dist/toast/action-trigger.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}: ToastActionTriggerProps = $props();
 
-  let context = toastContext.get();
+  let context = getToastContext();
 
   let mergedProps = $derived(
     mergeProps(props, context.getActionTriggerProps()),

package/dist/toast/actor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as toast$ from '@zag-js/toast';
   import type {Snippet} from 'svelte';
-  import {toastContext} from './context.svelte.js';
+  import {setToastContext} from './context.svelte.js';
   import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
 
   interface Props {
@@ -13,7 +13,7 @@
 
   let toast = createToast(actor);
 
-  toastContext.set(toast);
+  setToastContext(toast);
 </script>
 
 {@render children$(toast)}

package/dist/toast/close-trigger.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}: ToastCloseTriggerProps = $props();
 
-  let context = toastContext.get();
+  let context = getToastContext();
 
   let mergedProps = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateToastReturn } from './create-toast.svelte.js';
-export declare const toastContext: Context<CreateToastReturn>;
+export declare const getToastContext: () => CreateToastReturn, setToastContext: (context: CreateToastReturn | (() => CreateToastReturn)) => void;

package/dist/toast/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const toastContext = new Context('Toast');
+import { createContext } from '../create-context.svelte.js';
+export const [getToastContext, setToastContext] = createContext('Toast');

package/dist/toast/create-toaster.svelte.js

@@ -6,9 +6,10 @@ import { uid } from 'uid';
 export function createToaster(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
+    const id = uid();
     const machine = $derived(toast.group.machine({
         ...props,
-        id: props?.id ?? uid(),
+        id: props?.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/toast/description.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}: ToastDescriptionProps = $props();
 
-  let context = toastContext.get();
+  let context = getToastContext();
 
   let mergedProps = $derived(mergeProps(props, context.getDescriptionProps()));
 </script>

package/dist/toast/ghost-after.svelte

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

package/dist/toast/ghost-before.svelte

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

package/dist/toast/index.d.ts

@@ -7,5 +7,6 @@ export type { ToastGhostBeforeProps } from './ghost-before.svelte';
 export type { ToastProps } from './root.svelte';
 export type { ToastTitleProps } from './title.svelte';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
+export { getToastContext } from './context.svelte.js';
 export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
 export { default as Toaster, type ToasterProps } from './toaster.svelte';

package/dist/toast/index.js

@@ -1,4 +1,5 @@
 export * as Toast from './toast.js';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
+export { getToastContext } from './context.svelte.js';
 export { createToaster, } from './create-toaster.svelte.js';
 export { default as Toaster } from './toaster.svelte';

package/dist/toast/root.svelte

@@ -11,11 +11,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}: ToastProps = $props();
 
-  let toast = toastContext.get();
+  let toast = getToastContext();
 
   let mergedProps = $derived(mergeProps(props, toast.getRootProps()));
 </script>

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;
 }