ui-ingredients 0.0.16 → 0.0.17

package/dist/slider/thumb.svelte

@@ -1,36 +1,26 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ThumbProps} from '@zag-js/slider';
 
-  export interface SliderThumbProps
-    extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
+  export interface SliderThumbProps extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    setSliderThumbPropsContext,
-    useSliderContext,
-  } from './context.svelte.js';
+  import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
 
   let {name, index, children, ...props}: SliderThumbProps = $props();
 
-  let context = useSliderContext();
+  let context = sliderContext.get();
 
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getThumbProps({
-        name,
-        index,
-      }),
-    ),
-  );
-
-  setSliderThumbPropsContext({
+  let thumbProps = $derived({
     name,
     index,
   });
+
+  let attrs = $derived(mergeProps(props, context.getThumbProps(thumbProps)));
+
+  sliderThumbPropsContext.set(() => thumbProps);
 </script>
 
 <div {...attrs}>

package/dist/slider/thumb.svelte.d.ts

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ThumbProps } from '@zag-js/slider';
-export interface SliderThumbProps extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {
-}
 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/slider/track.svelte

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

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

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

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

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

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

@@ -1,18 +1,17 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps} from '@zag-js/steps';
 
-  export interface StepsContentProps
-    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+  export interface StepsContentProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
+  import {stepsContext} from './context.svelte.js';
 
   let {index, children, ...props}: StepsContentProps = $props();
 
-  let context = useStepsContext();
+  let context = stepsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps({index})));
 </script>

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps } from '@zag-js/steps';
-export interface StepsContentProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {
-}
 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/steps/context.svelte.d.ts

@@ -1,10 +1,5 @@
-import * as steps from '@zag-js/steps';
-export interface CreateStepsContextProps extends steps.Context {
-}
-export interface CreateStepsContextReturn extends ReturnType<typeof createStepsContext> {
-}
-export declare function createStepsContext(props: CreateStepsContextProps): any;
-export declare function setStepsContext(value: CreateStepsContextReturn): void;
-export declare function useStepsContext(): CreateStepsContextReturn;
-export declare function setStepsItemPropsContext(value: steps.ItemProps): void;
-export declare function useStepsItemPropsContext(): steps.ItemProps;
+import { Context } from '../utils.svelte.js';
+import type { ItemProps } from '@zag-js/steps';
+import type { CreateStepsReturn } from './create-steps.svelte.js';
+export declare const stepsContext: Context<CreateStepsReturn>;
+export declare const stepsItemPropsContext: Context<ItemProps>;

package/dist/steps/context.svelte.js

@@ -1,20 +1,3 @@
-import * as steps from '@zag-js/steps';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createStepsContext(props) {
-    const [state, send] = useMachine(steps.machine(props));
-    const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setStepsContext(value) {
-    setContext('Steps', value);
-}
-export function useStepsContext() {
-    return getContext('Steps');
-}
-export function setStepsItemPropsContext(value) {
-    setContext('StepsItem', value);
-}
-export function useStepsItemPropsContext() {
-    return getContext('StepsItem');
-}
+import { Context } from '../utils.svelte.js';
+export const stepsContext = new Context('Steps');
+export const stepsItemPropsContext = new Context('StepsItem');

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

@@ -0,0 +1,6 @@
+import * as steps from '@zag-js/steps';
+export interface CreateStepsProps extends steps.Context {
+}
+export interface CreateStepsReturn extends steps.Api {
+}
+export declare function createSteps(props: CreateStepsProps): any;

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

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

package/dist/steps/indicator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsIndicatorProps extends HtmlIngredientProps<'div'> {}
@@ -6,13 +6,13 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext, useStepsItemPropsContext} from './context.svelte.js';
+  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: StepsIndicatorProps = $props();
 
-  let context = useStepsContext();
+  let context = stepsContext.get();
 
-  let itemProps = useStepsItemPropsContext();
+  let itemProps = stepsItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemProps)));
 </script>

package/dist/steps/indicator.svelte.d.ts

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/steps';
   import type {Snippet} from 'svelte';
@@ -11,17 +11,20 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {setStepsItemPropsContext, useStepsContext} from './context.svelte.js';
+  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
   let {index, children, ...props}: StepsItemProps = $props();
 
-  let context = useStepsContext();
+  let context = stepsContext.get();
 
