ui-ingredients 0.0.37 → 0.0.38

package/dist/menu/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}: MenuTriggerProps = $props();
 
-  let menu = menuContext.get();
+  let menu = getMenuContext();
 
   let mergedProps = $derived(mergeProps(props, menu.getTriggerProps()));
 </script>

package/dist/number-input/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateNumberInputReturn } from './create-number-input.svelte.js';
-export declare const numberInputContext: Context<CreateNumberInputReturn>;
+export declare const getNumberInputContext: () => CreateNumberInputReturn, setNumberInputContext: (context: CreateNumberInputReturn | (() => CreateNumberInputReturn)) => void;

package/dist/number-input/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const numberInputContext = new Context('NumberInput');
+import { createContext } from '../create-context.svelte.js';
+export const [getNumberInputContext, setNumberInputContext] = createContext('NumberInput');

package/dist/number-input/control.svelte

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

package/dist/number-input/create-number-input.svelte.js

@@ -8,7 +8,8 @@ export function createNumberInput(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(numberInput.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -18,11 +19,12 @@ export function createNumberInput(props) {
         readOnly: field?.readOnly,
         required: field?.required,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(numberInput.machine(context), { context });
     const api = $derived(reflect(() => {
         const o = numberInput.connect(state, send, normalizeProps);
         return {

package/dist/number-input/decrement-trigger.svelte

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

package/dist/number-input/increment-trigger.svelte

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

package/dist/number-input/index.d.ts

@@ -7,3 +7,4 @@ export type { NumberInputLabelProps } from './label.svelte';
 export type { NumberInputProps } from './root.svelte';
 export type { NumberInputScrubberProps } from './scrubber.svelte';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
+export { getNumberInputContext } from './context.svelte.js';

package/dist/number-input/index.js

@@ -1,2 +1,3 @@
 export * as NumberInput from './number-input.js';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
+export { getNumberInputContext } from './context.svelte.js';

package/dist/number-input/input.svelte

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

package/dist/number-input/label.svelte

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

package/dist/number-input/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 {numberInputContext} from './context.svelte.js';
+  import {setNumberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
 
   let {asChild, children, ...props}: NumberInputProps = $props();
@@ -58,7 +58,7 @@
     mergeProps(otherProps, numberInput.getRootProps()),
   );
 
-  numberInputContext.set(numberInput);
+  setNumberInputContext(numberInput);
 </script>
 
 {#if asChild}

package/dist/number-input/scrubber.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreatePaginationReturn } from './create-pagination.svelte.js';
-export declare const paginationContext: Context<CreatePaginationReturn>;
+export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => void;

package/dist/pagination/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const paginationContext = new Context('Pagination');
+import { createContext } from '../create-context.svelte.js';
+export const [getPaginationContext, setPaginationContext] = createContext('Pagination');

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

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

package/dist/pagination/ellipsis.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {paginationContext} from './context.svelte.js';
+  import {getPaginationContext} from './context.svelte.js';
 
   let {index, asChild, children, ...props}: PaginationEllipsisProps = $props();
 
-  let pagination = paginationContext.get();
+  let pagination = getPaginationContext();
 
   let mergedProps = $derived(
     mergeProps(props, pagination.getEllipsisProps({index})),

package/dist/pagination/index.d.ts

@@ -5,3 +5,4 @@ export type { PaginationNextTriggerProps } from './next-trigger.svelte';
 export type { PaginationPrevTriggerProps } from './prev-trigger.svelte';
 export type { PaginationProps } from './root.svelte';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';
+export { getPaginationContext } from './context.svelte.js';

package/dist/pagination/index.js

@@ -1,2 +1,3 @@
 export * as Pagination from './pagination.js';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';
+export { getPaginationContext } from './context.svelte.js';

package/dist/pagination/item.svelte

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

package/dist/pagination/next-trigger.svelte

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

package/dist/pagination/prev-trigger.svelte

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

package/dist/pagination/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 {paginationContext} from './context.svelte.js';
+  import {setPaginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
 
   let {asChild, children, ...props}: PaginationProps = $props();
@@ -41,7 +41,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, pagination.getRootProps()));
 
-  paginationContext.set(pagination);
+  setPaginationContext(pagination);
 </script>
 
 {#if asChild}

package/dist/pin-input/clear-trigger.svelte

@@ -9,11 +9,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
-  import {pinInputContext} from './context.svelte.js';
+  import {getPinInputContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
 
-  let pinInput = pinInputContext.get();
+  let pinInput = getPinInputContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/pin-input/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
-export declare const pinInputContext: Context<CreatePinInputReturn>;
+export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => void;

package/dist/pin-input/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const pinInputContext = new Context('PinInput');
+import { createContext } from '../create-context.svelte.js';
+export const [getPinInputContext, setPinInputContext] = createContext('PinInput');

package/dist/pin-input/create-pin-input.svelte.js

@@ -8,7 +8,8 @@ export function createPinInputContext(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(pinInput.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +19,11 @@ export function createPinInputContext(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(pinInput.machine(context), { context });
     const api = $derived(reflect(() => {
         const o = pinInput.connect(state, send, normalizeProps);
         return {

package/dist/pin-input/hidden-input.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {pinInputContext} from './context.svelte.js';
+  import {getPinInputContext} from './context.svelte.js';
 
   let {...props}: PinInputHiddenInputProps = $props();
 
-  let pinInput = pinInputContext.get();
+  let pinInput = getPinInputContext();
 
   let mergedProps = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
 </script>

package/dist/pin-input/index.d.ts

@@ -5,3 +5,4 @@ export type { PinInputInputProps } from './input.svelte';
 export type { PinInputLabelProps } from './label.svelte';
 export type { PinInputProps } from './root.svelte';
 export { anatomy as pinInputAnatomy } from './anatomy.js';
+export { getPinInputContext } from './context.svelte.js';

package/dist/pin-input/index.js

@@ -1,2 +1,3 @@
 export * as PinInput from './pin-input.js';
 export { anatomy as pinInputAnatomy } from './anatomy.js';
+export { getPinInputContext } from './context.svelte.js';

package/dist/pin-input/input.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {pinInputContext} from './context.svelte.js';
+  import {getPinInputContext} from './context.svelte.js';
 
   let {index, asChild, ...props}: PinInputInputProps = $props();
 
-  let pinInput = pinInputContext.get();
+  let pinInput = getPinInputContext();
 
   let mergedProps = $derived(
     mergeProps(props, pinInput.getInputProps({index})),

package/dist/pin-input/label.svelte

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

package/dist/pin-input/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 {pinInputContext} from './context.svelte.js';
+  import {setPinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
 
   let {asChild, children, ...props}: PinInputProps = $props();
@@ -52,7 +52,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, pinInput.getRootProps()));
 
-  pinInputContext.set(pinInput);
+  setPinInputContext(pinInput);
 </script>
 
 {#if asChild}

package/dist/popover/arrow-tip.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}: PopoverArrowTipProps = $props();
 
-  let popover = popoverContext.get();
+  let popover = getPopoverContext();
 
   let mergedProps = $derived(mergeProps(props, popover.getArrowTipProps()));
 </script>

package/dist/popover/arrow.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}: PopoverArrowProps = $props();
 
-  let popover = popoverContext.get();
+  let popover = getPopoverContext();
 
   let mergedProps = $derived(mergeProps(props, popover.getArrowProps()));
 </script>

package/dist/popover/close-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}: PopoverCloseTriggerProps = $props();
 
-  let popover = popoverContext.get();
+  let popover = getPopoverContext();
 
   let mergedProps = $derived(mergeProps(props, popover.getCloseTriggerProps()));
 </script>

package/dist/popover/content.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}: PopoverContentProps = $props();
 
-  let popover = popoverContext.get();
+  let popover = getPopoverContext();
 
   let mergedProps = $derived(mergeProps(props, popover.getContentProps()));
 </script>

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreatePopoverReturn } from './create-popover.svelte.js';
-export declare const popoverContext: Context<CreatePopoverReturn>;
+export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => void;

package/dist/popover/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const popoverContext = new Context('Popover');
+import { createContext } from '../create-context.svelte.js';
+export const [getPopoverContext, setPopoverContext] = createContext('Popover');

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

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

package/dist/popover/description.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}: PopoverDescriptionProps = $props();
 
-  let popover = popoverContext.get();
+  let popover = getPopoverContext();
 
   let mergedProps = $derived(mergeProps(props, popover.getDescriptionProps()));
 </script>

package/dist/popover/index.d.ts

@@ -8,3 +8,5 @@ export type { PopoverPositionerProps } from './positioner.svelte';
 export type { PopoverProps } from './root.svelte';
 export type { PopoverTitleProps } from './title.svelte';
 export type { PopoverTriggerProps } from './trigger.svelte';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';
+export { getPopoverContext } from './context.svelte.js';

package/dist/popover/index.js

@@ -1 +1,3 @@
 export * as Popover from './popover.js';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';
+export { getPopoverContext } from './context.svelte.js';

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;