ui-ingredients 0.0.15 → 0.0.17

package/dist/pin-input/root.svelte

@@ -1,26 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {
-    CreatePinInputContextProps,
-    CreatePinInputContextReturn,
-  } from './context.svelte.js';
+  import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
 
   export interface PinInputProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreatePinInputContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreatePinInputContextReturn]>;
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreatePinInputProps, 'id'>> {
+    children?: Snippet<[api: CreatePinInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
+  import {getEnvironmentContext} from '../environment-provider/index.js';
+  import {getLocaleContext} from '../locale-provider/index.js';
   import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createPinInputContext, setPinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
+  import {createPinInputContext} from './create-pin-input.svelte.js';
 
   let {
     id,
@@ -50,11 +45,13 @@
     ...props
   }: PinInputProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
+
+  let uid = createUniqueId();
 
   let context = createPinInputContext({
-    id: id ?? createUniqueId(),
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     otp,
@@ -81,7 +78,7 @@
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setPinInputContext(context);
+  pinInputContext.set(context);
 </script>
 
 <div {...attrs}>

package/dist/pin-input/root.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreatePinInputContextProps, CreatePinInputContextReturn } from './context.svelte.js';
-export interface PinInputProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreatePinInputContextProps, 'id'>> {
-    children?: Snippet<[context: CreatePinInputContextReturn]>;
-}
 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/arrow-tip.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface PopoverArrowTipProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverArrowTipProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
 </script>

package/dist/popover/arrow-tip.svelte.d.ts

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface PopoverArrowProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverArrowProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowProps()));
 </script>

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

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

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface PopoverCloseTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface PopoverCloseTriggerProps extends HtmlIngredientProps<'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}: PopoverCloseTriggerProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>

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

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

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

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

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

@@ -1,8 +1,3 @@
-import * as popover from '@zag-js/popover';
-export interface CreatePopoverContextProps extends popover.Context {
-}
-export interface CreatePopoverContextReturn extends ReturnType<typeof createPopoverContext> {
-}
-export declare function createPopoverContext(props: CreatePopoverContextProps): any;
-export declare function setPopoverContext(value: CreatePopoverContextReturn): void;
-export declare function usePopoverContext(): CreatePopoverContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreatePopoverReturn } from './create-popover.svelte.js';
+export declare const popoverContext: Context<CreatePopoverReturn>;

package/dist/popover/context.svelte.js

@@ -1,14 +1,2 @@
-import * as popover from '@zag-js/popover';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createPopoverContext(props) {
-    const [state, send] = useMachine(popover.machine(props));
-    const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setPopoverContext(value) {
-    setContext('Popover', value);
-}
-export function usePopoverContext() {
-    return getContext('Popover');
-}
+import { Context } from '../utils.svelte.js';
+export const popoverContext = new Context('Popover');

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

@@ -0,0 +1,6 @@
+import * as popover from '@zag-js/popover';
+export interface CreatePopoverProps extends popover.Context {
+}
+export interface CreatePopoverReturn extends popover.Api {
+}
+export declare function createPopover(props: CreatePopoverProps): CreatePopoverReturn;

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

@@ -0,0 +1,7 @@
+import * as popover from '@zag-js/popover';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createPopover(props) {
+    const [state, send] = useMachine(popover.machine(props));
+    const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/popover/description.svelte

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

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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface PopoverPositionerProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <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,35 @@
-<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'> {
+  export interface PopoverProps extends Omit<CreatePopoverProps, 'id'> {
     id?: string | null;
-    children?: Snippet<[CreatePopoverContextReturn]>;
+    children?: Snippet<[api: CreatePopoverReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
+  import {getEnvironmentContext} from '../environment-provider/index.js';
+  import {getLocaleContext} 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 localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createPopoverContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createPopover({
+    id: id ?? uid,
     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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface PopoverTitleProps extends HtmlIngredientProps<'div'> {}
@@ -6,11 +6,11 @@
 
 <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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface PopoverTriggerProps extends HtmlIngredientProps<'button'> {}
@@ -6,11 +6,11 @@
 
 <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,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import {type Snippet} from 'svelte';
 
   export interface PortalProps {
@@ -10,11 +10,11 @@
 </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 environmentContext = getEnvironmentContext();
 </script>
 
 <div
@@ -23,6 +23,8 @@
     disabled,
     getRootNode: 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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {Context} from '@zag-js/presence';
 
@@ -33,6 +33,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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ProgressCircleRangeProps
-    extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleRangeProps extends HtmlIngredientProps<'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">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ProgressCircleTrackProps
-    extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleTrackProps extends HtmlIngredientProps<'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,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface ProgressCircleProps extends HtmlIngredientProps<'svg'> {}
@@ -6,11 +6,11 @@
 
 <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,6 @@
+import * as progress from '@zag-js/progress';
+export interface CreateProgressProps extends progress.Context {
+}
+export interface CreateProgressReturn extends progress.Api<any> {
+}
+export declare function createProgress(props: CreateProgressProps): CreateProgressReturn;

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

@@ -0,0 +1,7 @@
+import * as progress from '@zag-js/progress';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createProgress(props) {
+    const [state, send] = useMachine(progress.machine(props));
+    const api = $derived(reflect(() => progress.connect(state, send, normalizeProps)));
+    return api;
+}