ui-ingredients 0.0.37 → 0.0.39

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

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

package/dist/dialog/description.svelte

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

package/dist/dialog/index.d.ts

@@ -8,3 +8,4 @@ export type { DialogProps } from './root.svelte';
 export type { DialogTitleProps } from './title.svelte';
 export type { DialogTriggerProps } from './trigger.svelte';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export { getDialogContext } from './context.svelte.js';

package/dist/dialog/index.js

@@ -1,2 +1,3 @@
 export * as Dialog from './dialog.js';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export { getDialogContext } from './context.svelte.js';

package/dist/dialog/positioner.svelte

@@ -9,11 +9,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {dialogContext} from './context.svelte.js';
+  import {getDialogContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: DialogPositionerProps = $props();
 
-  let dialog = dialogContext.get();
+  let dialog = getDialogContext();
 
   let mergedProps = $derived(mergeProps(props, dialog.getPositionerProps()));
 </script>

package/dist/dialog/root.svelte

@@ -11,14 +11,14 @@
 </script>
 
 <script lang="ts">
-  import {dialogContext} from './context.svelte.js';
+  import {setDialogContext} from './context.svelte.js';
   import {createDialog} from './create-dialog.svelte.js';
 
   let {children, ...props}: DialogProps = $props();
 
   let dialog = createDialog(props);
 
-  dialogContext.set(dialog);
+  setDialogContext(dialog);
 </script>
 
 {@render children?.(dialog)}

package/dist/dialog/title.svelte

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

package/dist/dialog/trigger.svelte

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

package/dist/editable/area.svelte

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

package/dist/editable/cancel-trigger.svelte

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

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateEditableReturn } from './create-editable.svelte.js';
-export declare const editableContext: Context<CreateEditableReturn>;
+export declare const getEditableContext: () => CreateEditableReturn, setEditableContext: (context: CreateEditableReturn | (() => CreateEditableReturn)) => void;

package/dist/editable/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const editableContext = new Context('Editable');
+import { createContext } from '../create-context.svelte.js';
+export const [getEditableContext, setEditableContext] = createContext('Editable');

package/dist/editable/control.svelte

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

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

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

package/dist/editable/edit-trigger.svelte

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

package/dist/editable/index.d.ts

@@ -9,3 +9,4 @@ export type { EditablePreviewProps } from './preview.svelte';
 export type { EditableProps } from './root.svelte';
 export type { EditableSubmitTriggerProps } from './submit-trigger.svelte';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { getEditableContext } from './context.svelte.js';

package/dist/editable/index.js

@@ -1,2 +1,3 @@
 export * as Editable from './editable.js';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { getEditableContext } from './context.svelte.js';

package/dist/editable/input.svelte

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

package/dist/editable/label.svelte

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

package/dist/editable/preview.svelte

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

package/dist/editable/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 {editableContext} from './context.svelte.js';
+  import {setEditableContext} from './context.svelte.js';
   import {createEditable} from './create-editable.svelte.js';
 
   let {asChild, children, ...props}: EditableProps = $props();
@@ -57,7 +57,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, editable.getRootProps()));
 
-  editableContext.set(editable);
+  setEditableContext(editable);
 </script>
 
 {#if asChild}

package/dist/editable/submit-trigger.svelte

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

package/dist/environment-provider/context.svelte.d.ts

@@ -1,8 +1,6 @@
-import { Context } from '../context.svelte.js';
 export interface Environment {
     getRootNode: () => ShadowRoot | Document | Node;
     getDocument: () => Document;
     getWindow: () => Window & typeof globalThis;
 }
-export declare const environmentContext: Context<Environment>;
-export declare const getEnvironmentContext: () => Environment | null;
+export declare const getEnvironmentContext: () => Environment, setEnvironmentContext: (context: Environment | (() => Environment)) => void;

package/dist/environment-provider/context.svelte.js

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const environmentContext = new Context('EnvironmentProvider', false);
-export const getEnvironmentContext = () => environmentContext.get();
+import { createContext } from '../create-context.svelte.js';
+export const [getEnvironmentContext, setEnvironmentContext] = createContext('EnvironmentProvider', false);

package/dist/environment-provider/root.svelte

@@ -14,7 +14,7 @@
 
 <script lang="ts">
   import {getDocument, getWindow} from '@zag-js/dom-query';
-  import {environmentContext} from './context.svelte.js';
+  import {setEnvironmentContext} from './context.svelte.js';
 
   let {rootNode, children}: EnvironmentProviderProps = $props();
 
@@ -34,7 +34,7 @@
     getWindow: () => getWindow(getRootNode()),
   });
 
-  environmentContext.set(() => environment);
+  setEnvironmentContext(() => environment);
 </script>
 
 {@render children()}

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

@@ -1,4 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateFieldReturn } from './create-field.svelte.js';
-export declare const fieldContext: Context<CreateFieldReturn>;
-export declare const getFieldContext: () => CreateFieldReturn | null;
+export declare const getFieldContext: () => CreateFieldReturn, setFieldContext: (context: CreateFieldReturn | (() => CreateFieldReturn)) => void;

package/dist/field/context.svelte.js

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const fieldContext = new Context('Field', false);
-export const getFieldContext = () => fieldContext.get();
+import { createContext } from '../create-context.svelte.js';
+export const [getFieldContext, setFieldContext] = createContext('Field', false);

package/dist/field/error-text.svelte

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

package/dist/field/helper-text.svelte

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

package/dist/field/index.d.ts

@@ -1,4 +1,4 @@
-export { anatomy as fieldAnatomy } from './anatomy.js';
+export * as Field from './field.js';
 export type { FieldErrorTextProps } from './error-text.svelte';
 export type { FieldHelperTextProps } from './helper-text.svelte';
 export type { FieldInputProps } from './input.svelte';
@@ -6,4 +6,5 @@ export type { FieldLabelProps } from './label.svelte';
 export type { FieldProps } from './root.svelte';
 export type { FieldSelectProps } from './select.svelte';
 export type { FieldTextareaProps } from './textarea.svelte';
-export * as Field from './field.js';
+export { anatomy as fieldAnatomy } from './anatomy.js';
+export { getFieldContext } from './context.svelte.js';

package/dist/field/index.js

@@ -1,2 +1,3 @@
-export { anatomy as fieldAnatomy } from './anatomy.js';
 export * as Field from './field.js';
+export { anatomy as fieldAnatomy } from './anatomy.js';
+export { getFieldContext } from './context.svelte.js';

package/dist/field/input.svelte

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

package/dist/field/label.svelte

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

package/dist/field/root.svelte

@@ -13,26 +13,29 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {fieldContext} from './context.svelte.js';
+  import {setFieldContext} from './context.svelte.js';
   import {createField} from './create-field.svelte.js';
 
   let {asChild, children, ...props}: FieldProps = $props();
 
-  let [fieldProps, otherProps] = createSplitProps<CreateFieldProps>([
-    'id',
-    'ids',
-    'invalid',
-    'disabled',
-    'readOnly',
-    'required',
-  ])(props);
+  let [fieldProps, otherProps] = $derived(
+    createSplitProps<CreateFieldProps>([
+      'id',
+      'ids',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+    ])(props),
+  );
 
-  let field = createField(fieldProps);
+  let field = createField(reflect(() => fieldProps));
 
   let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
 
-  fieldContext.set(field);
+  setFieldContext(field);
 </script>
 
 {#if asChild}

package/dist/field/select.svelte

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

package/dist/field/textarea.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {fieldContext} from './context.svelte.js';
+  import {getFieldContext} from './context.svelte.js';
 
   let {asChild, ...props}: FieldTextareaProps = $props();
 
-  let field = fieldContext.get();
+  let field = getFieldContext();
 
   let mergedProps = $derived(mergeProps(props, field.getTextareaProps()));
 </script>

package/dist/file-upload/context.svelte.d.ts

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/file-upload';
 import type { CreateFileUploadReturn } from './create-file-upload.svelte.js';
-export declare const fileUploadContext: Context<CreateFileUploadReturn>;
-export declare const fileUploadItemPropsContext: Context<ItemProps>;
+export declare const getFileUploadContext: () => CreateFileUploadReturn, setFileUploadContext: (context: CreateFileUploadReturn | (() => CreateFileUploadReturn)) => void;
+export declare const getFileUploadItemPropsContext: () => ItemProps, setFileUploadItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/file-upload/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const fileUploadContext = new Context('FileUpload');
-export const fileUploadItemPropsContext = new Context('FileUploadItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getFileUploadContext, setFileUploadContext] = createContext('FileUpload');
+export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem');

package/dist/file-upload/create-file-upload.svelte.js

@@ -8,7 +8,8 @@ export function createFileUpload(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(fileUpload.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -16,11 +17,12 @@ export function createFileUpload(props) {
         disabled: field?.disabled,
         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(fileUpload.machine(context), { context });
     const api = $derived(reflect(() => {
         const o = fileUpload.connect(state, send, normalizeProps);
         return {

package/dist/file-upload/dropzone.svelte

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

package/dist/file-upload/hidden-input.svelte

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

package/dist/file-upload/index.d.ts

@@ -12,3 +12,4 @@ export type { FileUploadLabelProps } from './label.svelte';
 export type { FileUploadProps } from './root.svelte';
 export type { FileUploadTriggerProps } from './trigger.svelte';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
+export { getFileUploadContext } from './context.svelte.js';

package/dist/file-upload/index.js

@@ -1,2 +1,3 @@
 export * as FileUpload from './file-upload.js';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
+export { getFileUploadContext } from './context.svelte.js';

package/dist/file-upload/item-delete-trigger.svelte

@@ -10,15 +10,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    fileUploadContext,
-    fileUploadItemPropsContext,
+    getFileUploadContext,
+    getFileUploadItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: FileUploadItemDeleteTriggerProps =
     $props();
 
-  let fileUpload = fileUploadContext.get();
-  let itemProps = fileUploadItemPropsContext.get();
+  let fileUpload = getFileUploadContext();
+  let itemProps = getFileUploadItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, fileUpload.getItemDeleteTriggerProps(itemProps)),

package/dist/file-upload/item-group.svelte

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