@ark-ui/solid 0.1.0 → 0.3.0

package/dist/tags-input/tags-input-label.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputLabel = props => {
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => tagsInput().labelProps, props));
+  const api = tagsInputContext.useTagsInputContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.TagsInputLabel = TagsInputLabel;

package/dist/tags-input/tags-input-label.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputLabel = props => {
-  const tagsInput = useTagsInputContext();
-  return createComponent(ark.label, mergeProps(() => tagsInput().labelProps, props));
+  const api = useTagsInputContext();
+  const labelProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { TagsInputLabel };

package/dist/tags-input/tags-input.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -11,14 +11,17 @@ const tagsInputContext = require('./tags-input-context.cjs');
 const useTagsInput = require('./use-tags-input.cjs');
 
 const TagsInput = props => {
-  const [useTagsInputProps, divProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
-  const tagsInput = useTagsInput.useTagsInput(useTagsInputProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, tagsInput()));
+  const [tagsInputParams, restProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput.useTagsInput(tagsInputParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(tagsInputContext.TagsInputProvider, {
-    value: tagsInput,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => tagsInput().rootProps, divProps, {
-        children: view
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

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

@@ -1,9 +1,9 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
 export type TagsInputChildren = {
-    children: (pages: ReturnType<UseTagsInputReturn>) => JSX.Element | JSX.Element;
+    children: (pages: UseTagsInputReturn) => JSX.Element | JSX.Element;
 };
-export type TagsInputProps = Assign<Assign<HTMLArkProps<'div'>, UseTagsInputProps>, TagsInputChildren>;
+export type TagsInputProps = Assign<HTMLArkProps<'div'>, UseTagsInputProps & TagsInputChildren>;
 export declare const TagsInput: (props: TagsInputProps) => JSX.Element;

package/dist/tags-input/tags-input.mjs

@@ -1,5 +1,5 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
@@ -7,14 +7,17 @@ import { TagsInputProvider } from './tags-input-context.mjs';
 import { useTagsInput } from './use-tags-input.mjs';
 
 const TagsInput = props => {
-  const [useTagsInputProps, divProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
-  const tagsInput = useTagsInput(useTagsInputProps);
-  const view = () => children(() => runIfFn(divProps.children, tagsInput()));
+  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(tagsInputParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(TagsInputProvider, {
-    value: tagsInput,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => tagsInput().rootProps, divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/toast/index.d.ts

@@ -0,0 +1,8 @@
+export { Toast, type ToastProps } from './toast';
+export { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
+export { ToastDescription, type ToastDescriptionProps } from './toast-description';
+export { ToastGroup, type ToastGroupProps } from './toast-group';
+export { ToastPlacements, type ToastPlacementsProps } from './toast-placements';
+export { ToastProvider, useToast, type ToastProviderProps } from './toast-provider';
+export { ToastTitle, type ToastTitleProps } from './toast-title';
+export { toastAnatomy } from './toast.anatomy';

package/dist/toast/toast-close-trigger.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const toastItemContext = require('./toast-item-context.cjs');
+
+const ToastCloseTrigger = props => {
+  const api = toastItemContext.useToastItemContext();
+  const triggerProps = solid.mergeProps(() => api().closeTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
+};
+
+exports.ToastCloseTrigger = ToastCloseTrigger;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type ToastCloseTriggerProps = HTMLArkProps<'button'>;
+export declare const ToastCloseTrigger: (props: ToastCloseTriggerProps) => JSX.Element;

package/dist/toast/toast-close-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useToastItemContext } from './toast-item-context.mjs';
+
+const ToastCloseTrigger = props => {
+  const api = useToastItemContext();
+  const triggerProps = mergeProps(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+export { ToastCloseTrigger };

package/dist/toast/toast-description.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const toastItemContext = require('./toast-item-context.cjs');
+
+const ToastDescription = props => {
+  const api = toastItemContext.useToastItemContext();
+  const descriptionProps = solid.mergeProps(() => api().descriptionProps, props);
+  return web.createComponent(factory.ark.p, web.mergeProps(descriptionProps, {
+    get children() {
+      return api().description;
+    }
+  }));
+};
+
+exports.ToastDescription = ToastDescription;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type ToastDescriptionProps = HTMLArkProps<'p'>;
+export declare const ToastDescription: (props: ToastDescriptionProps) => JSX.Element;

package/dist/toast/toast-description.mjs

@@ -0,0 +1,16 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useToastItemContext } from './toast-item-context.mjs';
+
+const ToastDescription = props => {
+  const api = useToastItemContext();
+  const descriptionProps = mergeProps(() => api().descriptionProps, props);
+  return createComponent(ark.p, mergeProps$1(descriptionProps, {
+    get children() {
+      return api().description;
+    }
+  }));
+};
+
+export { ToastDescription };

package/dist/toast/toast-group.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const toastProvider = require('./toast-provider.cjs');
+
+const ToastGroup = props => {
+  const [childrenProps, localProps] = solidJs.splitProps(props, ['children']);
+  const [groupParams, restProps] = createSplitProps.createSplitProps()(localProps, ['placement', 'label']);
+  const toast = toastProvider.useToast();
+  const toastsByPlacement = solidJs.createMemo(() => toast().toastsByPlacement[groupParams.placement] ?? []);
+  const groupProps = solid.mergeProps(() => toast().getGroupProps(groupParams), restProps);
+  const getChildren = () => runIfFn.runIfFn(childrenProps.children, toastsByPlacement);
+  return web.createComponent(factory.ark.div, web.mergeProps(groupProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+exports.ToastGroup = ToastGroup;

package/dist/toast/toast-group.d.ts

@@ -0,0 +1,13 @@
+import { type Placement, type Service } from '@zag-js/toast';
+import { type Accessor, type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+type ToastGroupParams = {
+    placement: Placement;
+    label?: string;
+};
+export type ToastGroupProps = Assign<HTMLArkProps<'div'>, ToastGroupParams & {
+    children: JSX.Element | ((toasts: Accessor<Service[]>) => JSX.Element);
+}>;
+export declare const ToastGroup: (props: ToastGroupProps) => JSX.Element;
+export {};

package/dist/toast/toast-group.mjs

@@ -0,0 +1,23 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { splitProps, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useToast } from './toast-provider.mjs';
+
+const ToastGroup = props => {
+  const [childrenProps, localProps] = splitProps(props, ['children']);
+  const [groupParams, restProps] = createSplitProps()(localProps, ['placement', 'label']);
+  const toast = useToast();
+  const toastsByPlacement = createMemo(() => toast().toastsByPlacement[groupParams.placement] ?? []);
+  const groupProps = mergeProps(() => toast().getGroupProps(groupParams), restProps);
+  const getChildren = () => runIfFn(childrenProps.children, toastsByPlacement);
+  return createComponent(ark.div, mergeProps$1(groupProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+export { ToastGroup };

package/dist/toast/toast-item-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ToastItemProvider, useToastItemContext] = createContext.createContext({
+  hookName: "useToastItemContext",
+  providerName: "<ToastItemProvider />"
+});
+
+exports.ToastItemProvider = ToastItemProvider;
+exports.useToastItemContext = useToastItemContext;

package/dist/toast/toast-item-context.d.ts

@@ -0,0 +1,38 @@
+import type { Type, Placement } from '@zag-js/toast/dist/toast.types';
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseToastItemReturn } from './use-toast-item';
+export type ToastItemContext = UseToastItemReturn;
+export declare const ToastItemProvider: ContextProviderComponent<Accessor<{
+    type: Type;
+    title: string | undefined;
+    description: string | undefined;
+    placement: Placement;
+    isVisible: boolean;
+    isPaused: boolean;
+    isRtl: boolean;
+    pause(): void;
+    resume(): void;
+    dismiss(): void;
+    render(): any;
+    rootProps: JSX.HTMLAttributes<any>;
+    titleProps: JSX.HTMLAttributes<any>;
+    descriptionProps: JSX.HTMLAttributes<any>;
+    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>>, useToastItemContext: () => Accessor<{
+    type: Type;
+    title: string | undefined;
+    description: string | undefined;
+    placement: Placement;
+    isVisible: boolean;
+    isPaused: boolean;
+    isRtl: boolean;
+    pause(): void;
+    resume(): void;
+    dismiss(): void;
+    render(): any;
+    rootProps: JSX.HTMLAttributes<any>;
+    titleProps: JSX.HTMLAttributes<any>;
+    descriptionProps: JSX.HTMLAttributes<any>;
+    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>;

package/dist/toast/toast-item-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [ToastItemProvider, useToastItemContext] = createContext({
+  hookName: "useToastItemContext",
+  providerName: "<ToastItemProvider />"
+});
+
+export { ToastItemProvider, useToastItemContext };

package/dist/toast/toast-placements.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solidJs = require('solid-js');
+const runIfFn = require('../run-if-fn.cjs');
+const toastProvider = require('./toast-provider.cjs');
+
+const ToastPlacements = props => {
+  const toast = toastProvider.useToast();
+  const placements = solidJs.createMemo(() => Object.keys(toast().toastsByPlacement));
+  const getChildren = () => runIfFn.runIfFn(props.children, placements);
+  return web.memo(getChildren);
+};
+
+exports.ToastPlacements = ToastPlacements;

package/dist/toast/toast-placements.d.ts

@@ -0,0 +1,6 @@
+import { type Placement } from '@zag-js/toast';
+import { type Accessor, type JSX } from 'solid-js';
+export type ToastPlacementsProps = {
+    children: (placements: Accessor<Placement[]>) => JSX.Element;
+};
+export declare const ToastPlacements: (props: ToastPlacementsProps) => JSX.Element;

package/dist/toast/toast-placements.mjs

@@ -0,0 +1,13 @@
+import { memo } from 'solid-js/web';
+import { createMemo } from 'solid-js';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useToast } from './toast-provider.mjs';
+
+const ToastPlacements = props => {
+  const toast = useToast();
+  const placements = createMemo(() => Object.keys(toast().toastsByPlacement));
+  const getChildren = () => runIfFn(props.children, placements);
+  return memo(getChildren);
+};
+
+export { ToastPlacements };

package/dist/toast/toast-provider.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const toast = require('@zag-js/toast');
+const solidJs = require('solid-js');
+const createContext = require('../create-context.cjs');
+const createSplitProps = require('../create-split-props.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
+
+const [ToastContextProvider, useToast] = createContext.createContext();
+const ToastProvider = props => {
+  const [childrenProps, machineProps] = createSplitProps.createSplitProps()(props, ['children']);
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solidJs.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, machineProps);
+  const [state, send] = solid.useMachine(toast__namespace.group.machine(context));
+  const api = solidJs.createMemo(() => toast__namespace.group.connect(state, send, solid.normalizeProps));
+  return web.createComponent(ToastContextProvider, {
+    value: api,
+    get children() {
+      return childrenProps.children;
+    }
+  });
+};
+
+exports.ToastContextProvider = ToastContextProvider;
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;

package/dist/toast/toast-provider.d.ts

@@ -0,0 +1,13 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import * as toast from '@zag-js/toast';
+import { type JSX } from 'solid-js';
+import { type Optional } from '../types';
+type GroupPublicContext = Parameters<(typeof toast)['group']['machine']>[0];
+type ToastProviderParams = {
+    children: JSX.Element;
+};
+export type ToastContext = () => ReturnType<(typeof toast)['group']['connect']>;
+export type ToastProviderProps = Optional<GroupPublicContext, 'id'> & ToastProviderParams;
+export declare const ToastContextProvider: ContextProviderComponent<ToastContext>, useToast: () => ToastContext;
+export declare const ToastProvider: (props: ToastProviderProps) => JSX.Element;
+export {};

package/dist/toast/toast-provider.mjs

@@ -0,0 +1,27 @@
+import { createComponent } from 'solid-js/web';
+import { useMachine, normalizeProps } from '@zag-js/solid';
+import * as toast from '@zag-js/toast';
+import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { createContext } from '../create-context.mjs';
+import { createSplitProps } from '../create-split-props.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const [ToastContextProvider, useToast] = createContext();
+const ToastProvider = props => {
+  const [childrenProps, machineProps] = createSplitProps()(props, ['children']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps({
+    id: createUniqueId(),
+    getRootNode
+  }, machineProps);
+  const [state, send] = useMachine(toast.group.machine(context));
+  const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+  return createComponent(ToastContextProvider, {
+    value: api,
+    get children() {
+      return childrenProps.children;
+    }
+  });
+};
+
+export { ToastContextProvider, ToastProvider, useToast };

package/dist/toast/toast-title.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const toastItemContext = require('./toast-item-context.cjs');
+
+const ToastTitle = props => {
+  const toast = toastItemContext.useToastItemContext();
+  const titleProps = solid.mergeProps(() => toast().titleProps, props);
+  return web.createComponent(factory.ark.h3, web.mergeProps(titleProps, {
+    get children() {
+      return toast().title;
+    }
+  }));
+};
+
+exports.ToastTitle = ToastTitle;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type ToastTitleProps = HTMLArkProps<'h3'>;
+export declare const ToastTitle: (props: ToastTitleProps) => JSX.Element;

package/dist/toast/toast-title.mjs

@@ -0,0 +1,16 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useToastItemContext } from './toast-item-context.mjs';
+
+const ToastTitle = props => {
+  const toast = useToastItemContext();
+  const titleProps = mergeProps(() => toast().titleProps, props);
+  return createComponent(ark.h3, mergeProps$1(titleProps, {
+    get children() {
+      return toast().title;
+    }
+  }));
+};
+
+export { ToastTitle };

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

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

package/dist/toast/toast.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const toastItemContext = require('./toast-item-context.cjs');
+const useToastItem = require('./use-toast-item.cjs');
+
+const Toast = props => {
+  const [toastParams, localProps] = createSplitProps.createSplitProps()(props, ['toast']);
+  const api = useToastItem.useToastItem(toastParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(toastItemContext.ToastItemProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(factory.ark.div, rootProps);
+    }
+  });
+};
+
+exports.Toast = Toast;

package/dist/toast/toast.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseToastItemProps } from './use-toast-item';
+export type ToastProps = Assign<HTMLArkProps<'div'>, UseToastItemProps>;
+export declare const Toast: (props: ToastProps) => JSX.Element;

package/dist/toast/toast.mjs

@@ -0,0 +1,20 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { ToastItemProvider } from './toast-item-context.mjs';
+import { useToastItem } from './use-toast-item.mjs';
+
+const Toast = props => {
+  const [toastParams, localProps] = createSplitProps()(props, ['toast']);
+  const api = useToastItem(toastParams);
+  const rootProps = mergeProps(() => api().rootProps, localProps);
+  return createComponent(ToastItemProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+export { Toast };

package/dist/toast/use-toast-item.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const solid = require('@zag-js/solid');
+const toast = require('@zag-js/toast');
+const solidJs = require('solid-js');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
+
+const useToastItem = (props) => {
+  const [state, send] = solid.useActor(props.toast);
+  return solidJs.createMemo(() => toast__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useToastItem = useToastItem;

package/dist/toast/use-toast-item.d.ts

@@ -0,0 +1,23 @@
+import type { Accessor, JSX } from 'solid-js';
+import * as toast from '@zag-js/toast';
+export type UseToastItemProps = {
+    toast: toast.Service;
+};
+export type UseToastItemReturn = ReturnType<typeof useToastItem>;
+export declare const useToastItem: (props: UseToastItemProps) => Accessor<{
+    type: toast.Type;
+    title: string | undefined;
+    description: string | undefined;
+    placement: toast.Placement;
+    isVisible: boolean;
+    isPaused: boolean;
+    isRtl: boolean;
+    pause(): void;
+    resume(): void;
+    dismiss(): void;
+    render(): any;
+    rootProps: JSX.HTMLAttributes<any>;
+    titleProps: JSX.HTMLAttributes<any>;
+    descriptionProps: JSX.HTMLAttributes<any>;
+    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>;