@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/tags-input/tags-input-root-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseTagsInputReturn } from './use-tags-input.svelte';
+export interface TagsInputRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseTagsInputReturn;
+}
+export interface TagsInputRootProviderProps extends Assign<HTMLProps<'div'>, TagsInputRootProviderBaseProps> {
+}
+declare const TagsInputRootProvider: import("svelte").Component<TagsInputRootProviderProps, {}, "">;
+type TagsInputRootProvider = ReturnType<typeof TagsInputRootProvider>;
+export default TagsInputRootProvider;

package/dist/components/tags-input/tags-input-root.svelte

@@ -0,0 +1,77 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseTagsInputProps } from './use-tags-input.svelte'
+
+  export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'> {}
+  export interface TagsInputRootProps extends Assign<HTMLProps<'div'>, TagsInputRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { TagsInputProvider } from './use-tags-input-context'
+  import { useTagsInput } from './use-tags-input.svelte'
+
+  let { value = $bindable<string[]>(), inputValue = $bindable<string>(), ...props }: TagsInputRootProps = $props()
+
+  const [useTagsInputProps, localProps] = $derived(
+    createSplitProps<UseTagsInputProps>()(props, [
+      'addOnPaste',
+      'allowOverflow',
+      'autoFocus',
+      'blurBehavior',
+      'defaultInputValue',
+      'defaultValue',
+      'delimiter',
+      'disabled',
+      'editable',
+      'form',
+      'id',
+      'ids',
+      'inputValue',
+      'invalid',
+      'max',
+      'maxLength',
+      'name',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInputValueChange',
+      'onInteractOutside',
+      'onPointerDownOutside',
+      'onValueChange',
+      'onValueInvalid',
+      'readOnly',
+      'required',
+      'translations',
+      'validate',
+      'value',
+    ]),
+  )
+
+  const providedId = $props.id()
+
+  const machineProps = $derived.by<UseTagsInputProps>(() => {
+    return {
+      ...useTagsInputProps,
+      id: useTagsInputProps.id ?? providedId,
+      value,
+      inputValue,
+      onValueChange: (details) => {
+        useTagsInputProps.onValueChange?.(details)
+        value = details.value
+      },
+      onInputValueChange: (details) => {
+        useTagsInputProps.onInputValueChange?.(details)
+        inputValue = details.inputValue
+      },
+    }
+  })
+
+  const tagsInput = useTagsInput(() => machineProps)
+  const mergedProps = $derived(mergeProps(tagsInput().getRootProps(), localProps))
+
+  TagsInputProvider(tagsInput)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tags-input/tags-input-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseTagsInputProps } from './use-tags-input.svelte';
+export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<'div'> {
+}
+export interface TagsInputRootProps extends Assign<HTMLProps<'div'>, TagsInputRootBaseProps> {
+}
+declare const TagsInputRoot: import("svelte").Component<TagsInputRootProps, {}, "value" | "inputValue">;
+type TagsInputRoot = ReturnType<typeof TagsInputRoot>;
+export default TagsInputRoot;

package/dist/components/tags-input/tags-input.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';

