ui-ingredients 0.0.11 → 0.0.12

package/dist/timer/item-label.svelte

@@ -1,23 +1,22 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface TimerItemLabelProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTimerContext, useTimerItemContext} from './context.svelte.js';
-
-  let {children, ...props}: TimerItemLabelProps = $props();
-
-  let context = useTimerContext();
-  let itemContext = useTimerItemContext();
-
-  let attrs = $derived(
-    mergeProps(props, context.getItemLabelProps(itemContext)),
-  );
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimerItemLabelProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTimerContext, useTimerItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: TimerItemLabelProps = $props();
+
+  let context = useTimerContext();
+
+  let itemProps = useTimerItemPropsContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemLabelProps(itemProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/timer/item-value.svelte

@@ -1,27 +1,26 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface TimerItemValueProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTimerContext, useTimerItemContext} from './context.svelte.js';
-
-  let {children, ...props}: TimerItemValueProps = $props();
-
-  let context = useTimerContext();
-  let itemContext = useTimerItemContext();
-
-  let attrs = $derived(
-    mergeProps(props, context.getItemValueProps(itemContext)),
-  );
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.formattedTime[itemContext.type]}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimerItemValueProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTimerContext, useTimerItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: TimerItemValueProps = $props();
+
+  let context = useTimerContext();
+
+  let itemProps = useTimerItemPropsContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemValueProps(itemProps)));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.formattedTime[itemProps.type]}
+  {/if}
+</span>

package/dist/timer/item.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps} from '@zag-js/timer';
-
-  export interface TimerItemProps
-    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setTimerItemContext, useTimerContext} from './context.svelte.js';
-
-  let {type, children, ...props}: TimerItemProps = $props();
-
-  let context = useTimerContext();
-
-  let attrs = $derived(mergeProps(props, context.getItemProps({type})));
-
-  setTimerItemContext({type});
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps} from '@zag-js/timer';
+
+  export interface TimerItemProps
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setTimerItemPropsContext, useTimerContext} from './context.svelte.js';
+
+  let {type, children, ...props}: TimerItemProps = $props();
+
+  let context = useTimerContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({type})));
+
+  setTimerItemPropsContext({type});
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/timer/root.svelte

@@ -1,56 +1,59 @@
-<script lang="ts" context="module">
-  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]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {createTimerContext, setTimerContext} from './context.svelte.js';
-
-  let {
-    id,
-    startMs,
-    targetMs,
-    interval,
-    autoStart,
-    countdown,
-    onTick,
-    onComplete,
-    getRootNode,
-    children,
-    ...props
-  }: TimerProps = $props();
-
-  let context = createTimerContext({
-    id: id ?? uuid(),
-    startMs,
-    targetMs,
-    interval,
-    autoStart,
-    countdown,
-    onTick,
-    onComplete,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setTimerContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  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]>;
+  }
+</script>
+
+<script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createTimerContext, setTimerContext} from './context.svelte.js';
+
+  let {
+    id,
+    startMs,
+    targetMs,
+    interval,
+    autoStart,
+    countdown,
+    onTick,
+    onComplete,
+    getRootNode,
+    children,
+    ...props
+  }: TimerProps = $props();
+
+  let environmentContext = useEnvironmentContext();
+
+  let context = createTimerContext({
+    id: id ?? uuid(),
+    startMs,
+    targetMs,
+    interval,
+    autoStart,
+    countdown,
+    onTick,
+    onComplete,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setTimerContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/timer/separator.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface TimerSeparatorProps extends HtmlIngredientProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useTimerContext} from './context.svelte.js';
-
-  let {children, ...props}: TimerSeparatorProps = $props();
-
-  let context = useTimerContext();
-
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimerSeparatorProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTimerContext} from './context.svelte.js';
+
+  let {children, ...props}: TimerSeparatorProps = $props();
+
+  let context = useTimerContext();
+
+  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/toast/action-trigger.svelte

