ui-ingredients 0.0.36 → 0.0.38

package/dist/popover/popover.d.ts

@@ -7,4 +7,3 @@ export { default as Positioner } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';
 export { default as Trigger } from './trigger.svelte';
-export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/popover/popover.js

@@ -7,4 +7,3 @@ export { default as Positioner } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';
 export { default as Trigger } from './trigger.svelte';
-export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/popover/positioner.svelte

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

package/dist/popover/root.svelte

@@ -11,14 +11,14 @@
 </script>
 
 <script lang="ts">
-  import {popoverContext} from './context.svelte.js';
+  import {setPopoverContext} from './context.svelte.js';
   import {createPopover} from './create-popover.svelte.js';
 
   let {children, ...props}: PopoverProps = $props();
 
   let popover = createPopover(props);
 
-  popoverContext.set(popover);
+  setPopoverContext(popover);
 </script>
 
 {@render children?.(popover)}

package/dist/popover/title.svelte

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

package/dist/popover/trigger.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreatePresenceReturn } from './create-presence.svelte.js';
-export declare const presenceContext: Context<CreatePresenceReturn>;
+export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;

package/dist/presence/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const presenceContext = new Context('Presence');
+import { createContext } from '../create-context.svelte.js';
+export const [getPresenceContext, setPresenceContext] = createContext('Presence');

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

@@ -1,10 +1,11 @@
 import * as presence from '@zag-js/presence';
-import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPresence(props) {
-    const [state, send] = useMachine(presence.machine({
+    const context = $derived(reflect(() => ({
         present: props.present,
         immediate: false,
-    }));
+    })));
+    const [state, send] = useMachine(presence.machine(context), { context });
     const api = $derived(presence.connect(state, send, normalizeProps));
     function ref(node) {
         function update(elem) {

package/dist/progress/circle-range.svelte

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

package/dist/progress/circle-track.svelte

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

package/dist/progress/circle.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateProgressReturn } from './create-progress.svelte.js';
-export declare const progressContext: Context<CreateProgressReturn>;
+export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => void;

package/dist/progress/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const progressContext = new Context('Progress');
+import { createContext } from '../create-context.svelte.js';
+export const [getProgressContext, setProgressContext] = createContext('Progress');

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

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

package/dist/progress/index.d.ts

@@ -9,3 +9,4 @@ export type { ProgressTrackProps } from './track.svelte';
 export type { ProgressValueTextProps } from './value-text.svelte';
 export type { ProgressViewProps } from './view.svelte';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { getProgressContext } from './context.svelte.js';

package/dist/progress/index.js

@@ -1,2 +1,3 @@
 export * as Progress from './progress.js';
 export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { getProgressContext } from './context.svelte.js';

package/dist/progress/label.svelte

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

package/dist/progress/range.svelte

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

package/dist/progress/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 {progressContext} from './context.svelte.js';
+  import {setProgressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
   let {asChild, children, ...props}: ProgressProps = $props();
@@ -38,7 +38,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, progress.getRootProps()));
 
-  progressContext.set(progress);
+  setProgressContext(progress);
 </script>
 
 {#if asChild}

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

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

package/dist/progress/view.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {progressContext} from './context.svelte.js';
+  import {getProgressContext} from './context.svelte.js';
 
   let {state, asChild, children, ...props}: ProgressViewProps = $props();
 
-  let progress = progressContext.get();
+  let progress = getProgressContext();
 
   let mergedProps = $derived(mergeProps(props, progress.getViewProps({state})));
 </script>

package/dist/qr-code/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateQrCodeReturn } from './create-qr-code.svelte.js';
-export declare const qrCodeContext: Context<CreateQrCodeReturn>;
+export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => void;

package/dist/qr-code/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const qrCodeContext = new Context('QRCode');
+import { createContext } from '../create-context.svelte.js';
+export const [getQrCodeContext, setQrCodeContext] = createContext('QRCode');

package/dist/qr-code/create-qr-code.svelte.js

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

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/index.d.ts

@@ -4,3 +4,4 @@ export type { QrCodeOverlayProps } from './overlay.svelte';
 export type { QrCodePatternProps } from './pattern.svelte';
 export type { QrCodeProps } from './root.svelte';
 export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
+export { getQrCodeContext } from './context.svelte.js';

package/dist/qr-code/index.js

@@ -1,2 +1,3 @@
 export * as QrCode from './qr-code.js';
 export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
+export { getQrCodeContext } from './context.svelte.js';

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/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 {qrCodeContext} from './context.svelte.js';
+  import {setQrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
 
   let {asChild, children, ...props}: QrCodeProps = $props();
@@ -32,7 +32,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, qrCode.getRootProps()));
 
