ui-ingredients 0.0.16 → 0.0.18

package/dist/timer/root.svelte

@@ -1,25 +1,17 @@
-<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 {
-    CreateTimerContextProps,
-    CreateTimerContextReturn,
-  } from './context.svelte.js';
+  import type {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
-  export interface TimerProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateTimerContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateTimerContextReturn]>;
+  export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
+    children?: Snippet<[api: CreateTimerReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createTimerContext, setTimerContext} from './context.svelte.js';
+  import {timerContext} from './context.svelte.js';
+  import {createTimer} from './create-timer.svelte.js';
 
   let {
     id,
@@ -30,15 +22,12 @@
     countdown,
     onTick,
     onComplete,
-    getRootNode,
     children,
     ...props
   }: TimerProps = $props();
 
-  let environmentContext = useEnvironmentContext();
-
-  let context = createTimerContext({
-    id: id ?? createUniqueId(),
+  let context = createTimer({
+    id,
     startMs,
     targetMs,
     interval,
@@ -46,12 +35,11 @@
     countdown,
     onTick,
     onComplete,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setTimerContext(context);
+  timerContext.set(context);
 </script>
 
 <div {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateTimerContextProps, CreateTimerContextReturn } from './context.svelte.js';
-export interface TimerProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateTimerContextProps, 'id'>> {
-    children?: Snippet<[context: CreateTimerContextReturn]>;
-}
 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/timer/separator.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 TimerSeparatorProps extends HtmlIngredientProps<'span'> {}
+  export interface TimerSeparatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTimerContext} from './context.svelte.js';
+  import {timerContext} from './context.svelte.js';
 
   let {children, ...props}: TimerSeparatorProps = $props();
 
-  let context = useTimerContext();
+  let context = timerContext.get();
 
   let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TimerSeparatorProps 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/toast/action-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 ToastActionTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface ToastActionTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
+  import {toastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastActionTriggerProps = $props();
 
-  let context = useToastContext();
+  let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getActionTriggerProps()));
 </script>

package/dist/toast/action-trigger.svelte.d.ts

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

@@ -1,22 +1,19 @@
 <script lang="ts">
   import * as toast from '@zag-js/toast';
   import type {Snippet} from 'svelte';
-  import {
-    createToastContext,
-    setToastContext,
-    type CreateToastContextReturn,
-  } from './context.svelte.js';
+  import {toastContext} from './context.svelte.js';
+  import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
 
   interface Props {
     actor: toast.Service;
-    children$: Snippet<[CreateToastContextReturn]>;
+    children$: Snippet<[api: CreateToastReturn]>;
   }
 
   let {actor, children$}: Props = $props();
 
-  let context = createToastContext(actor);
+  let context = createToast(actor);
 
-  setToastContext(context);
+  toastContext.set(context);
 </script>
 
 {@render children$(context)}

package/dist/toast/actor.svelte.d.ts

@@ -1,6 +1,6 @@
 import * as toast from '@zag-js/toast';
 import type { Snippet } from 'svelte';
-import { type CreateToastContextReturn } from './context.svelte.js';
+import { type CreateToastReturn } from './create-toast.svelte.js';
 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;
@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Actor: $$__sveltets_2_IsomorphicComponent<{
     actor: toast.Service;
-    children$: Snippet<[CreateToastContextReturn]>;
+    children$: Snippet<[api: CreateToastReturn]>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/toast/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 ToastCloseTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
+  import {toastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastCloseTriggerProps = $props();
 
-  let context = useToastContext();
+  let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>

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

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

@@ -1,8 +1,3 @@
-import * as toast from '@zag-js/toast';
-export interface CreateToastContextProps extends toast.Service {
-}
-export interface CreateToastContextReturn extends ReturnType<typeof createToastContext> {
-}
-export declare function createToastContext(props: CreateToastContextProps): any;
-export declare function setToastContext(value: CreateToastContextReturn): void;
-export declare function useToastContext(): CreateToastContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateToastReturn } from './create-toast.svelte.js';
+export declare const toastContext: Context<CreateToastReturn>;

package/dist/toast/context.svelte.js

@@ -1,14 +1,2 @@
-import { normalizeProps, reflect, useActor } from '@zag-js/svelte';
-import * as toast from '@zag-js/toast';
-import { getContext, setContext } from 'svelte';
-export function createToastContext(props) {
-    const [state, send] = useActor(props);
-    const api = $derived(reflect(() => toast.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setToastContext(value) {
-    setContext('Toast', value);
-}
-export function useToastContext() {
-    return getContext('Toast');
-}
+import { Context } from '../utils.svelte.js';
+export const toastContext = new Context('Toast');

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

@@ -0,0 +1,6 @@
+import * as toast from '@zag-js/toast';
+export interface CreateToastProps extends toast.Service {
+}
+export interface CreateToastReturn extends toast.Api {
+}
+export declare function createToast(props: CreateToastProps): any;

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

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

package/dist/toast/create-toaster.svelte.d.ts

@@ -1,7 +1,6 @@
 import * as toast from '@zag-js/toast';
 export interface CreateToasterProps {
-    id?: string;
-    dir?: toast.GroupMachineContext['dir'];
+    id?: string | null;
     max?: toast.GroupMachineContext['max'];
     gap?: toast.GroupMachineContext['gap'];
     hotkey?: toast.GroupMachineContext['hotkey'];
@@ -11,8 +10,7 @@ export interface CreateToasterProps {
     placement?: toast.GroupMachineContext['placement'];
     removeDelay?: toast.GroupMachineContext['removeDelay'];
     pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
-    getRootNode?: toast.GroupMachineContext['getRootNode'];
 }
 export interface CreateToasterReturn extends ReturnType<typeof createToaster> {
 }
-export default function createToaster(props?: CreateToasterProps): any;
+export declare function createToaster(props?: CreateToasterProps): any;

package/dist/toast/create-toaster.svelte.js

@@ -1,19 +1,16 @@
-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 { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
-export default function createToaster(props) {
-    const localContext = useLocaleContext();
-    const environmentContext = useEnvironmentContext();
-    const id = $derived(props?.id ?? createUniqueId());
-    const dir = $derived(props?.dir ?? localContext?.dir);
-    const getRootNode = $derived(props?.getRootNode ?? environmentContext?.getRootNode);
+export function createToaster(props) {
+    const localContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
     const machine = $derived(toast.group.machine({
         ...props,
-        id,
-        dir,
-        getRootNode,
+        id: props?.id ?? createUniqueId(),
+        dir: localContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
     }));
     const api = $derived(reflect(() => ({
         machine,

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

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

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

@@ -1,7 +1,7 @@
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { type ToastActionTriggerProps } from './action-trigger.svelte';
 export { type ToastCloseTriggerProps } from './close-trigger.svelte';
-export { default as createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
+export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
 export { type ToastDescriptionProps } from './description.svelte';
 export { type ToastProps } from './root.svelte';
 export { type ToastTitleProps } from './title.svelte';

package/dist/toast/index.js

@@ -1,7 +1,7 @@
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export {} from './action-trigger.svelte';
 export {} from './close-trigger.svelte';
-export { default as createToaster, } from './create-toaster.svelte.js';
+export { createToaster, } from './create-toaster.svelte.js';
 export {} from './description.svelte';
 export {} from './root.svelte';
 export {} from './title.svelte';

package/dist/toast/root.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {CreateToastContextReturn} from './context.svelte.js';
+  import type {CreateToastReturn} from './create-toast.svelte.js';
 
-  export interface ToastProps
-    extends Omit<HtmlIngredientProps<'div'>, 'children'> {
-    children?: Snippet<[context: CreateToastContextReturn]>;
+  export interface ToastProps extends Omit<HtmlProps<'div'>, 'children'> {
+    children?: Snippet<[api: CreateToastReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
+  import {toastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastProps = $props();
 
-  let context = useToastContext();
+  let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 </script>

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

@@ -1,9 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateToastContextReturn } from './context.svelte.js';
-export interface ToastProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
-    children?: Snippet<[context: CreateToastContextReturn]>;
-}
 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/toast/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 ToastTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface ToastTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
+  import {toastContext} from './context.svelte.js';
 
   let {children, ...props}: ToastTitleProps = $props();
 
-  let context = useToastContext();
+  let context = toastContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTitleProps()));
 </script>

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

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

@@ -1,5 +1,5 @@
-export { default as ActionTrigger, type ToastActionTriggerProps, } from './action-trigger.svelte';
-export { default as CloseTrigger, type ToastCloseTriggerProps, } from './close-trigger.svelte';
-export { default as Description, type ToastDescriptionProps, } from './description.svelte';
+export { default as ActionTrigger, type ToastActionTriggerProps } from './action-trigger.svelte';
+export { default as CloseTrigger, type ToastCloseTriggerProps } from './close-trigger.svelte';
+export { default as Description, type ToastDescriptionProps } from './description.svelte';
 export { default as Root, type ToastProps } from './root.svelte';
 export { default as Title, type ToastTitleProps } from './title.svelte';

package/dist/toast/toast.js

@@ -1,5 +1,5 @@
-export { default as ActionTrigger, } from './action-trigger.svelte';
-export { default as CloseTrigger, } from './close-trigger.svelte';
-export { default as Description, } from './description.svelte';
+export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Description } from './description.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';

package/dist/toast/toaster.svelte

@@ -1,13 +1,12 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {CreateToastContextReturn} from './context.svelte.js';
+  import type {CreateToastReturn} from './create-toast.svelte.js';
   import type {CreateToasterReturn} from './create-toaster.svelte.js';
 
-  export interface ToasterProps
-    extends Omit<HtmlIngredientProps<'div'>, 'children'> {
+  export interface ToasterProps extends Omit<HtmlProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
-    children: Snippet<[CreateToastContextReturn]>;
+    children: Snippet<[api: CreateToastReturn]>;
   }
 </script>
 

package/dist/toast/toaster.svelte.d.ts

@@ -1,11 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateToastContextReturn } from './context.svelte.js';
-import type { CreateToasterReturn } from './create-toaster.svelte.js';
-export interface ToasterProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
-    toaster: CreateToasterReturn;
-    children: Snippet<[CreateToastContextReturn]>;
-}
 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/toggle-group/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as toggleGroup from '@zag-js/toggle-group';
-export interface CreateToggleGroupContextProps extends toggleGroup.Context {
-}
-export interface CreateToggleGroupContextReturn extends ReturnType<typeof createToggleGroupContext> {
-}
-export declare function createToggleGroupContext(props: CreateToggleGroupContextProps): any;
-export declare function setToggleGroupContext(value: CreateToggleGroupContextReturn): void;
-export declare function useToggleGroupContext(): CreateToggleGroupContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateToggleGroupReturn } from './create-toggle-group.svelte.js';
+export declare const toggleGroupContext: Context<CreateToggleGroupReturn>;

package/dist/toggle-group/context.svelte.js

@@ -1,14 +1,2 @@
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import * as toggleGroup from '@zag-js/toggle-group';
-import { getContext, setContext } from 'svelte';
-export function createToggleGroupContext(props) {
-    const [state, send] = useMachine(toggleGroup.machine(props));
-    const api = $derived(reflect(() => toggleGroup.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setToggleGroupContext(value) {
-    setContext('ToggleGroup', value);
-}
-export function useToggleGroupContext() {
-    return getContext('ToggleGroup');
-}
+import { Context } from '../utils.svelte.js';
+export const toggleGroupContext = new Context('ToggleGroup');

package/dist/toggle-group/create-toggle-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as toggleGroup from '@zag-js/toggle-group';
+export interface CreateToggleGroupProps extends Omit<toggleGroup.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateToggleGroupReturn extends toggleGroup.Api {
+}
+export declare function createToggleGroup(props: CreateToggleGroupProps): CreateToggleGroupReturn;

package/dist/toggle-group/create-toggle-group.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as toggleGroup from '@zag-js/toggle-group';
+export function createToggleGroup(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(toggleGroup.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
+    const api = $derived(reflect(() => toggleGroup.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/toggle-group/item.svelte

@@ -1,27 +1,29 @@
-<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 {ItemProps, ItemState} from '@zag-js/toggle-group';
   import type {Snippet} from 'svelte';
 
   export interface ToggleGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'button'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useToggleGroupContext} from './context.svelte.js';
+  import {toggleGroupContext} from './context.svelte.js';
 
   let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
 
-  let context = useToggleGroupContext();
+  let context = toggleGroupContext.get();
 
-  let state = $derived(context.getItemState({value}));
+  let itemProps = $derived({
+    value,
+    disabled,
+  });
 
-  let attrs = $derived(
-    mergeProps(props, context.getItemProps({value, disabled})),
-  );
+  let state = $derived(context.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/toggle-group/item.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps, ItemState } from '@zag-js/toggle-group';
-import type { Snippet } from 'svelte';
-export interface ToggleGroupItemProps extends Assign<Omit<HtmlIngredientProps<'button'>, '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;