@@ -1,21 +1,21 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface ToastActionTriggerProps
-    extends HtmlIngredientProps<'button'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
-
-  let {children, ...props}: ToastActionTriggerProps = $props();
-
-  let context = useToastContext();
-
-  let attrs = $derived(mergeProps(props, context.getActionTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToastActionTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastActionTriggerProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getActionTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/toast/close-trigger.svelte

@@ -1,21 +1,21 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface ToastCloseTriggerProps
-    extends HtmlIngredientProps<'button'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
-
-  let {children, ...props}: ToastCloseTriggerProps = $props();
-
-  let context = useToastContext();
-
-  let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToastCloseTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastCloseTriggerProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -1,9 +1,20 @@
+import { useEnvironmentContext } from '../environment-provider/index.js';
+import { useLocaleContext } from '../locale-provider/index.js';
 import { uuid } 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 ?? uuid());
-    const machine = $derived(toast.group.machine({ ...props, id }));
+    const dir = $derived(props?.dir ?? localContext?.dir);
+    const getRootNode = $derived(props?.getRootNode ?? environmentContext?.getRootNode);
+    const machine = $derived(toast.group.machine({
+        ...props,
+        id,
+        dir,
+        getRootNode,
+    }));
     const api = $derived(reflect(() => ({
         machine,
         ...toast.group.connect(machine, machine.send, normalizeProps),

package/dist/toast/description.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface ToastDescriptionProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
-
-  let {children, ...props}: ToastDescriptionProps = $props();
-
-  let context = useToastContext();
-
-  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.description}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToastDescriptionProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastDescriptionProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.description}
+  {/if}
+</div>

package/dist/toast/root.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" context="module">
-  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]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
-
-  let {children, ...props}: ToastProps = $props();
-
-  let context = useToastContext();
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-</script>
-
-<div {...attrs}>
-  <div {...context.getGhostBeforeProps()}></div>
-
-  {@render children?.(context)}
-
-  <div {...context.getGhostAfterProps()}></div>
-</div>
+<script lang="ts" context="module">
+  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]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+</script>
+
+<div {...attrs}>
+  <div {...context.getGhostBeforeProps()}></div>
+
+  {@render children?.(context)}
+
+  <div {...context.getGhostAfterProps()}></div>
+</div>

package/dist/toast/title.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface ToastTitleProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useToastContext} from './context.svelte.js';
-
-  let {children, ...props}: ToastTitleProps = $props();
-
-  let context = useToastContext();
-
-  let attrs = $derived(mergeProps(props, context.getTitleProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.title}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToastTitleProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastTitleProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.title}
+  {/if}
+</div>

package/dist/toast/toaster.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" context="module">
-  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]>;
-  }
-</script>
-
-<script lang="ts">
-  import {Portal} from '../portal/index.js';
-  import {mergeProps, normalizeProps, useMachine} from '@zag-js/svelte';
-  import * as toast from '@zag-js/toast';
-  import ToastActor from './actor.svelte';
-
-  let {toaster, children, ...props}: ToasterProps = $props();
-
-  let [state, send] = useMachine(toaster.machine);
-
-  let placement = $derived(state.context.placement);
-  let api = $derived(toast.group.connect(state, send, normalizeProps));
-  let toasts = $derived(api.getToastsByPlacement(placement));
-  let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
-</script>
-
-<Portal>
-  <div {...attrs}>
-    {#each toasts as toast (toast.id)}
-      <ToastActor actor={toast}>
-        {#snippet children$(ctx)}
-          {@render children(ctx)}
-        {/snippet}
-      </ToastActor>
-    {/each}
-  </div>
-</Portal>
+<script lang="ts" context="module">
+  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]>;
+  }
+</script>
+
+<script lang="ts">
+  import {Portal} from '../portal/index.js';
+  import {mergeProps, normalizeProps, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import ToastActor from './actor.svelte';
+
+  let {toaster, children, ...props}: ToasterProps = $props();
+
+  let [state, send] = useMachine(toaster.machine);
+
+  let placement = $derived(state.context.placement);
+  let api = $derived(toast.group.connect(state, send, normalizeProps));
+  let toasts = $derived(api.getToastsByPlacement(placement));
+  let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
+</script>
+
+<Portal>
+  <div {...attrs}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children$(ctx)}
+          {@render children(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>