ui-ingredients 0.0.16 → 0.0.18

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverDescriptionProps 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/popover/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 PopoverPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverPositionerProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPositionerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverPositionerProps 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/popover/root.svelte

@@ -1,35 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import type {
-    CreatePopoverContextProps,
-    CreatePopoverContextReturn,
-  } from './context.svelte.js';
+  import type {CreatePopoverProps, CreatePopoverReturn} from './create-popover.svelte.js';
 
-  export interface PopoverProps extends Omit<CreatePopoverContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreatePopoverContextReturn]>;
+  export interface PopoverProps extends CreatePopoverProps {
+    children?: Snippet<[api: CreatePopoverReturn]>;
   }
 </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 {createPopoverContext, setPopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
+  import {createPopover} from './create-popover.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: PopoverProps = $props();
+  let {children, ...props}: PopoverProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let context = createPopover(props);
 
-  let context = createPopoverContext({
-    id: id ?? createUniqueId(),
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
-
-  setPopoverContext(context);
+  popoverContext.set(context);
 </script>
 
 {@render children?.(context)}

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

@@ -1,9 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { CreatePopoverContextProps, CreatePopoverContextReturn } from './context.svelte.js';
-export interface PopoverProps extends Omit<CreatePopoverContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreatePopoverContextReturn]>;
-}
 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/popover/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 PopoverTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverTitleProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTitleProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverTitleProps 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/popover/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 PopoverTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PopoverTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverTriggerProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverTriggerProps 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/portal/root.svelte

@@ -1,28 +1,30 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import {type Snippet} from 'svelte';
 
   export interface PortalProps {
     container?: HTMLElement;
     disabled?: boolean;
-    getRootNode?: () => ShadowRoot | Document | Node;
     children: Snippet;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {getEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
 
-  let {container, disabled, getRootNode, children}: PortalProps = $props();
-  let environmentContext = useEnvironmentContext();
+  let {container, disabled, children}: PortalProps = $props();
+
+  let environmentContext = getEnvironmentContext();
 </script>
 
 <div
   use:portal={{
-    container,
     disabled,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+    container,
+    getRootNode: environmentContext?.getRootNode,
   }}
+  data-scope="portal"
+  data-part="root"
 >
   {@render children?.()}
 </div>

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

@@ -1,10 +1,3 @@
-import { type Snippet } from 'svelte';
-export interface PortalProps {
-    container?: HTMLElement;
-    disabled?: boolean;
-    getRootNode?: () => ShadowRoot | Document | Node;
-    children: Snippet;
-}
 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/presence/root.svelte

@@ -1,9 +1,8 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Context} from '@zag-js/presence';
 
-  export interface PresenceProps
-    extends Assign<HtmlIngredientProps<'div'>, Context> {}
+  export interface PresenceProps extends Assign<HtmlProps<'div'>, Context> {}
 </script>
 
 <script lang="ts">
@@ -33,6 +32,8 @@
 <div
   use:api.setNode
   hidden={!api.present}
+  data-scope="presence"
+  data-part="root"
   data-state={api.skip ? undefined : present ? 'open' : 'closed'}
   {...props}
 >

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Context } from '@zag-js/presence';
-export interface PresenceProps extends Assign<HtmlIngredientProps<'div'>, Context> {
-}
 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/progress/circle-range.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 ProgressCircleRangeProps
-    extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressCircleRangeProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCircleRangeProps()));
 </script>

package/dist/progress/circle-range.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressCircleRangeProps extends HtmlIngredientProps<'circle'> {
-}
 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/progress/circle-track.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 ProgressCircleTrackProps
-    extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressCircleTrackProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCircleTrackProps()));
 </script>

package/dist/progress/circle-track.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressCircleTrackProps extends HtmlIngredientProps<'circle'> {
-}
 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/progress/circle.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 ProgressCircleProps extends HtmlIngredientProps<'svg'> {}
+  export interface ProgressCircleProps extends HtmlProps<'svg'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressCircleProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCircleProps()));
 </script>

package/dist/progress/circle.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressCircleProps extends HtmlIngredientProps<'svg'> {
-}
 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/progress/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as progress from '@zag-js/progress';
-export interface CreateProgressContextProps extends progress.Context {
-}
-export interface CreateProgressContextReturn extends ReturnType<typeof createProgressContext> {
-}
-export declare function createProgressContext(props: CreateProgressContextProps): any;
-export declare function setProgressContext(value: CreateProgressContextReturn): void;
-export declare function useProgressContext(): CreateProgressContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateProgressReturn } from './create-progress.svelte.js';
+export declare const progressContext: Context<CreateProgressReturn>;