package/dist/components/tags-input/tags-input.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,14 @@
+export { default as Root, type TagsInputRootProps as RootProps, type TagsInputRootBaseProps as RootBaseProps, } from './tags-input-root.svelte';
+export { default as RootProvider, type TagsInputRootProviderProps as RootProviderProps, type TagsInputRootProviderBaseProps as RootProviderBaseProps, } from './tags-input-root-provider.svelte';
+export { default as Context, type TagsInputContextProps as ContextProps } from './tags-input-context.svelte';
+export { default as Label, type TagsInputLabelProps as LabelProps, type TagsInputLabelBaseProps as LabelBaseProps, } from './tags-input-label.svelte';
+export { default as Control, type TagsInputControlProps as ControlProps, type TagsInputControlBaseProps as ControlBaseProps, } from './tags-input-control.svelte';
+export { default as Input, type TagsInputInputProps as InputProps, type TagsInputInputBaseProps as InputBaseProps, } from './tags-input-input.svelte';
+export { default as ClearTrigger, type TagsInputClearTriggerProps as ClearTriggerProps, type TagsInputClearTriggerBaseProps as ClearTriggerBaseProps, } from './tags-input-clear-trigger.svelte';
+export { default as HiddenInput, type TagsInputHiddenInputProps as HiddenInputProps, type TagsInputHiddenInputBaseProps as HiddenInputBaseProps, } from './tags-input-hidden-input.svelte';
+export { default as Item, type TagsInputItemProps as ItemProps, type TagsInputItemBaseProps as ItemBaseProps, } from './tags-input-item.svelte';
+export { default as ItemContext, type TagsInputItemContextProps as ItemContextProps, } from './tags-input-item-context.svelte';
+export { default as ItemText, type TagsInputItemTextProps as ItemTextProps, type TagsInputItemTextBaseProps as ItemTextBaseProps, } from './tags-input-item-text.svelte';
+export { default as ItemDeleteTrigger, type TagsInputItemDeleteTriggerProps as ItemDeleteTriggerProps, type TagsInputItemDeleteTriggerBaseProps as ItemDeleteTriggerBaseProps, } from './tags-input-item-delete-trigger.svelte';
+export { default as ItemInput, type TagsInputItemInputProps as ItemInputProps, type TagsInputItemInputBaseProps as ItemInputBaseProps, } from './tags-input-item-input.svelte';
+export { default as ItemPreview, type TagsInputItemPreviewProps as ItemPreviewProps, type TagsInputItemPreviewBaseProps as ItemPreviewBaseProps, } from './tags-input-item-preview.svelte';

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,14 @@
+export { default as Root, } from './tags-input-root.svelte';
+export { default as RootProvider, } from './tags-input-root-provider.svelte';
+export { default as Context } from './tags-input-context.svelte';
+export { default as Label, } from './tags-input-label.svelte';
+export { default as Control, } from './tags-input-control.svelte';
+export { default as Input, } from './tags-input-input.svelte';
+export { default as ClearTrigger, } from './tags-input-clear-trigger.svelte';
+export { default as HiddenInput, } from './tags-input-hidden-input.svelte';
+export { default as Item, } from './tags-input-item.svelte';
+export { default as ItemContext, } from './tags-input-item-context.svelte';
+export { default as ItemText, } from './tags-input-item-text.svelte';
+export { default as ItemDeleteTrigger, } from './tags-input-item-delete-trigger.svelte';
+export { default as ItemInput, } from './tags-input-item-input.svelte';
+export { default as ItemPreview, } from './tags-input-item-preview.svelte';

package/dist/components/tags-input/use-tags-input-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseTagsInputReturn } from './use-tags-input.svelte';
+export interface UseTagsInputContext extends UseTagsInputReturn {
+}
+export declare const TagsInputProvider: (opts: UseTagsInputContext) => void, useTagsInputContext: (fallback?: UseTagsInputContext | undefined) => UseTagsInputContext;

package/dist/components/tags-input/use-tags-input-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [TagsInputProvider, useTagsInputContext] = createContext({
+    name: 'TagsInputContext',
+});

package/dist/components/tags-input/use-tags-input-item-context.d.ts

@@ -0,0 +1,7 @@
+import type { Accessor } from '../../types';
+export interface UseTagsInputItemContext extends Accessor<{
+    index: number;
+    value: string;
+}> {
+}
+export declare const TagsInputItemProvider: (opts: UseTagsInputItemContext) => void, useTagsInputItemContext: (fallback?: UseTagsInputItemContext | undefined) => UseTagsInputItemContext;

package/dist/components/tags-input/use-tags-input-item-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
+    name: 'TagsInputItemContext',
+});

package/dist/components/tags-input/use-tags-input-item-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemProps } from '@zag-js/tags-input';
+export interface UseTagsInputItemPropsContext extends Accessor<ItemProps> {
+}
+export declare const TagsInputItemPropsProvider: (opts: UseTagsInputItemPropsContext) => void, useTagsInputItemPropsContext: (fallback?: UseTagsInputItemPropsContext | undefined) => UseTagsInputItemPropsContext;

package/dist/components/tags-input/use-tags-input-item-props-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
+    name: 'TagsInputItemPropsContext',
+});

