ui-ingredients 0.0.36 → 0.0.38

package/README.md

@@ -6,6 +6,8 @@ Headless component library for [Svelte](https://svelte.dev/) powered by [zag](ht
 
 ```bash
 npm install ui-ingredients
+# yarn add ui-ingredients
+# pnpm add ui-ingredients
 ```
 
 ## Usage
@@ -74,5 +76,14 @@ npm install ui-ingredients
 - [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
 - [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
 - [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
+- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
+- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
+
+## Credits
+
+- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
+- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
+
+## Demo
 
 View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/context.svelte.d.ts

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/accordion';
 import type { CreateAccordionReturn } from './create-accordion.svelte.js';
-export declare const accordionContext: Context<CreateAccordionReturn>;
-export declare const accordionItemPropsContext: Context<ItemProps>;
+export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => void;
+export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/accordion/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const accordionContext = new Context('Accordion');
-export const accordionItemPropsContext = new Context('AccordionItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getAccordionContext, setAccordionContext] = createContext('Accordion');
+export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem');

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

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createAccordion(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(accordion.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(accordion.machine(context), { context });
     const api = $derived(reflect(() => accordion.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/accordion/index.d.ts

@@ -5,3 +5,4 @@ export type { AccordionItemTriggerProps } from './item-trigger.svelte';
 export type { AccordionItemProps } from './item.svelte';
 export type { AccordionProps } from './root.svelte';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { getAccordionContext } from './context.svelte.js';

package/dist/accordion/index.js

@@ -1,2 +1,3 @@
 export * as Accordion from './accordion.js';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { getAccordionContext } from './context.svelte.js';

package/dist/accordion/item-content.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    accordionContext,
-    accordionItemPropsContext,
+    getAccordionContext,
+    getAccordionItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: AccordionItemContentProps = $props();
 
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, accordion.getItemContentProps(itemProps)),

package/dist/accordion/item-indicator.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    accordionContext,
-    accordionItemPropsContext,
+    getAccordionContext,
+    getAccordionItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: AccordionIndicatorProps = $props();
 
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, accordion.getItemIndicatorProps(itemProps)),

package/dist/accordion/item-trigger.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    accordionContext,
-    accordionItemPropsContext,
+    getAccordionContext,
+    getAccordionItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
 
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, accordion.getItemTriggerProps(itemProps)),

package/dist/accordion/item.svelte

@@ -14,13 +14,13 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import {
-    accordionContext,
-    accordionItemPropsContext,
+    getAccordionContext,
+    setAccordionItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: AccordionItemProps = $props();
 
-  let accordion = accordionContext.get();
+  let accordion = getAccordionContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['value', 'disabled'])(props),
@@ -31,7 +31,7 @@
     mergeProps(otherProps, accordion.getItemProps(itemProps)),
   );
 
-  accordionItemPropsContext.set(() => itemProps);
+  setAccordionItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/accordion/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {accordionContext} from './context.svelte.js';
+  import {setAccordionContext} from './context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
 
   let {asChild, children, ...props}: AccordionProps = $props();
@@ -40,7 +40,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
 
-  accordionContext.set(accordion);
+  setAccordionContext(accordion);
 </script>
 
 {#if asChild}

package/dist/avatar/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateAvatarReturn } from './create-avatar.svelte.js';
-export declare const avatarContext: Context<CreateAvatarReturn>;
+export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => void;

package/dist/avatar/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const avatarContext = new Context('Avatar');
+import { createContext } from '../create-context.svelte.js';
+export const [getAvatarContext, setAvatarContext] = createContext('Avatar');

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

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createAvatar(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(avatar.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(avatar.machine(context), { context });
     const api = $derived(reflect(() => avatar.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/avatar/fallback.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {avatarContext} from './context.svelte.js';
+  import {getAvatarContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: AvatarFallbackProps = $props();
 
-  let avatar = avatarContext.get();
+  let avatar = getAvatarContext();
 
   let mergedProps = $derived(mergeProps(props, avatar.getFallbackProps()));
 </script>

package/dist/avatar/image.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {avatarContext} from './context.svelte.js';
+  import {getAvatarContext} from './context.svelte.js';
 
   let {asChild, ...props}: AvatarImageProps = $props();
 
-  let avatar = avatarContext.get();
+  let avatar = getAvatarContext();
 
   let mergedProps = $derived(mergeProps(props, avatar.getImageProps()));
 </script>

package/dist/avatar/index.d.ts

@@ -3,3 +3,4 @@ export type { AvatarFallbackProps } from './fallback.svelte';
 export type { AvatarImageProps } from './image.svelte';
 export type { AvatarProps } from './root.svelte';
 export { anatomy as AvatarAnatomy } from '@zag-js/avatar';
+export { getAvatarContext } from './context.svelte.js';

package/dist/avatar/index.js

@@ -1,2 +1,3 @@
 export * as Avatar from './avatar.js';
 export { anatomy as AvatarAnatomy } from '@zag-js/avatar';
+export { getAvatarContext } from './context.svelte.js';

package/dist/avatar/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {avatarContext} from './context.svelte.js';
+  import {setAvatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
   let {asChild, children, ...props}: AvatarProps = $props();
@@ -30,7 +30,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, avatar.getRootProps()));
 
-  avatarContext.set(avatar);
+  setAvatarContext(avatar);
 </script>
 
 {#if asChild}

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateCarouselReturn } from './create-carousel.svelte.js';
-export declare const carouselContext: Context<CreateCarouselReturn>;
+export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => void;

package/dist/carousel/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const carouselContext = new Context('Carousel');
+import { createContext } from '../create-context.svelte.js';
+export const [getCarouselContext, setCarouselContext] = createContext('Carousel');

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

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createCarousel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(carousel.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(carousel.machine(context), { context });
     const api = $derived(reflect(() => carousel.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/carousel/index.d.ts

@@ -8,3 +8,4 @@ export type { CarouselPrevTriggerProps } from './prev-trigger.svelte';
 export type { CarouselProps } from './root.svelte';
 export type { CarouselViewportProps } from './viewport.svelte';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
+export { getCarouselContext } from './context.svelte.js';

package/dist/carousel/index.js

@@ -1,2 +1,3 @@
 export * as Carousel from './carousel.js';
 export { anatomy as carouselAnatomy } from '@zag-js/carousel';
+export { getCarouselContext } from './context.svelte.js';

package/dist/carousel/indicator-group.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselIndicatorGroupProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let mergedProps = $derived(
     mergeProps(props, carousel.getIndicatorGroupProps()),

package/dist/carousel/indicator.svelte

@@ -11,11 +11,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselIndicatorProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let [indicatorProps, otherProps] = $derived(
     createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),

package/dist/carousel/item-group.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselItemGroupProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let mergedProps = $derived(mergeProps(props, carousel.getItemGroupProps()));
 </script>

package/dist/carousel/item.svelte

@@ -13,11 +13,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselItemProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),

package/dist/carousel/next-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselNextTriggerProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let mergedProps = $derived(mergeProps(props, carousel.getNextTriggerProps()));
 </script>

package/dist/carousel/prev-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselPrevTriggerProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let mergedProps = $derived(mergeProps(props, carousel.getPrevTriggerProps()));
 </script>

package/dist/carousel/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {carouselContext} from './context.svelte.js';
+  import {setCarouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 
   let {asChild, children, ...props}: CarouselProps = $props();
@@ -40,7 +40,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, carousel.getRootProps()));
 
-  carouselContext.set(carousel);
+  setCarouselContext(carousel);
 </script>
 
 {#if asChild}

package/dist/carousel/viewport.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {carouselContext} from './context.svelte.js';
+  import {getCarouselContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CarouselViewportProps = $props();
 
-  let carousel = carouselContext.get();
+  let carousel = getCarouselContext();
 
   let mergedProps = $derived(mergeProps(props, carousel.getViewportProps()));
 </script>

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateCheckboxReturn } from './create-checkbox.svelte.js';
-export declare const checkboxContext: Context<CreateCheckboxReturn>;
+export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => void;

package/dist/checkbox/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const checkboxContext = new Context('Checkbox');
+import { createContext } from '../create-context.svelte.js';
+export const [getCheckboxContext, setCheckboxContext] = createContext('Checkbox');

package/dist/checkbox/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {checkboxContext} from './context.svelte.js';
+  import {getCheckboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CheckboxControlProps = $props();
 
-  let checkbox = checkboxContext.get();
+  let checkbox = getCheckboxContext();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getControlProps()));
 </script>

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

@@ -8,7 +8,8 @@ export function createCheckbox(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(checkbox.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +19,22 @@ export function createCheckbox(props) {
         readOnly: field?.readOnly,
         required: field?.required,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(checkbox.machine(context), { context });
+    const api = $derived(reflect(() => {
+        const o = checkbox.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => checkbox.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/checkbox/hidden-input.svelte

@@ -5,16 +5,14 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {checkboxContext} from './context.svelte.js';
+  import {getCheckboxContext} from './context.svelte.js';
 
   let {...props}: CheckboxHiddenInputProps = $props();
 
-  let field = getFieldContext();
-  let checkbox = checkboxContext.get();
+  let checkbox = getCheckboxContext();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getHiddenInputProps()));
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/checkbox/index.d.ts

@@ -5,3 +5,4 @@ export type { CheckboxIndicatorProps } from './indicator.svelte';
 export type { CheckboxLabelProps } from './label.svelte';
 export type { CheckboxProps } from './root.svelte';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
+export { getCheckboxContext } from './context.svelte.js';

package/dist/checkbox/index.js

@@ -1,2 +1,3 @@
 export * as Checkbox from './checkbox.js';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
+export { getCheckboxContext } from './context.svelte.js';

package/dist/checkbox/indicator.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {checkboxContext} from './context.svelte.js';
+  import {getCheckboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CheckboxIndicatorProps = $props();
 
-  let checkbox = checkboxContext.get();
+  let checkbox = getCheckboxContext();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getIndicatorProps()));
 </script>

package/dist/checkbox/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {checkboxContext} from './context.svelte.js';
+  import {getCheckboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: CheckboxLabelProps = $props();
 
-  let checkbox = checkboxContext.get();
+  let checkbox = getCheckboxContext();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getLabelProps()));
 </script>

package/dist/checkbox/root.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {checkboxContext} from './context.svelte.js';
+  import {setCheckboxContext} from './context.svelte.js';
   import {createCheckbox} from './create-checkbox.svelte.js';
 
   import {reflect} from '@zag-js/svelte';
@@ -43,7 +43,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, checkbox.getRootProps()));
 
-  checkboxContext.set(checkbox);
+  setCheckboxContext(checkbox);
 </script>
 
 {#if asChild}

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateClipboardReturn } from './create-clipboard.svelte.js';
-export declare const clipboardContext: Context<CreateClipboardReturn>;
+export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => void;

package/dist/clipboard/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const clipboardContext = new Context('Clipboard');
+import { createContext } from '../create-context.svelte.js';
+export const [getClipboardContext, setClipboardContext] = createContext('Clipboard');

package/dist/clipboard/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {clipboardContext} from './context.svelte.js';
+  import {getClipboardContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ClipboardControlProps = $props();
 
-  let clipboard = clipboardContext.get();
+  let clipboard = getClipboardContext();
 
   let mergedProps = $derived(mergeProps(props, clipboard.getControlProps()));
 </script>

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

@@ -4,11 +4,13 @@ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(clipboard.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(clipboard.machine(context), { context });
     const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/clipboard/index.d.ts

@@ -6,3 +6,4 @@ export type { ClipboardLabelProps } from './label.svelte';
 export type { ClipboardProps } from './root.svelte';
 export type { ClipboardTriggerProps } from './trigger.svelte';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
+export { getClipboardContext } from './context.svelte.js';