ui-ingredients 0.0.16 → 0.0.17

package/dist/clipboard/root.svelte

@@ -1,30 +1,23 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {
-    CreateClipboardContextProps,
-    CreateClipboardContextReturn,
-  } from './context.svelte.js';
+  import type {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateClipboardContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateClipboardContextReturn]>;
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateClipboardProps, 'id'>> {
+    children?: Snippet<[api: CreateClipboardReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {getEnvironmentContext} from '../environment-provider/index.js';
   import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    createClipboardContext,
-    setClipboardContext,
-  } from './context.svelte.js';
+  import {clipboardContext} from './context.svelte.js';
+  import {createClipboard} from './create-clipboard.svelte.js';
 
   let {
+    /**/
     id,
     ids,
     value,
@@ -35,10 +28,12 @@
     ...props
   }: ClipboardProps = $props();
 
-  let environmentContext = useEnvironmentContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createClipboardContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createClipboard({
+    id: id ?? uid,
     ids,
     value: $state.snapshot(value),
     timeout,
@@ -48,7 +43,7 @@
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setClipboardContext(context);
+  clipboardContext.set(context);
 </script>
 
 <div {...attrs}>

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

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

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

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

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

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

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

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

@@ -1,8 +1,3 @@
-import * as collapsible from '@zag-js/collapsible';
-export interface CreateCollapsibleContextProps extends collapsible.Context {
-}
-export interface CreateCollapsibleContextReturn extends ReturnType<typeof createCollapsibleContext> {
-}
-export declare function createCollapsibleContext(props: CreateCollapsibleContextProps): any;
-export declare function setCollapsibleContext(value: CreateCollapsibleContextReturn): void;
-export declare function useCollapsibleContext(): CreateCollapsibleContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateCollapsibleReturn } from './create-collapsible.svelte.js';
+export declare const collapsibleContext: Context<CreateCollapsibleReturn>;

package/dist/collapsible/context.svelte.js

@@ -1,14 +1,2 @@
-import * as collapsible from '@zag-js/collapsible';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createCollapsibleContext(props) {
-    const [state, send] = useMachine(collapsible.machine(props));
-    const api = $derived(reflect(() => collapsible.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setCollapsibleContext(value) {
-    setContext('Collapsible', value);
-}
-export function useCollapsibleContext() {
-    return getContext('Collapsible');
-}
+import { Context } from '../utils.svelte.js';
+export const collapsibleContext = new Context('Collapsible');

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

@@ -0,0 +1,6 @@
+import * as collapsible from '@zag-js/collapsible';
+export interface CreateCollapsibleProps extends collapsible.Context {
+}
+export interface CreateCollapsibleReturn extends collapsible.Api {
+}
+export declare function createCollapsible(props: CreateCollapsibleProps): CreateCollapsibleReturn;

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

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

package/dist/collapsible/root.svelte

@@ -1,29 +1,27 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
-    CreateCollapsibleContextProps,
-    CreateCollapsibleContextReturn,
-  } from './context.svelte.js';
+    CreateCollapsibleProps,
+    CreateCollapsibleReturn,
+  } from './create-collapsible.svelte.js';
 
   export interface CollapsibleProps
     extends Assign<
       Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateCollapsibleContextProps, 'id'>
+      Omit<CreateCollapsibleProps, 'id'>
     > {
-    children?: Snippet<[context: CreateCollapsibleContextReturn]>;
+    children?: Snippet<[api: CreateCollapsibleReturn]>;
   }
 </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 {
-    createCollapsibleContext,
-    setCollapsibleContext,
-  } from './context.svelte.js';
+  import {collapsibleContext} from './context.svelte.js';
+  import {createCollapsible} from './create-collapsible.svelte.js';
 
   let {
     id,
@@ -39,11 +37,13 @@
     ...props
   }: CollapsibleProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createCollapsibleContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createCollapsible({
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     open,
@@ -56,7 +56,7 @@
 
   let mergedProps = $derived(mergeProps(props, context.getRootProps()));
 
-  setCollapsibleContext(context);
+  collapsibleContext.set(context);
 </script>
 
 <div {...mergedProps}>

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

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

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

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

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

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

package/dist/combobox/clear-trigger.svelte.d.ts

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

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

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

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

@@ -1,16 +1,6 @@
-import * as combobox from '@zag-js/combobox';
-export interface CreateComboboxContextProps<T> extends Omit<combobox.Context, 'collection'> {
-    items: T[];
-    itemToString?: (item: T) => string;
-    itemToValue?: (item: T) => string;
-    isItemDisabled?: (item: T) => boolean;
-}
-export interface CreateComboboxContextReturn extends ReturnType<typeof createComboboxContext> {
-}
-export declare function createComboboxContext<T>(props: CreateComboboxContextProps<T>): any;
-export declare function setComboboxContext(value: CreateComboboxContextReturn): void;
-export declare function useComboboxContext(): CreateComboboxContextReturn;
-export declare function setComboboxItemPropsContext(value: combobox.ItemProps): void;
-export declare function useComboboxItemPropsContext(): combobox.ItemProps;
-export declare function setComboboxItemGroupPropsContext(value: combobox.ItemGroupProps): void;
-export declare function useComboboxItemGroupPropsContext(): combobox.ItemGroupProps;
+import { Context } from '../utils.svelte.js';
+import type { ItemGroupProps, ItemProps } from '@zag-js/combobox';
+import type { CreateComboboxReturn } from './create-combobox.svelte.js';
+export declare const comboboxContext: Context<CreateComboboxReturn>;
+export declare const comboboxItemPropsContext: Context<ItemProps>;
+export declare const comboboxItemGroupPropsContext: Context<ItemGroupProps>;

package/dist/combobox/context.svelte.js

@@ -1,38 +1,4 @@
-import * as combobox from '@zag-js/combobox';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createComboboxContext(props) {
-    const collection = $derived(combobox.collection({
-        items: props.items,
-        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
-        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
-        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
-    }));
-    const [state, send] = useMachine(combobox.machine({
-        ...props,
-        collection,
-    }));
-    const api = $derived(reflect(() => ({
-        ...combobox.connect(state, send, normalizeProps),
-        collection,
-    })));
-    return api;
-}
-export function setComboboxContext(value) {
-    setContext('Combobox', value);
-}
-export function useComboboxContext() {
-    return getContext('Combobox');
-}
-export function setComboboxItemPropsContext(value) {
-    setContext('ComboboxItem', value);
-}
-export function useComboboxItemPropsContext() {
-    return getContext('ComboboxItem');
-}
-export function setComboboxItemGroupPropsContext(value) {
-    setContext('ComboboxItemGroup', value);
-}
-export function useComboboxItemGroupPropsContext() {
-    return getContext('ComboboxItemGroup');
-}
+import { Context } from '../utils.svelte.js';
+export const comboboxContext = new Context('Combobox');
+export const comboboxItemPropsContext = new Context('ComboboxItem');
+export const comboboxItemGroupPropsContext = new Context('ComboboxItemGroup');

package/dist/combobox/control.svelte

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

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

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

@@ -0,0 +1,10 @@
+import * as combobox from '@zag-js/combobox';
+export interface CreateComboboxProps<T> extends Omit<combobox.Context, 'collection'> {
+    items: T[];
+    itemToString?: (item: T) => string;
+    itemToValue?: (item: T) => string;
+    isItemDisabled?: (item: T) => boolean;
+}
+export interface CreateComboboxReturn extends combobox.Api {
+}
+export declare function createCombobox<T>(props: CreateComboboxProps<T>): CreateComboboxReturn;

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

@@ -0,0 +1,19 @@
+import * as combobox from '@zag-js/combobox';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createCombobox(props) {
+    const collection = $derived(combobox.collection({
+        items: props.items,
+        itemToValue: (item) => (props.itemToValue ? props.itemToValue(item) : String(item)),
+        itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
+        isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
+    }));
+    const [state, send] = useMachine(combobox.machine({
+        ...props,
+        collection,
+    }));
+    const api = $derived(reflect(() => ({
+        ...combobox.connect(state, send, normalizeProps),
+        collection,
+    })));
+    return api;
+}

package/dist/combobox/input.svelte

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

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

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

package/dist/combobox/item-group-label.svelte

@@ -1,22 +1,18 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ComboboxItemGroupLabelProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface ComboboxItemGroupLabelProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useComboboxContext,
-    useComboboxItemGroupPropsContext,
-  } from './context.svelte.js';
+  import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
   let {children, ...props}: ComboboxItemGroupLabelProps = $props();
 
-  let context = useComboboxContext();
+  let context = comboboxContext.get();
 
-  let itemGroupProps = useComboboxItemGroupPropsContext();
+  let itemGroupProps = comboboxItemGroupPropsContext.get();
 
   let attrs = $derived(
     mergeProps(

package/dist/combobox/item-group-label.svelte.d.ts

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/combobox';
 
@@ -9,22 +9,21 @@
 <script lang="ts">
   import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    setComboboxItemGroupPropsContext,
-    useComboboxContext,
-  } from './context.svelte.js';
+  import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
 
   let {id, children, ...props}: ComboboxItemGroupProps = $props();
 
-  let context = useComboboxContext();
+  let context = comboboxContext.get();
 
   let uid = createUniqueId();
 
-  let attrs = $derived(
-    mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
-  );
+  let comboboxItemGroupProps = $derived({
+    id: id ?? uid,
+  });
 
-  setComboboxItemGroupPropsContext({id: id ?? uid});
+  let attrs = $derived(mergeProps(props, context.getItemGroupProps(comboboxItemGroupProps)));
+
+  comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
 </script>
 
 <div {...attrs}>

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemGroupProps } from '@zag-js/combobox';
-export interface ComboboxItemGroupProps extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {
-}
 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/combobox/item-indicator.svelte

@@ -1,26 +1,20 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface ComboboxItemIndicatorProps
-    extends HtmlIngredientProps<'span'> {}
+  export interface ComboboxItemIndicatorProps extends HtmlIngredientProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    useComboboxContext,
-    useComboboxItemPropsContext,
-  } from './context.svelte.js';
+  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
   let {children, ...props}: ComboboxItemIndicatorProps = $props();
 
-  let context = useComboboxContext();
+  let context = comboboxContext.get();
 
-  let itemProps = useComboboxItemPropsContext();
+  let itemProps = comboboxItemPropsContext.get();
 
-  let attrs = $derived(
-    mergeProps(props, context.getItemIndicatorProps(itemProps)),
-  );
+  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/combobox/item-indicator.svelte.d.ts

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