ui-ingredients 0.0.16 → 0.0.17

package/dist/carousel/item-group.svelte

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

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface CarouselItemGroupProps 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/carousel/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/carousel';
   import type {Snippet} from 'svelte';
@@ -11,14 +11,13 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useCarouselContext} from './context.svelte.js';
+  import {carouselContext} from './context.svelte.js';
 
   let {index, children, ...props}: CarouselItemProps = $props();
 
-  let context = useCarouselContext();
+  let context = carouselContext.get();
 
   let state = $derived(context.getItemState({index}));
-
   let attrs = $derived(mergeProps(props, context.getItemProps({index})));
 </script>
 

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

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

package/dist/carousel/next-trigger.svelte

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

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

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

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

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface CarouselPrevTriggerProps 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/carousel/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 {
-    CreateCarouselContextProps,
-    CreateCarouselContextReturn,
-  } from './context.svelte.js';
+  import type {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
 
   export interface CarouselProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateCarouselContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateCarouselContextReturn]>;
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateCarouselProps, 'id'>> {
+    children?: Snippet<[api: CreateCarouselReturn]>;
   }
 </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 {createCarouselContext, setCarouselContext} from './context.svelte.js';
+  import {carouselContext} from './context.svelte.js';
+  import {createCarousel} from './create-carousel.svelte.js';
 
   let {
     id,
@@ -38,11 +33,13 @@
     ...props
   }: CarouselProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createCarouselContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createCarousel({
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     loop,
@@ -57,7 +54,7 @@
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setCarouselContext(context);
+  carouselContext.set(context);
 </script>
 
 <div {...attrs}>

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

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

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

package/dist/carousel/viewport.svelte.d.ts

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

@@ -1,8 +1,3 @@
-import * as checkbox from '@zag-js/checkbox';
-export interface CreateCheckboxContextProps extends checkbox.Context {
-}
-export interface CreateCheckboxContextReturn extends ReturnType<typeof createCheckboxContext> {
-}
-export declare function createCheckboxContext(props: CreateCheckboxContextProps): any;
-export declare function setCheckboxContext(value: CreateCheckboxContextReturn): void;
-export declare function useCheckboxContext(): CreateCheckboxContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateCheckboxReturn } from './create-checkbox.svelte.js';
+export declare const checkboxContext: Context<CreateCheckboxReturn>;

package/dist/checkbox/context.svelte.js

@@ -1,14 +1,2 @@
-import * as checkbox from '@zag-js/checkbox';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createCheckboxContext(props) {
-    const [state, send] = useMachine(checkbox.machine(props));
-    const api = $derived(reflect(() => checkbox.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setCheckboxContext(value) {
-    setContext('Checkbox', value);
-}
-export function useCheckboxContext() {
-    return getContext('Checkbox');
-}
+import { Context } from '../utils.svelte.js';
+export const checkboxContext = new Context('Checkbox');

package/dist/checkbox/control.svelte

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

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

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

@@ -0,0 +1,6 @@
+import * as checkbox from '@zag-js/checkbox';
+export interface CreateCheckboxProps extends checkbox.Context {
+}
+export interface CreateCheckboxReturn extends checkbox.Api {
+}
+export declare function createCheckbox(props: CreateCheckboxProps): CreateCheckboxReturn;

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

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

package/dist/checkbox/hidden-input.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CheckboxHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
+  export interface CheckboxHiddenInputProps extends HtmlIngredientProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useCheckboxContext} from './context.svelte.js';
+  import {checkboxContext} from './context.svelte.js';
 
   let {...props}: CheckboxHiddenInputProps = $props();
 
-  let context = useCheckboxContext();
+  let context = checkboxContext.get();
 
   let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
 </script>

package/dist/checkbox/hidden-input.svelte.d.ts

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

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

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

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

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

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

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

@@ -1,26 +1,24 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {
-    CreateCheckboxContextProps,
-    CreateCheckboxContextReturn,
-  } from './context.svelte.js';
+  import type {CreateCheckboxProps, CreateCheckboxReturn} from './create-checkbox.svelte.js';
 
   export interface CheckboxProps
     extends Assign<
       Omit<HtmlIngredientProps<'label'>, 'children'>,
-      Omit<CreateCheckboxContextProps, 'id'>
+      Omit<CreateCheckboxProps, 'id'>
     > {
-    children?: Snippet<[context: CreateCheckboxContextReturn]>;
+    children?: Snippet<[api: CreateCheckboxReturn]>;
   }
 </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 {createCheckboxContext, setCheckboxContext} from './context.svelte.js';
+  import {checkboxContext} from './context.svelte.js';
+  import {createCheckbox} from './create-checkbox.svelte.js';
 
   let {
     id,
@@ -40,11 +38,13 @@
     ...props
   }: CheckboxProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let localeContext = getLocaleContext();
+  let environmentContext = getEnvironmentContext();
 
-  let context = createCheckboxContext({
-    id: id ?? createUniqueId(),
+  let uid = createUniqueId();
+
+  let context = createCheckbox({
+    id: id ?? uid,
     ids,
     dir: dir ?? localeContext?.dir,
     form,
@@ -61,7 +61,7 @@
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setCheckboxContext(context);
+  checkboxContext.set(context);
 </script>
 
 <label {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateCheckboxContextProps, CreateCheckboxContextReturn } from './context.svelte.js';
-export interface CheckboxProps extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, Omit<CreateCheckboxContextProps, 'id'>> {
-    children?: Snippet<[context: CreateCheckboxContextReturn]>;
-}
 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/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as clipboard from '@zag-js/clipboard';
-export interface CreateClipboardContextProps extends clipboard.Context {
-}
-export interface CreateClipboardContextReturn extends ReturnType<typeof createClipboardContext> {
-}
-export declare function createClipboardContext(props: CreateClipboardContextProps): any;
-export declare function setClipboardContext(value: CreateClipboardContextReturn): void;
-export declare function useClipboardContext(): CreateClipboardContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateClipboardReturn } from './create-clipboard.svelte.js';
+export declare const clipboardContext: Context<CreateClipboardReturn>;

package/dist/clipboard/context.svelte.js

@@ -1,14 +1,2 @@
-import * as clipboard from '@zag-js/clipboard';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createClipboardContext(props) {
-    const [state, send] = useMachine(clipboard.machine(props));
-    const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setClipboardContext(value) {
-    setContext('Clipboard', value);
-}
-export function useClipboardContext() {
-    return getContext('Clipboard');
-}
+import { Context } from '../utils.svelte.js';
+export const clipboardContext = new Context('Clipboard');

package/dist/clipboard/control.svelte

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

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

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

@@ -0,0 +1,6 @@
+import * as clipboard from '@zag-js/clipboard';
+export interface CreateClipboardProps extends clipboard.Context {
+}
+export interface CreateClipboardReturn extends clipboard.Api {
+}
+export declare function createClipboard(props: CreateClipboardProps): CreateClipboardReturn;

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

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

package/dist/clipboard/indicator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
 
@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useClipboardContext} from './context.svelte.js';
+  import {clipboardContext} from './context.svelte.js';
 
   let {copied = false, children, ...props}: ClipboardIndicatorProps = $props();
 
-  let context = useClipboardContext();
+  let context = clipboardContext.get();
 
   let attrs = $derived(mergeProps(props, context.getIndicatorProps({copied})));
 </script>

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { IndicatorProps } from '@zag-js/clipboard';
-export interface ClipboardIndicatorProps extends Assign<HtmlIngredientProps<'span'>, Partial<IndicatorProps>> {
-}
 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/input.svelte

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

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

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

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

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

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