ui-ingredients 0.0.37 → 0.0.39

package/dist/signature-pad/create-signature-pad.svelte.js

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

package/dist/signature-pad/current-segment-path.svelte

@@ -9,12 +9,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {signaturePadContext} from './context.svelte.js';
+  import {getSignaturePadContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SignaturePadCurrentSegmentPathProps =
     $props();
 
-  let signaturePad = signaturePadContext.get();
+  let signaturePad = getSignaturePadContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/signature-pad/guide.svelte

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

package/dist/signature-pad/hidden-input.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {signaturePadContext} from './context.svelte.js';
+  import {getSignaturePadContext} from './context.svelte.js';
 
   let {value, ...props}: SignaturePadHiddenInputProps = $props();
 
-  let signaturePad = signaturePadContext.get();
+  let signaturePad = getSignaturePadContext();
 
   let mergedProps = $derived(
     mergeProps(props, signaturePad.getHiddenInputProps({value})),

package/dist/signature-pad/index.d.ts

@@ -9,3 +9,4 @@ export type { SignaturePadProps } from './root.svelte';
 export type { SignaturePadSegmentPathProps } from './segment-path.svelte';
 export type { SignaturePadSegmentProps } from './segment.svelte';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
+export { getSignaturePadContext } from './context.svelte.js';

package/dist/signature-pad/index.js

@@ -1,2 +1,3 @@
 export * as SignaturePad from './signature-pad.js';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
+export { getSignaturePadContext } from './context.svelte.js';

package/dist/signature-pad/label.svelte

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

package/dist/signature-pad/root.svelte

@@ -20,7 +20,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {signaturePadContext} from './context.svelte.js';
+  import {setSignaturePadContext} from './context.svelte.js';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
 
   let {asChild, children, ...props}: SignaturePadProps = $props();
@@ -46,7 +46,7 @@
     mergeProps(otherProps, signaturePad.getRootProps()),
   );
 
-  signaturePadContext.set(signaturePad);
+  setSignaturePadContext(signaturePad);
 </script>
 
 {#if asChild}

package/dist/signature-pad/segment-path.svelte

@@ -10,12 +10,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {signaturePadContext} from './context.svelte.js';
+  import {getSignaturePadContext} from './context.svelte.js';
 
   let {path, asChild, children, ...props}: SignaturePadSegmentPathProps =
     $props();
 
-  let signaturePad = signaturePadContext.get();
+  let signaturePad = getSignaturePadContext();
 
   let mergedProps = $derived(
     mergeProps(props, signaturePad.getSegmentPathProps({path})),

package/dist/signature-pad/segment.svelte

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

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

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ThumbProps } from '@zag-js/slider';
 import type { CreateSliderReturn } from './create-slider.svelte.js';
-export declare const sliderContext: Context<CreateSliderReturn>;
-export declare const sliderThumbPropsContext: Context<ThumbProps>;
+export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => void;
+export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => void;

package/dist/slider/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const sliderContext = new Context('Slider');
-export const sliderThumbPropsContext = new Context('SliderThumb');
+import { createContext } from '../create-context.svelte.js';
+export const [getSliderContext, setSliderContext] = createContext('Slider');
+export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb');

package/dist/slider/control.svelte

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

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

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

package/dist/slider/hidden-input.svelte

@@ -6,12 +6,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
+  import {
+    getSliderContext,
+    getSliderThumbPropsContext,
+  } from './context.svelte.js';
 
   let {...props}: SliderHiddenInputProps = $props();
 
-  let slider = sliderContext.get();
-  let thumbProps = sliderThumbPropsContext.get();
+  let slider = getSliderContext();
+  let thumbProps = getSliderThumbPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, slider.getHiddenInputProps(thumbProps)),

package/dist/slider/index.d.ts

@@ -10,3 +10,4 @@ export type { SliderThumbProps } from './thumb.svelte';
 export type { SliderTrackProps } from './track.svelte';
 export type { SliderValueTextProps } from './value-text.svelte';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export { getSliderContext } from './context.svelte.js';

package/dist/slider/index.js

@@ -1,2 +1,3 @@
 export * as Slider from './slider.js';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export { getSliderContext } from './context.svelte.js';

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

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

package/dist/slider/marker.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {sliderContext} from './context.svelte.js';
+  import {getSliderContext} from './context.svelte.js';
 
   let {value, asChild, children, ...props}: SliderMarkerProps = $props();
 
-  let slider = sliderContext.get();
+  let slider = getSliderContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/slider/range.svelte

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

package/dist/slider/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 {sliderContext} from './context.svelte.js';
+  import {setSliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
 
   let {asChild, children, ...props}: SliderProps = $props();
@@ -53,7 +53,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, slider.getRootProps()));
 
