ui-ingredients 0.0.37 → 0.0.38

package/dist/clipboard/indicator.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {clipboardContext} from './context.svelte.js';
+  import {getClipboardContext} from './context.svelte.js';
 
   let {
     copied = false,
@@ -19,7 +19,7 @@
     ...props
   }: ClipboardIndicatorProps = $props();
 
-  let clipboard = clipboardContext.get();
+  let clipboard = getClipboardContext();
 
   let mergedProps = $derived(
     mergeProps(props, clipboard.getIndicatorProps({copied})),

package/dist/clipboard/input.svelte

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

package/dist/clipboard/label.svelte

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

package/dist/clipboard/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 {clipboardContext} from './context.svelte.js';
+  import {setClipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
 
   let {asChild, children, ...props}: ClipboardProps = $props();
@@ -36,7 +36,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, clipboard.getRootProps()));
 
-  clipboardContext.set(clipboard);
+  setClipboardContext(clipboard);
 </script>
 
 {#if asChild}

package/dist/clipboard/trigger.svelte

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

package/dist/collapsible/content.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateCollapsibleReturn } from './create-collapsible.svelte.js';
-export declare const collapsibleContext: Context<CreateCollapsibleReturn>;
+export declare const getCollapsibleContext: () => CreateCollapsibleReturn, setCollapsibleContext: (context: CreateCollapsibleReturn | (() => CreateCollapsibleReturn)) => void;

package/dist/collapsible/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const collapsibleContext = new Context('Collapsible');
+import { createContext } from '../create-context.svelte.js';
+export const [getCollapsibleContext, setCollapsibleContext] = createContext('Collapsible');

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

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

package/dist/collapsible/index.d.ts

@@ -3,3 +3,4 @@ export type { CollapsibleContentProps } from './content.svelte';
 export type { CollapsibleProps } from './root.svelte';
 export type { CollapsibleTriggerProps } from './trigger.svelte';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { getCollapsibleContext } from './context.svelte.js';

package/dist/collapsible/index.js

@@ -1,2 +1,3 @@
 export * as Collapsible from './collapsible.js';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { getCollapsibleContext } from './context.svelte.js';

package/dist/collapsible/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 {collapsibleContext} from './context.svelte.js';
+  import {setCollapsibleContext} from './context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
 
   let {asChild, children, ...props}: CollapsibleProps = $props();
@@ -40,7 +40,7 @@
     mergeProps(otherProps, collapsible.getRootProps()),
   );
 
-  collapsibleContext.set(collapsible);
+  setCollapsibleContext(collapsible);
 </script>
 
 {#if asChild}

package/dist/collapsible/trigger.svelte

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

package/dist/color-picker/area-background.svelte

@@ -7,14 +7,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerAreaPropsContext,
-    colorPickerContext,
+    getColorPickerAreaPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerAreaBackgroundProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let areaProps = colorPickerAreaPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let areaProps = getColorPickerAreaPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getAreaBackgroundProps(areaProps)),

package/dist/color-picker/area-thumb.svelte

@@ -7,14 +7,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerAreaPropsContext,
-    colorPickerContext,
+    getColorPickerAreaPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerAreaThumbProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let areaProps = colorPickerAreaPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let areaProps = getColorPickerAreaPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getAreaThumbProps(areaProps)),

package/dist/color-picker/area.svelte

@@ -9,13 +9,13 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerAreaPropsContext,
-    colorPickerContext,
+    getColorPickerContext,
+    setColorPickerAreaPropsContext,
   } from './context.svelte.js';
 
   let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
   let areaProps: AreaProps = $derived({
     xChannel,
     yChannel,
@@ -25,7 +25,7 @@
     mergeProps(props, colorPicker.getAreaProps(areaProps)),
   );
 
-  colorPickerAreaPropsContext.set(() => areaProps);
+  setColorPickerAreaPropsContext(() => areaProps);
 </script>
 
 <div {...mergedProps}>

package/dist/color-picker/channel-input.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/channel-slider-label.svelte

@@ -9,8 +9,8 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerChannelSliderPropsContext,
-    colorPickerContext,
+    getColorPickerChannelSliderPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {
@@ -20,8 +20,8 @@
     ...props
   }: ColorPickerChannelSliderLabelProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let channelSliderProps = getColorPickerChannelSliderPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/channel-slider-thumb.svelte

@@ -8,14 +8,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerChannelSliderPropsContext,
-    colorPickerContext,
+    getColorPickerChannelSliderPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerChannelSliderThumbProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let channelSliderProps = getColorPickerChannelSliderPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/channel-slider-track.svelte

@@ -8,14 +8,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerChannelSliderPropsContext,
-    colorPickerContext,
+    getColorPickerChannelSliderPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerChannelSliderTrackProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let channelSliderProps = getColorPickerChannelSliderPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/channel-slider-value-text.svelte

@@ -6,18 +6,18 @@
 </script>
 
 <script lang="ts">
-  import {localeContext} from '../locale-provider/context.svelte.js';
+  import {getLocaleContext} from '../locale-provider/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerChannelSliderPropsContext,
-    colorPickerContext,
+    getColorPickerChannelSliderPropsContext,
+    getColorPickerContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerChannelSliderValueTextProps = $props();
 
-  let locale = localeContext.get();
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+  let locale = getLocaleContext();
+  let colorPicker = getColorPickerContext();
+  let channelSliderProps = getColorPickerChannelSliderPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/channel-slider.svelte

@@ -9,8 +9,8 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerChannelSliderPropsContext,
-    colorPickerContext,
+    getColorPickerContext,
+    setColorPickerChannelSliderPropsContext,
   } from './context.svelte.js';
 
   let {
@@ -21,7 +21,7 @@
     ...props
   }: ColorPickerChannelSliderProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
   let channelSliderProps: ChannelSliderProps = $derived({
     format,
     channel,
@@ -32,7 +32,7 @@
     mergeProps(props, colorPicker.getChannelSliderProps(channelSliderProps)),
   );
 
-  colorPickerChannelSliderPropsContext.set(() => channelSliderProps);
+  setColorPickerChannelSliderPropsContext(() => channelSliderProps);
 </script>
 
 <div {...mergedProps}>

package/dist/color-picker/content.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerContentProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getContentProps()));
 </script>

