ui-ingredients 0.0.16 → 0.0.18

package/dist/dialog/backdrop.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogBackdropProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogBackdropProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogBackdropProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getBackdropProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogBackdropProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/close-trigger.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogCloseTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface DialogCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogCloseTriggerProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>

package/dist/dialog/close-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogCloseTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/content.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogContentProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogContentProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogContentProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,8 +1,3 @@
-import * as dialog from '@zag-js/dialog';
-export interface CreateDialogContextProps extends dialog.Context {
-}
-export interface CreateDialogContextReturn extends ReturnType<typeof createDialogContext> {
-}
-export declare function createDialogContext(props: CreateDialogContextProps): any;
-export declare function setDialogContext(value: CreateDialogContextReturn): void;
-export declare function useDialogContext(): CreateDialogContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateDialogReturn } from './create-dialog.svelte.js';
+export declare const dialogContext: Context<CreateDialogReturn>;

package/dist/dialog/context.svelte.js

@@ -1,14 +1,2 @@
-import * as dialog from '@zag-js/dialog';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createDialogContext(props) {
-    const [state, send] = useMachine(dialog.machine(props));
-    const api = $derived(reflect(() => dialog.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setDialogContext(value) {
-    setContext('Dialog', value);
-}
-export function useDialogContext() {
-    return getContext('Dialog');
-}
+import { Context } from '../utils.svelte.js';
+export const dialogContext = new Context('Dialog');

package/dist/dialog/create-dialog.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as dialog from '@zag-js/dialog';
+export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+}
+export interface CreateDialogReturn extends dialog.Api {
+}
+export declare function createDialog(props: CreateDialogProps): CreateDialogReturn;

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

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as dialog from '@zag-js/dialog';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createDialog(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(dialog.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => dialog.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/dialog/description.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogDescriptionProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogDescriptionProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogDescriptionProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogDescriptionProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/positioner.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogPositionerProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPositionerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogPositionerProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/root.svelte

@@ -1,35 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import type {
-    CreateDialogContextProps,
-    CreateDialogContextReturn,
-  } from './context.svelte.js';
+  import type {CreateDialogProps, CreateDialogReturn} from './create-dialog.svelte.js';
 
-  export interface DialogProps extends Omit<CreateDialogContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateDialogContextReturn]>;
+  export interface DialogProps extends CreateDialogProps {
+    children?: Snippet<[api: CreateDialogReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
-  import {createDialogContext, setDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
+  import {createDialog} from './create-dialog.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: DialogProps = $props();
+  let {children, ...props}: DialogProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let context = createDialog(props);
 
-  let context = createDialogContext({
-    id: id ?? createUniqueId(),
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
-
-  setDialogContext(context);
+  dialogContext.set(context);
 </script>
 
 {@render children?.(context)}

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

@@ -1,9 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { CreateDialogContextProps, CreateDialogContextReturn } from './context.svelte.js';
-export interface DialogProps extends Omit<CreateDialogContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateDialogContextReturn]>;
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/title.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogTitleProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTitleProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogTitleProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/dialog/trigger.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface DialogTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useDialogContext} from './context.svelte.js';
+  import {dialogContext} from './context.svelte.js';
 
   let {children, ...props}: DialogTriggerProps = $props();
 
-  let context = useDialogContext();
+  let context = dialogContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface DialogTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/area.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableAreaProps extends HtmlIngredientProps<'div'> {}
+  export interface EditableAreaProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditableAreaProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getAreaProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableAreaProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/cancel-trigger.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableCancelTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface EditableCancelTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditableCancelTriggerProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCancelTriggerProps()));
 </script>

package/dist/editable/cancel-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableCancelTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,8 +1,3 @@
-import * as editable from '@zag-js/editable';
-export interface CreateEditableContextProps extends editable.Context {
-}
-export interface CreateEditableContextReturn extends ReturnType<typeof createEditableContext> {
-}
-export declare function createEditableContext(props: CreateEditableContextProps): any;
-export declare function setEditableContext(value: CreateEditableContextReturn): void;
-export declare function useEditableContext(): CreateEditableContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateEditableReturn } from './create-editable.svelte.js';
+export declare const editableContext: Context<CreateEditableReturn>;

package/dist/editable/context.svelte.js

@@ -1,14 +1,2 @@
-import * as editable from '@zag-js/editable';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createEditableContext(props) {
-    const [state, send] = useMachine(editable.machine(props));
-    const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setEditableContext(value) {
-    setContext('Editable', value);
-}
-export function useEditableContext() {
-    return getContext('Editable');
-}
+import { Context } from '../utils.svelte.js';
+export const editableContext = new Context('Editable');

package/dist/editable/control.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableControlProps extends HtmlIngredientProps<'div'> {}
+  export interface EditableControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditableControlProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getControlProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableControlProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/create-editable.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as editable from '@zag-js/editable';
+export interface CreateEditableProps extends Omit<editable.Context, 'id' | 'dir' | 'getRootNode' | 'edit.controlled'> {
+    id?: string | null;
+}
+export interface CreateEditableReturn extends editable.Api {
+}
+export declare function createEditable(props: CreateEditableProps): CreateEditableReturn;

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

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as editable from '@zag-js/editable';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createEditable(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(editable.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'edit.controlled': props.edit != null,
+    }));
+    const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/editable/edit-trigger.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableEditTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface EditableEditTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditableEditTriggerProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getEditTriggerProps()));
 </script>

package/dist/editable/edit-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableEditTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/input.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableInputProps extends HtmlIngredientProps<'input'> {}
+  export interface EditableInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {...props}: EditableInputProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getInputProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableInputProps extends HtmlIngredientProps<'input'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/label.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface EditableLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditableLabelProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditableLabelProps extends HtmlIngredientProps<'label'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/editable/preview.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditablePreviewProps extends HtmlIngredientProps<'div'> {}
+  export interface EditablePreviewProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useEditableContext} from './context.svelte.js';
+  import {editableContext} from './context.svelte.js';
 
   let {children, ...props}: EditablePreviewProps = $props();
 
-  let context = useEditableContext();
+  let context = editableContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPreviewProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface EditablePreviewProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;