-  let state = $derived(context.getItemState({index}));
+  let itemProps = $derived({
+    index,
+  });
 
-  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+  let state = $derived(context.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
 
-  setStepsItemPropsContext({index});
+  stepsItemPropsContext.set(() => itemProps);
 </script>
 
 <div {...attrs}>

package/dist/steps/item.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps, ItemState } from '@zag-js/steps';
-import type { Snippet } from 'svelte';
-export interface StepsItemProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
-    children?: Snippet<[state: ItemState]>;
-}
 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/steps/list.svelte

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

package/dist/steps/list.svelte.d.ts

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

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

package/dist/steps/next-trigger.svelte.d.ts

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

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

package/dist/steps/prev-trigger.svelte.d.ts

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

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

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface StepsProgressProps 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/steps/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 {
-    CreateStepsContextProps,
-    CreateStepsContextReturn,
-  } from './context.svelte.js';
+  import type {CreateStepsProps, CreateStepsReturn} from './create-steps.svelte.js';
 
   export interface StepsProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateStepsContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateStepsContextReturn]>;
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateStepsProps, 'id'>> {
+    children?: Snippet<[api: CreateStepsReturn]>;
   }
 </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 {createStepsContext, setStepsContext} from './context.svelte.js';
+  import {stepsContext} from './context.svelte.js';
+  import {createSteps} from './create-steps.svelte.js';
 
   let {
     id,
@@ -37,10 +32,12 @@
     ...props
   }: StepsProps = $props();
 
-  let localeContext = useLocaleContext();
+  let localeContext = getLocaleContext();
 
-  let context = createStepsContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createSteps({
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     step,
@@ -49,12 +46,12 @@
     orientation,
     onStepChange,
     onStepComplete,
-    getRootNode: getRootNode ?? useEnvironmentContext()?.getRootNode,
+    getRootNode: getRootNode ?? getEnvironmentContext()?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setStepsContext(context);
+  stepsContext.set(context);
 </script>
 
 <div {...attrs}>

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

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsSeparatorProps extends HtmlIngredientProps<'div'> {}
@@ -6,13 +6,13 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext, useStepsItemPropsContext} from './context.svelte.js';
+  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: StepsSeparatorProps = $props();
 
-  let context = useStepsContext();
+  let context = stepsContext.get();
 
-  let itemProps = useStepsItemPropsContext();
+  let itemProps = stepsItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemProps)));
 </script>

package/dist/steps/separator.svelte.d.ts

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsTriggerProps extends HtmlIngredientProps<'button'> {}
@@ -6,13 +6,13 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext, useStepsItemPropsContext} from './context.svelte.js';
+  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: StepsTriggerProps = $props();
 
-  let context = useStepsContext();
+  let context = stepsContext.get();
 
-  let itemProps = useStepsItemPropsContext();
+  let itemProps = stepsItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTriggerProps(itemProps)));
 </script>

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

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

@@ -1,8 +1,3 @@
-import * as switch$ from '@zag-js/switch';
-export interface CreateSwitchContextProps extends switch$.Context {
-}
-export interface CreateSwitchContextReturn extends ReturnType<typeof createSwitchContext> {
-}
-export declare function createSwitchContext(props: CreateSwitchContextProps): any;
-export declare function setSwitchContext(value: CreateSwitchContextReturn): void;
-export declare function useSwitchContext(): CreateSwitchContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateSwitchReturn } from './create-switch.svelte.js';
+export declare const switchContext: Context<CreateSwitchReturn>;

package/dist/switch/context.svelte.js

@@ -1,14 +1,2 @@
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import * as switch$ from '@zag-js/switch';
-import { getContext, setContext } from 'svelte';
-export function createSwitchContext(props) {
-    const [state, send] = useMachine(switch$.machine(props));
-    const api = $derived(reflect(() => switch$.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setSwitchContext(value) {
-    setContext('Switch', value);
-}
-export function useSwitchContext() {
-    return getContext('Switch');
-}
+import { Context } from '../utils.svelte.js';
+export const switchContext = new Context('Switch');

package/dist/switch/control.svelte

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

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

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

@@ -0,0 +1,6 @@
+import * as switch$ from '@zag-js/switch';
+export interface CreateSwitchProps extends switch$.Context {
+}
+export interface CreateSwitchReturn extends switch$.Api {
+}
+export declare function createSwitch(props: CreateSwitchProps): any;

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

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