package/dist/color-picker/context.svelte.d.ts

@@ -1,8 +1,7 @@
-import { Context } from '../context.svelte.js';
 import type { AreaProps, ChannelProps, ChannelSliderProps, SwatchProps } from '@zag-js/color-picker';
 import type { CreateColorPickerReturn } from './create-color-picker.svelte.js';
-export declare const colorPickerContext: Context<CreateColorPickerReturn>;
-export declare const colorPickerAreaPropsContext: Context<AreaProps>;
-export declare const colorPickerSwatchPropsContext: Context<SwatchProps>;
-export declare const colorPickerChannelPropsContext: Context<ChannelProps>;
-export declare const colorPickerChannelSliderPropsContext: Context<ChannelSliderProps>;
+export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => void;
+export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => void;
+export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => void;
+export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => void;
+export declare const getColorPickerChannelSliderPropsContext: () => ChannelSliderProps, setColorPickerChannelSliderPropsContext: (context: ChannelSliderProps | (() => ChannelSliderProps)) => void;

package/dist/color-picker/context.svelte.js

@@ -1,6 +1,6 @@
-import { Context } from '../context.svelte.js';
-export const colorPickerContext = new Context('ColorPicker');
-export const colorPickerAreaPropsContext = new Context('ColorPickerArea');
-export const colorPickerSwatchPropsContext = new Context('ColorPickerSwatch');
-export const colorPickerChannelPropsContext = new Context('ColorPickerChannel');
-export const colorPickerChannelSliderPropsContext = new Context('ColorPickerChannelSlider');
+import { createContext } from '../create-context.svelte.js';
+export const [getColorPickerContext, setColorPickerContext] = createContext('ColorPicker');
+export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea');
+export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch');
+export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel');
+export const [getColorPickerChannelSliderPropsContext, setColorPickerChannelSliderPropsContext,] = createContext('ColorPickerChannelSlider');

package/dist/color-picker/control.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerControlProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getControlProps()));
 </script>

package/dist/color-picker/create-color-picker.svelte.js

@@ -6,15 +6,17 @@ import { uid } from 'uid';
 export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(colorPicker.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,
         value: props.value ? colorPicker.parse(props.value) : undefined,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    }));
+    })));
+    const [state, send] = useMachine(colorPicker.machine(context), { context });
     const api = $derived(reflect(() => colorPicker.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/color-picker/eye-dropper-trigger.svelte

@@ -7,11 +7,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerEyeDropperTriggerProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getEyeDropperTriggerProps()),

package/dist/color-picker/format-select.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerFormatSelectProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getFormatSelectProps()),

package/dist/color-picker/format-trigger.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerFormatTriggerProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getFormatTriggerProps()),

package/dist/color-picker/hidden-input.svelte

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

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

@@ -25,3 +25,4 @@ export type { ColorPickerTransparencyGridProps } from './transparency-grid.svelt
 export type { ColorPickerTriggerProps } from './trigger.svelte';
 export type { ColorPickerValueTextProps } from './value-text.svelte';
 export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
+export { getColorPickerContext } from './context.svelte.js';

package/dist/color-picker/index.js

@@ -1,2 +1,3 @@
 export * as ColorPicker from './color-picker.js';
 export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
+export { getColorPickerContext } from './context.svelte.js';

package/dist/color-picker/label.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerLabelProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getLabelProps()));
 </script>

package/dist/color-picker/positioner.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerPositionerProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getPositionerProps()),