ui-ingredients 0.0.10 → 0.0.12

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

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+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<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateTimerContextProps, 'id'>> {
+export interface TimerProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateTimerContextProps, 'id'>> {
     children?: Snippet<[context: CreateTimerContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/timer/separator.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface TimerSeparatorProps extends SvelteHtmlProps<'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/timer/separator.svelte.d.ts

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

package/dist/timer/timer.d.ts

@@ -0,0 +1,6 @@
+export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as ItemLabel } from './item-label.svelte';
+export { default as ItemValue } from './item-value.svelte';
+export { default as Item } from './item.svelte';
+export { default as Root } from './root.svelte';
+export { default as Separator } from './separator.svelte';

package/dist/timer/timer.js

@@ -0,0 +1,6 @@
+export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as ItemLabel } from './item-label.svelte';
+export { default as ItemValue } from './item-value.svelte';
+export { default as Item } from './item.svelte';
+export { default as Root } from './root.svelte';
+export { default as Separator } from './separator.svelte';

package/dist/toast/action-trigger.svelte

@@ -1,20 +1,21 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface ToastActionTriggerProps extends SvelteHtmlProps<'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/action-trigger.svelte.d.ts

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

package/dist/toast/close-trigger.svelte

@@ -1,20 +1,21 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface ToastCloseTriggerProps extends SvelteHtmlProps<'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/close-trigger.svelte.d.ts

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

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 {SvelteHtmlProps} from '../types.js';
-
-  export interface ToastDescriptionProps extends SvelteHtmlProps<'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/description.svelte.d.ts

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

package/dist/toast/index.d.ts

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

package/dist/toast/index.js

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

package/dist/toast/root.svelte

@@ -1,28 +1,29 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateToastContextReturn} from './context.svelte.js';
-
-  export interface ToastProps extends Omit<SvelteHtmlProps<'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/root.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { SvelteHtmlProps } from '../types.js';
+import type { HtmlIngredientProps } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { CreateToastContextReturn } from './context.svelte.js';
-export interface ToastProps extends Omit<SvelteHtmlProps<'div'>, 'children'> {
+export interface ToastProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
     children?: Snippet<[context: CreateToastContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/toast/title.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface ToastTitleProps extends SvelteHtmlProps<'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/title.svelte.d.ts

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

package/dist/toast/toaster.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} 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<SvelteHtmlProps<'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>

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

@@ -1,8 +1,8 @@
-import type { SvelteHtmlProps } from '../types.js';
+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<SvelteHtmlProps<'div'>, 'children'> {
+export interface ToasterProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
     children: Snippet<[CreateToastContextReturn]>;
 }

package/dist/toggle-group/index.d.ts

@@ -1,2 +1,4 @@
-export { default as Item, type ToggleGroupItemProps } from './item.svelte';
-export { default as Root, type ToggleGroupProps } from './root.svelte';
+export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export type { ToggleGroupItemProps } from './item.svelte';
+export type { ToggleGroupProps } from './root.svelte';
+export * as ToggleGroup from './toggle-group.js';

package/dist/toggle-group/index.js

@@ -1,2 +1,2 @@
-export { default as Item } from './item.svelte';
-export { default as Root } from './root.svelte';
+export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export * as ToggleGroup from './toggle-group.js';

package/dist/toggle-group/item.svelte

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

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

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ItemProps, ItemState } from '@zag-js/toggle-group';
 import type { Snippet } from 'svelte';
-export interface ToggleGroupItemProps extends Assign<Omit<SvelteHtmlProps<'button'>, 'children'>, ItemProps> {
+export interface ToggleGroupItemProps extends Assign<Omit<HtmlIngredientProps<'button'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {