ui-ingredients 0.0.36 → 0.0.38

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateDialogReturn } from './create-dialog.svelte.js';
-export declare const dialogContext: Context<CreateDialogReturn>;
+export declare const getDialogContext: () => CreateDialogReturn, setDialogContext: (context: CreateDialogReturn | (() => CreateDialogReturn)) => void;

package/dist/dialog/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const dialogContext = new Context('Dialog');
+import { createContext } from '../create-context.svelte.js';
+export const [getDialogContext, setDialogContext] = createContext('Dialog');

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,24 @@ 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 {
+            ...o,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));
     return api;
 }

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

@@ -7,14 +7,12 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {editableContext} from './context.svelte.js';
+  import {getEditableContext} from './context.svelte.js';
 
   let {asChild, ...props}: EditableInputProps = $props();
 
-  let field = getFieldContext();
-  let editable = editableContext.get();
+  let editable = getEditableContext();
 
   let mergedProps = $derived(mergeProps(props, editable.getInputProps()));
 </script>
@@ -22,5 +20,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+  <input {...mergedProps} />
 {/if}

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/create-field.svelte.js

@@ -76,6 +76,7 @@ export function createField(props) {
             ...parts.errorText.attrs,
             id: ids.errorText,
             hidden: !hasErrorText,
+            'aria-live': 'polite',
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),

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

@@ -14,7 +14,7 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   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();
@@ -32,7 +32,7 @@
 
   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,23 @@ 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 {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => fileUpload.connect(state, send, normalizeProps)));
     return api;
 }

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

@@ -5,18 +5,16 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {fileUploadContext} from './context.svelte.js';
+  import {getFileUploadContext} from './context.svelte.js';
 
   let {...props}: FileUploadHiddenInputProps = $props();
 
-  let field = getFieldContext();
-  let fileUpload = fileUploadContext.get();
+  let fileUpload = getFileUploadContext();
 
   let mergedProps = $derived(
     mergeProps(props, fileUpload.getHiddenInputProps()),
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

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';