package/dist/progress/context.svelte.js

@@ -1,14 +1,2 @@
-import * as progress from '@zag-js/progress';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createProgressContext(props) {
-    const [state, send] = useMachine(progress.machine(props));
-    const api = $derived(reflect(() => progress.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setProgressContext(value) {
-    setContext('Progress', value);
-}
-export function useProgressContext() {
-    return getContext('Progress');
-}
+import { Context } from '../utils.svelte.js';
+export const progressContext = new Context('Progress');

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

@@ -0,0 +1,7 @@
+import * as progress from '@zag-js/progress';
+export interface CreateProgressProps extends Omit<progress.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateProgressReturn extends progress.Api<any> {
+}
+export declare function createProgress(props: CreateProgressProps): CreateProgressReturn;

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

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

package/dist/progress/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 ProgressLabelProps extends HtmlIngredientProps<'div'> {}
+  export interface ProgressLabelProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressLabelProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressLabelProps 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/progress/range.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 ProgressRangeProps extends HtmlIngredientProps<'div'> {}
+  export interface ProgressRangeProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressRangeProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getRangeProps()));
 </script>

package/dist/progress/range.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressRangeProps 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/progress/root.svelte

@@ -1,59 +1,45 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {
-    CreateProgressContextProps,
-    CreateProgressContextReturn,
-  } from './context.svelte.js';
+  import type {CreateProgressProps, CreateProgressReturn} from './create-progress.svelte.js';
 
   export interface ProgressProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateProgressContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateProgressContextReturn]>;
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
+    children?: Snippet<[api: CreateProgressReturn]>;
   }
 </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 {mergeProps} from '@zag-js/svelte';
-  import {createProgressContext, setProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
+  import {createProgress} from './create-progress.svelte.js';
 
   let {
+    /**/
     id,
     ids,
-    dir,
     max,
     min,
     value,
     orientation,
     translations,
-    getRootNode,
     children,
     ...props
   }: ProgressProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
-
-  let context = createProgressContext({
-    id: id ?? createUniqueId(),
+  let context = createProgress({
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     min,
     value: $state.snapshot(value),
     orientation,
     translations,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setProgressContext(context);
+  progressContext.set(context);
 </script>
 
 <div {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateProgressContextProps, CreateProgressContextReturn } from './context.svelte.js';
-export interface ProgressProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateProgressContextProps, 'id'>> {
-    children?: Snippet<[context: CreateProgressContextReturn]>;
-}
 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/progress/track.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 ProgressTrackProps extends HtmlIngredientProps<'div'> {}
+  export interface ProgressTrackProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressTrackProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTrackProps()));
 </script>

package/dist/progress/track.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressTrackProps 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/progress/value-text.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 ProgressValueTextProps extends HtmlIngredientProps<'div'> {}
+  export interface ProgressValueTextProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useProgressContext} from './context.svelte.js';
+  import {progressContext} from './context.svelte.js';
 
   let {children, ...props}: ProgressValueTextProps = $props();
 
-  let context = useProgressContext();
+  let context = progressContext.get();
 
   let attrs = $derived(mergeProps(props, context.getValueTextProps()));
 </script>

package/dist/progress/value-text.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface ProgressValueTextProps 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/qr-code/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as qrCode from '@zag-js/qr-code';
-export interface CreateQRCodeContextProps extends qrCode.Context {
-}
-export interface CreateQRCodeContextReturn extends ReturnType<typeof createQRCodeContext> {
-}
-export declare function createQRCodeContext(props: CreateQRCodeContextProps): any;
-export declare function setQRCodeContext(value: CreateQRCodeContextReturn): void;
-export declare function useQRCodeContext(): CreateQRCodeContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateQRCodeReturn } from './create-qr-code.svelte.js';
+export declare const qrCodeContext: Context<CreateQRCodeReturn>;

package/dist/qr-code/context.svelte.js

@@ -1,14 +1,2 @@
-import * as qrCode from '@zag-js/qr-code';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createQRCodeContext(props) {
-    const [state, send] = useMachine(qrCode.machine(props));
-    const api = $derived(reflect(() => qrCode.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setQRCodeContext(value) {
-    setContext('QRCode', value);
-}
-export function useQRCodeContext() {
-    return getContext('QRCode');
-}
+import { Context } from '../utils.svelte.js';
+export const qrCodeContext = new Context('QRCode');