-  qrCodeContext.set(qrCode);
+  setQrCodeContext(qrCode);
 </script>
 
 {#if asChild}

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

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateRadioGroupReturn } from './create-radio-group.svelte.js';
-export declare const radioGroupContext: Context<CreateRadioGroupReturn>;
-export declare const radioGroupItemPropsContext: Context<ItemProps>;
+export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => void;
+export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

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

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const radioGroupContext = new Context('RadioGroup');
-export const radioGroupItemPropsContext = new Context('RadioGroupItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getRadioGroupContext, setRadioGroupContext] = createContext('RadioGroup');
+export const [getRadioGroupItemPropsContext, setRadioGroupItemPropsContext] = createContext('RadioGroupItem');

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

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

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

@@ -7,3 +7,4 @@ export type { RadioGroupItemProps } from './item.svelte';
 export type { RadioGroupLabelProps } from './label.svelte';
 export type { RadioGroupProps } from './root.svelte';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
+export { getRadioGroupContext } from './context.svelte.js';

package/dist/radio-group/index.js

@@ -1,2 +1,3 @@
 export * as RadioGroup from './radio-group.js';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
+export { getRadioGroupContext } from './context.svelte.js';

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    radioGroupContext,
-    radioGroupItemPropsContext,
+    getRadioGroupContext,
+    getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: RadioGroupItemControlProps = $props();
 
-  let radioGroup = radioGroupContext.get();
-  let itemProps = radioGroupItemPropsContext.get();
+  let radioGroup = getRadioGroupContext();
+  let itemProps = getRadioGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, radioGroup.getItemControlProps(itemProps)),

package/dist/radio-group/item-hidden-input.svelte

@@ -7,14 +7,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    radioGroupContext,
-    radioGroupItemPropsContext,
+    getRadioGroupContext,
+    getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {...props}: RadioGroupItemHiddenInputProps = $props();
 
-  let radioGroup = radioGroupContext.get();
-  let itemProps = radioGroupItemPropsContext.get();
+  let radioGroup = getRadioGroupContext();
+  let itemProps = getRadioGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, radioGroup.getItemHiddenInputProps(itemProps)),

package/dist/radio-group/item-text.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    radioGroupContext,
-    radioGroupItemPropsContext,
+    getRadioGroupContext,
+    getRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: RadioGroupItemTextProps = $props();
 
-  let radioGroup = radioGroupContext.get();
-  let itemProps = radioGroupItemPropsContext.get();
+  let radioGroup = getRadioGroupContext();
+  let itemProps = getRadioGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, radioGroup.getItemTextProps(itemProps)),

package/dist/radio-group/item.svelte

@@ -14,24 +14,25 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import {
-    radioGroupContext,
-    radioGroupItemPropsContext,
+    getRadioGroupContext,
+    setRadioGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {children, asChild, ...props}: RadioGroupItemProps = $props();
 
-  let radioGroup = radioGroupContext.get();
+  let radioGroup = getRadioGroupContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
   );
 
   let itemState = $derived(radioGroup.getItemState(itemProps));
+
   let mergedProps = $derived(
     mergeProps(otherProps, radioGroup.getItemProps(itemProps)),
   );
 
-  radioGroupItemPropsContext.set(() => itemProps);
+  setRadioGroupItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/radio-group/label.svelte

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

package/dist/radio-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 {radioGroupContext} from './context.svelte.js';
+  import {setRadioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
 
   let {asChild, children, ...props}: RadioGroupProps = $props();
@@ -40,7 +40,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, radioGroup.getRootProps()));
 
-  radioGroupContext.set(radioGroup);
+  setRadioGroupContext(radioGroup);
 </script>
 
 {#if asChild}

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateRatingGroupReturn } from './create-rating-group.svelte.js';
-export declare const ratingGroupContext: Context<CreateRatingGroupReturn>;
+export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => void;

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

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const ratingGroupContext = new Context('RatingGroup');
+import { createContext } from '../create-context.svelte.js';
+export const [getRatingGroupContext, setRatingGroupContext] = createContext('RatingGroup');

package/dist/rating-group/control.svelte

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