-  sliderContext.set(slider);
+  setSliderContext(slider);
 </script>
 
 {#if asChild}

package/dist/slider/thumb.svelte

@@ -11,11 +11,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
+  import {
+    getSliderContext,
+    setSliderThumbPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SliderThumbProps = $props();
 
-  let slider = sliderContext.get();
+  let slider = getSliderContext();
 
   let [thumbProps, otherProps] = $derived(
     createSplitProps<ThumbProps>(['name', 'index'])(props),
@@ -25,7 +28,7 @@
     mergeProps(otherProps, slider.getThumbProps(thumbProps)),
   );
 
-  sliderThumbPropsContext.set(() => thumbProps);
+  setSliderThumbPropsContext(() => thumbProps);
 </script>
 
 {#if asChild}

package/dist/slider/track.svelte

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

package/dist/slider/value-text.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateSplitterReturn } from './create-splitter.svelte.js';
-export declare const splitterContext: Context<CreateSplitterReturn>;
+export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => void;

package/dist/splitter/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const splitterContext = new Context('Splitter');
+import { createContext } from '../create-context.svelte.js';
+export const [getSplitterContext, setSplitterContext] = createContext('Splitter');

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

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

package/dist/splitter/index.d.ts

@@ -3,3 +3,4 @@ export type { SplitterPanelProps } from './panel.svelte';
 export type { SplitterResizeTriggerProps } from './resize-trigger.svelte';
 export type { SplitterProps } from './root.svelte';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
+export { getSplitterContext } from './context.svelte.js';

package/dist/splitter/index.js

@@ -1,2 +1,3 @@
 export * as Splitter from './splitter.js';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
+export { getSplitterContext } from './context.svelte.js';

package/dist/splitter/panel.svelte

@@ -11,11 +11,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {splitterContext} from './context.svelte.js';
+  import {getSplitterContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SplitterPanelProps = $props();
 
-  let splitter = splitterContext.get();
+  let splitter = getSplitterContext();
 
   let [panelProps, otherProps] = $derived(
     createSplitProps<PanelProps>(['id', 'snapSize'])(props),

package/dist/splitter/resize-trigger.svelte

@@ -22,11 +22,11 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import type {Snippet} from 'svelte';
-  import {splitterContext} from './context.svelte.js';
+  import {getSplitterContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SplitterResizeTriggerProps = $props();
 
-  let splitter = splitterContext.get();
+  let splitter = getSplitterContext();
 
   let [resizeTriggerProps, otherProps] = $derived(
     createSplitProps<ResizeTriggerProps>(['id', 'step', 'disabled'])(props),

package/dist/splitter/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 {splitterContext} from './context.svelte.js';
+  import {setSplitterContext} from './context.svelte.js';
   import {createSplitter} from './create-splitter.svelte.js';
 
   let {asChild, children, ...props}: SplitterProps = $props();
@@ -37,7 +37,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, splitter.getRootProps()));
 
-  splitterContext.set(splitter);
+  setSplitterContext(splitter);
 </script>
 
 {#if asChild}

package/dist/steps/completed-content.svelte

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

package/dist/steps/content.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext} from './context.svelte.js';
+  import {getStepsContext} from './context.svelte.js';
 
   let {index, asChild, children, ...props}: StepsContentProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let mergedProps = $derived(mergeProps(props, steps.getContentProps({index})));
 </script>

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

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/steps';
 import type { CreateStepsReturn } from './create-steps.svelte.js';
-export declare const stepsContext: Context<CreateStepsReturn>;
-export declare const stepsItemPropsContext: Context<ItemProps>;
+export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => void;
+export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/steps/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const stepsContext = new Context('Steps');
-export const stepsItemPropsContext = new Context('StepsItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getStepsContext, setStepsContext] = createContext('Steps');
+export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem');

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

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

package/dist/steps/index.d.ts

@@ -11,3 +11,4 @@ export type { StepsProps } from './root.svelte';
 export type { StepsSeparatorProps } from './separator.svelte';
 export type { StepsTriggerProps } from './trigger.svelte';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export { getStepsContext } from './context.svelte.js';

package/dist/steps/index.js

@@ -1,2 +1,3 @@
 export * as Steps from './steps.js';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export { getStepsContext } from './context.svelte.js';

package/dist/steps/indicator.svelte

@@ -8,13 +8,13 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsIndicatorProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
-  let itemProps = stepsItemPropsContext.get();
+  let itemProps = getStepsItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, steps.getIndicatorProps(itemProps)),

package/dist/steps/item.svelte

@@ -13,11 +13,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, setStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsItemProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
@@ -29,7 +29,7 @@
     mergeProps(otherProps, steps.getItemProps(itemProps)),
   );
 
-  stepsItemPropsContext.set(() => itemProps);
+  setStepsItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/steps/list.svelte

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

package/dist/steps/next-trigger.svelte

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

package/dist/steps/prev-trigger.svelte

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

package/dist/steps/progress.svelte

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