package/dist/components/tags-input/use-tags-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as tagsInput from '@zag-js/tags-input';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseTagsInputProps extends Optional<Omit<tagsInput.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseTagsInputReturn extends Accessor<tagsInput.Api<PropTypes>> {
+}
+export declare const useTagsInput: (inProps?: MaybeFunction<UseTagsInputProps>) => UseTagsInputReturn;

package/dist/components/tags-input/use-tags-input.svelte.js

@@ -0,0 +1,33 @@
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { runIfFn } from '../../utils/run-if-fn';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import * as tagsInput from '@zag-js/tags-input';
+import { ensureProps } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+export const useTagsInput = (inProps = {}) => {
+    const props = $derived.by(() => {
+        const resolvedProps = runIfFn(inProps);
+        ensureProps(resolvedProps, ['id']);
+        return resolvedProps;
+    });
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived({
+        ids: {
+            label: field?.().ids.label,
+            hiddenInput: field?.().ids.control,
+        },
+        // @ts-expect-error - TODO: dir is not a valid prop
+        dir: locale().dir,
+        disabled: field?.().disabled,
+        invalid: field?.().invalid,
+        readOnly: field?.().readOnly,
+        required: field?.().required,
+        getRootNode: env().getRootNode,
+        ...props,
+    });
+    const service = useMachine(tagsInput.machine, () => machineProps);
+    const api = $derived(tagsInput.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/timer/index.d.ts

@@ -1,11 +1,12 @@
 export type { TickDetails as TimerTickDetails } from '@zag-js/timer';
-export { default as TimerActionTrigger, type TimerActionTriggerBaseProps as ActionTriggerBaseProps, type TimerActionTriggerProps as ActionTriggerProps, } from './timer-action-trigger.svelte';
-export { default as TimerArea, type TimerAreaBaseProps as AreaBaseProps, type TimerAreaProps, } from './timer-area.svelte';
-export { default as TimerControl, type TimerControlBaseProps as ControlBaseProps, type TimerControlProps as ControlProps, } from './timer-control.svelte';
-export { default as TimerItem, type TimerItemBaseProps as ItemBaseProps, type TimerItemProps, } from './timer-item.svelte';
-export { default as TimerRootProvider, type TimerRootProviderBaseProps as RootProviderBaseProps, type TimerRootProviderProps as RootProviderProps, } from './timer-root-provider.svelte';
-export { default as TimerRoot, type TimerRootBaseProps as RootBaseProps, type TimerRootProps, } from './timer-root.svelte';
-export { default as TimerSeparator, type TimerSeparatorBaseProps as SeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator.svelte';
+export { default as TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger.svelte';
+export { default as TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area.svelte';
+export { default as TimerContext, type TimerContextProps } from './timer-context.svelte';
+export { default as TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control.svelte';
+export { default as TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item.svelte';
+export { default as TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider.svelte';
+export { default as TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root.svelte';
+export { default as TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator.svelte';
 export { timerAnatomy } from './timer.anatomy';
 export { useTimerContext, type UseTimerContext } from './use-timer-context';
 export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer.svelte';

package/dist/components/timer/index.js

@@ -1,9 +1,10 @@
 export { default as TimerActionTrigger, } from './timer-action-trigger.svelte';
-export { default as TimerArea, } from './timer-area.svelte';
-export { default as TimerControl, } from './timer-control.svelte';
-export { default as TimerItem, } from './timer-item.svelte';
+export { default as TimerArea } from './timer-area.svelte';
+export { default as TimerContext } from './timer-context.svelte';
+export { default as TimerControl } from './timer-control.svelte';
+export { default as TimerItem } from './timer-item.svelte';
 export { default as TimerRootProvider, } from './timer-root-provider.svelte';
-export { default as TimerRoot, } from './timer-root.svelte';
+export { default as TimerRoot } from './timer-root.svelte';
 export { default as TimerSeparator, } from './timer-separator.svelte';
 export { timerAnatomy } from './timer.anatomy';
 export { useTimerContext } from './use-timer-context';

package/dist/components/timer/timer-root.svelte

@@ -10,11 +10,11 @@
   export interface TimerRootBaseProps extends Optional<UseTimerProps, 'id'>, PolymorphicProps<'div'> {}
   export interface TimerRootProps extends Assign<HTMLProps<'div'>, TimerRootBaseProps> {}
 
-  const _props: TimerRootProps = $props()
+  const props: TimerRootProps = $props()
   const providedId = $props.id()
 
   const [useTimerProps, localProps] = $derived(
-    createSplitProps<Optional<UseTimerProps, 'id'>>()(_props, [
+    createSplitProps<Optional<UseTimerProps, 'id'>>()(props, [
       'id',
       'ids',
       'autoStart',

package/dist/components/timer/use-timer-context.js

@@ -1,4 +1,4 @@
 import { createContext } from '../../utils/create-context';
 export const [TimerProvider, useTimerContext] = createContext({
-    key: 'TimerContext',
+    name: 'TimerContext',
 });

package/dist/components/timer/use-timer.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Accessor } from '../../types';
 import { type PropTypes } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
+import { type MaybeFunction } from '@zag-js/utils';
 export interface UseTimerProps extends Omit<timer.Props, 'dir' | 'getRootNode'> {
 }
 export interface UseTimerReturn extends Accessor<timer.Api<PropTypes>> {
 }
-export declare const useTimer: (props: UseTimerProps) => () => timer.Api<import("@zag-js/types").PropTypes>;
+export declare const useTimer: (props: MaybeFunction<UseTimerProps>) => () => timer.Api<import("@zag-js/types").PropTypes>;

package/dist/components/timer/use-timer.svelte.js

@@ -2,15 +2,19 @@ import { useEnvironmentContext } from '../../providers/environment';
 import { useLocaleContext } from '../../providers/locale';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
+import { runIfFn } from '@zag-js/utils';
 export const useTimer = (props) => {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
-    const machineProps = $derived({
-        dir: locale.dir,
-        getRootNode: env.getRootNode,
-        ...props,
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
     });
     const service = useMachine(timer.machine, () => machineProps);
-    const api = $derived(() => timer.connect(service, normalizeProps));
-    return api;
+    const api = $derived(timer.connect(service, normalizeProps));
+    return () => api;
 };

package/dist/components/toast/create-toaster.d.ts

@@ -0,0 +1,6 @@
+import * as toast from '@zag-js/toast';
+export interface CreateToasterProps extends toast.StoreProps {
+}
+export interface CreateToasterReturn extends toast.Store {
+}
+export declare const createToaster: (props: toast.StoreProps) => toast.Store;

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

@@ -0,0 +1,4 @@
+import * as toast from '@zag-js/toast';
+export const createToaster = (props) => {
+    return toast.createStore(props);
+};

package/dist/components/toast/index.d.ts

@@ -0,0 +1,11 @@
+export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster.js';
+export { default as ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger.svelte';
+export { default as ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps, } from './toast-close-trigger.svelte';
+export { default as ToastContext, type ToastContextProps } from './toast-context.svelte';
+export { default as ToastDescription, type ToastDescriptionBaseProps, type ToastDescriptionProps, } from './toast-description.svelte';
+export { default as ToastRoot, type ToastRootBaseProps, type ToastRootProps } from './toast-root.svelte';
+export { default as ToastTitle, type ToastTitleBaseProps, type ToastTitleProps } from './toast-title.svelte';
+export { toastAnatomy } from './toast.anatomy.js';
+export { default as Toaster, type ToasterBaseProps, type ToasterProps } from './toaster.svelte';
+export { useToastContext, type UseToastContext } from './use-toast-context.js';
+export * as Toast from './toast.js';

package/dist/components/toast/index.js

@@ -0,0 +1,11 @@
+export { createToaster } from './create-toaster.js';
+export { default as ToastActionTrigger, } from './toast-action-trigger.svelte';
+export { default as ToastCloseTrigger, } from './toast-close-trigger.svelte';
+export { default as ToastContext } from './toast-context.svelte';
+export { default as ToastDescription, } from './toast-description.svelte';
+export { default as ToastRoot } from './toast-root.svelte';
+export { default as ToastTitle } from './toast-title.svelte';
+export { toastAnatomy } from './toast.anatomy.js';
+export { default as Toaster } from './toaster.svelte';
+export { useToastContext } from './use-toast-context.js';
+export * as Toast from './toast.js';

package/dist/components/toast/toast-action-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastActionTriggerBaseProps extends PolymorphicProps<'button'> {}
+
+  export interface ToastActionTriggerProps extends Assign<HTMLProps<'button'>, ToastActionTriggerBaseProps> {}
+
+  const props: ToastActionTriggerProps = $props()
+
+  const toast = useToastContext()
+  const mergedProps = $derived(mergeProps(toast().getActionTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/toast/toast-action-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ToastActionTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface ToastActionTriggerProps extends Assign<HTMLProps<'button'>, ToastActionTriggerBaseProps> {
+}
+declare const ToastActionTrigger: import("svelte").Component<ToastActionTriggerProps, {}, "">;
+type ToastActionTrigger = ReturnType<typeof ToastActionTrigger>;
+export default ToastActionTrigger;

package/dist/components/toast/toast-close-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastCloseTriggerBaseProps extends PolymorphicProps<'button'> {}
+
+  export interface ToastCloseTriggerProps extends Assign<HTMLProps<'button'>, ToastCloseTriggerBaseProps> {}
+
+  const props: ToastCloseTriggerProps = $props()
+
+  const toast = useToastContext()
+  const mergedProps = $derived(mergeProps(toast().getCloseTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/toast/toast-close-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ToastCloseTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface ToastCloseTriggerProps extends Assign<HTMLProps<'button'>, ToastCloseTriggerBaseProps> {
+}
+declare const ToastCloseTrigger: import("svelte").Component<ToastCloseTriggerProps, {}, "">;
+type ToastCloseTrigger = ReturnType<typeof ToastCloseTrigger>;
+export default ToastCloseTrigger;

package/dist/components/toast/toast-context.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseToastContext } from './use-toast-context.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastContextProps {
+    render: Snippet<[UseToastContext]>
+  }
+
+  let { render }: ToastContextProps = $props()
+
+  const context = useToastContext()
+</script>
+
+{@render render(context)}

package/dist/components/toast/toast-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseToastContext } from './use-toast-context.js';
+export interface ToastContextProps {
+    render: Snippet<[UseToastContext]>;
+}
+declare const ToastContext: import("svelte").Component<ToastContextProps, {}, "">;
+type ToastContext = ReturnType<typeof ToastContext>;
+export default ToastContext;

package/dist/components/toast/toast-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastDescriptionBaseProps extends PolymorphicProps<'div'> {}
+
+  export interface ToastDescriptionProps extends Assign<HTMLProps<'div'>, ToastDescriptionBaseProps> {}
+
+  const props: ToastDescriptionProps = $props()
+
+  const toast = useToastContext()
+  const mergedProps = $derived(mergeProps(toast().getDescriptionProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/toast/toast-description.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ToastDescriptionBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ToastDescriptionProps extends Assign<HTMLProps<'div'>, ToastDescriptionBaseProps> {
+}
+declare const ToastDescription: import("svelte").Component<ToastDescriptionProps, {}, "">;
+type ToastDescription = ReturnType<typeof ToastDescription>;
+export default ToastDescription;

package/dist/components/toast/toast-root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastRootBaseProps extends PolymorphicProps<'div'> {}
+  export interface ToastRootProps extends Assign<HTMLProps<'div'>, ToastRootBaseProps> {}
+
+  const props: ToastRootProps = $props()
+
+  const toast = useToastContext()
+  const mergedProps = $derived(mergeProps(toast().getRootProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps}>
+  <div {...toast().getGhostBeforeProps()}></div>
+  {@render props.children?.()}
+  <div {...toast().getGhostAfterProps()}></div>
+</Ark>

package/dist/components/toast/toast-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ToastRootBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ToastRootProps extends Assign<HTMLProps<'div'>, ToastRootBaseProps> {
+}
+declare const ToastRoot: import("svelte").Component<ToastRootProps, {}, "">;
+type ToastRoot = ReturnType<typeof ToastRoot>;
+export default ToastRoot;

package/dist/components/toast/toast-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useToastContext } from './use-toast-context.js'
+
+  export interface ToastTitleBaseProps extends PolymorphicProps<'div'> {}
+
+  export interface ToastTitleProps extends Assign<HTMLProps<'div'>, ToastTitleBaseProps> {}
+
+  const props: ToastTitleProps = $props()
+
+  const toast = useToastContext()
+  const mergedProps = $derived(mergeProps(toast().getTitleProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/toast/toast-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ToastTitleBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ToastTitleProps extends Assign<HTMLProps<'div'>, ToastTitleBaseProps> {
+}
+declare const ToastTitle: import("svelte").Component<ToastTitleProps, {}, "">;
+type ToastTitle = ReturnType<typeof ToastTitle>;
+export default ToastTitle;

package/dist/components/toast/toast.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as toastAnatomy } from '@zag-js/toast';

package/dist/components/toast/toast.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as toastAnatomy } from '@zag-js/toast';

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,6 @@
+export { default as ActionTrigger, type ToastActionTriggerBaseProps as ActionTriggerBaseProps, type ToastActionTriggerProps as ActionTriggerProps, } from './toast-action-trigger.svelte';
+export { default as CloseTrigger, type ToastCloseTriggerBaseProps as CloseTriggerBaseProps, type ToastCloseTriggerProps as CloseTriggerProps, } from './toast-close-trigger.svelte';
+export { default as Context, type ToastContextProps as ContextProps } from './toast-context.svelte';
+export { default as Description, type ToastDescriptionBaseProps as DescriptionBaseProps, type ToastDescriptionProps as DescriptionProps, } from './toast-description.svelte';
+export { default as Root, type ToastRootBaseProps as RootBaseProps, type ToastRootProps as RootProps, } from './toast-root.svelte';
+export { default as Title, type ToastTitleBaseProps as TitleBaseProps, type ToastTitleProps as TitleProps, } from './toast-title.svelte';

package/dist/components/toast/toast.js

@@ -0,0 +1,6 @@
+export { default as ActionTrigger, } from './toast-action-trigger.svelte';
+export { default as CloseTrigger, } from './toast-close-trigger.svelte';
+export { default as Context } from './toast-context.svelte';
+export { default as Description, } from './toast-description.svelte';
+export { default as Root, } from './toast-root.svelte';
+export { default as Title, } from './toast-title.svelte';

package/dist/components/toast/toaster-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Accessor } from '../../types.js'
+  import { normalizeProps, useMachine } from '@zag-js/svelte'
+  import * as toast from '@zag-js/toast'
+  import type { Snippet } from 'svelte'
+  import { useEnvironmentContext } from '../../providers/index.js'
+  import { ToastProvider } from './use-toast-context.js'
+
+  interface ToastItemProps {
+    value: Accessor<toast.Props<Snippet>>
+    parent: toast.GroupService
+    index: number
+    children: Snippet<[Accessor<toast.Options<Snippet>>]>
+  }
+
+  let { children, value, parent, index }: ToastItemProps = $props()
+
+  const env = useEnvironmentContext()
+
+  const machineProps = $derived.by(() => ({
+    ...value(),
+    parent,
+    index,
+    getRootNode: env().getRootNode,
+  }))
+
+  const service = useMachine(toast.machine, () => machineProps)
+  const api = $derived(toast.connect(service, normalizeProps))
+
+  ToastProvider(() => api)
+</script>
+
+{@render children(value)}

package/dist/components/toast/toaster-item.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Accessor } from '../../types.js';
+import * as toast from '@zag-js/toast';
+import type { Snippet } from 'svelte';
+interface ToastItemProps {
+    value: Accessor<toast.Props<Snippet>>;
+    parent: toast.GroupService;
+    index: number;
+    children: Snippet<[Accessor<toast.Options<Snippet>>]>;
+}
+declare const ToasterItem: import("svelte").Component<ToastItemProps, {}, "">;
+type ToasterItem = ReturnType<typeof ToasterItem>;
+export default ToasterItem;