@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/tags-input/tags-input-item-input.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useTagsInputContext } from './tags-input-context.mjs';
+import { useTagsInputItemContext } from './tags-input-item-context.mjs';
+
+const TagsInputItemInput = forwardRef(
+  (props, ref) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(api.getItemInputProps(itemProps), props);
+    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  }
+);
+TagsInputItemInput.displayName = "TagsInputItemInput";
+
+export { TagsInputItemInput };

package/tags-input/tags-input-item-text.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const tagsInputContext = require('./tags-input-context.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+
+const TagsInputItemText = react.forwardRef(
+  (props, ref) => {
+    const api = tagsInputContext.useTagsInputContext();
+    const itemProps = tagsInputItemContext.useTagsInputItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemTextProps(itemProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+  }
+);
+TagsInputItemText.displayName = "TagsInputItemText";
+
+exports.TagsInputItemText = TagsInputItemText;

package/tags-input/tags-input-item-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface TagsInputItemTextProps extends HTMLArkProps<'span'> {
+}
+export declare const TagsInputItemText: ForwardRefExoticComponent<TagsInputItemTextProps & RefAttributes<HTMLSpanElement>>;

package/tags-input/tags-input-item-text.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useTagsInputContext } from './tags-input-context.mjs';
+import { useTagsInputItemContext } from './tags-input-item-context.mjs';
+
+const TagsInputItemText = forwardRef(
+  (props, ref) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(api.getItemTextProps(itemProps), props);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+);
+TagsInputItemText.displayName = "TagsInputItemText";
+
+export { TagsInputItemText };

package/tags-input/tags-input-item.cjs

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const tagsInputContext = require('./tags-input-context.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+
+const TagsInputItem = react.forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "index",
+    "disabled",
+    "value"
+  ]);
+  const api = tagsInputContext.useTagsInputContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(tagsInputItemContext.TagsInputItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+TagsInputItem.displayName = "TagsInputItem";
+
+exports.TagsInputItem = TagsInputItem;

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

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps, ItemState } from '@zag-js/tags-input';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+export interface TagsInputItemProps extends ItemProps, Assign<HTMLArkProps<'div'>, {
+    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+}> {
+}
+export declare const TagsInputItem: ForwardRefExoticComponent<TagsInputItemProps & RefAttributes<HTMLDivElement>>;

package/tags-input/tags-input-item.mjs

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useTagsInputContext } from './tags-input-context.mjs';
+import { TagsInputItemProvider } from './tags-input-item-context.mjs';
+
+const TagsInputItem = forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, [
+    "index",
+    "disabled",
+    "value"
+  ]);
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(TagsInputItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+TagsInputItem.displayName = "TagsInputItem";
+
+export { TagsInputItem };

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

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = tagsInputContext.useTagsInputContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = tagsInputContext.useTagsInputContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 TagsInputLabel.displayName = "TagsInputLabel";

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type TagsInputLabelProps = HTMLArkProps<'label'>;
-export declare const TagsInputLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export interface TagsInputLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const TagsInputLabel: ForwardRefExoticComponent<TagsInputLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputLabel = forwardRef((props, ref) => {
-  const { labelProps } = useTagsInputContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 TagsInputLabel.displayName = "TagsInputLabel";

package/tags-input/tags-input.cjs

@@ -34,12 +34,12 @@ const TagsInput = react.forwardRef((props, ref) => {
       "max",
       "maxLength",
       "name",
-      "onChange",
-      "onFocusChange",
       "onFocusOutside",
+      "onHighlightChange",
       "onInteractOutside",
-      "onInvalid",
       "onPointerDownOutside",
+      "onValueChange",
+      "onValueInvalid",
       "readOnly",
       "translations",
       "validate",

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

@@ -1,10 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-import { type UseTagsInputProps } from './use-tags-input';
-export type TagsInputProps = Assign<Assign<HTMLArkProps<'input'>, UseTagsInputProps>, {
-    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
-}>;
-export declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
-    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
-} & RefAttributes<HTMLInputElement>>;
+import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
+export interface TagsInputProps extends Assign<Assign<HTMLArkProps<'input'>, UseTagsInputProps>, {
+    children?: ReactNode | ((pages: UseTagsInputReturn) => ReactNode);
+}> {
+}
+export declare const TagsInput: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>>;

package/tags-input/tags-input.mjs

@@ -30,12 +30,12 @@ const TagsInput = forwardRef((props, ref) => {
       "max",
       "maxLength",
       "name",
-      "onChange",
-      "onFocusChange",
       "onFocusOutside",
+      "onHighlightChange",
       "onInteractOutside",
-      "onInvalid",
       "onPointerDownOutside",
+      "onValueChange",
+      "onValueInvalid",
       "readOnly",
       "translations",
       "validate",

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

@@ -5,4 +5,4 @@ type TagsInputType = typeof TagsInput;
 declare const meta: Meta<TagsInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const WithDefaultValue: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;

package/tags-input/use-tags-input.cjs

@@ -7,6 +7,7 @@ const react$1 = require('@zag-js/react');
 const tagsInput = require('@zag-js/tags-input');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,18 @@ function _interopNamespaceDefault(e) {
 const tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput);
 
 const useTagsInput = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
-    value: props.value ?? props.defaultValue
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onValueInvalid: useEvent.useEvent(props.onValueInvalid),
+    onHighlightChange: useEvent.useEvent(props.onHighlightChange)
   };
   const [state, send] = react$1.useMachine(tagsInput__namespace.machine(initialContext), { context });
   return tagsInput__namespace.connect(state, send, react$1.normalizeProps);

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

@@ -1,7 +1,12 @@
+import { type PropTypes } from '@zag-js/react';
 import * as tagsInput from '@zag-js/tags-input';
 import { type Optional } from '../types';
 export interface UseTagsInputProps extends Optional<tagsInput.Context, 'id'> {
+    /**
+     * The initial value of the tags input.
+     */
     defaultValue?: tagsInput.Context['value'];
 }
-export type UseTagsInputReturn = tagsInput.Api;
+export interface UseTagsInputReturn extends tagsInput.Api<PropTypes> {
+}
 export declare const useTagsInput: (props: UseTagsInputProps) => UseTagsInputReturn;

package/tags-input/use-tags-input.mjs

@@ -3,19 +3,22 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as tagsInput from '@zag-js/tags-input';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useTagsInput = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
-    value: props.value ?? props.defaultValue
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onValueInvalid: useEvent(props.onValueInvalid),
+    onHighlightChange: useEvent(props.onHighlightChange)
   };
   const [state, send] = useMachine(tagsInput.machine(initialContext), { context });
   return tagsInput.connect(state, send, normalizeProps);

package/toast/create-toaster.cjs

@@ -0,0 +1,59 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const toast = require('@zag-js/toast');
+const react$1 = require('react');
+require('../environment/index.cjs');
+const factory = require('../factory.cjs');
+const toastContext = require('./toast-context.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 createToaster = (props) => {
+  const { placement, ...rest } = props;
+  const service = toast__namespace.group.machine({ id: "1", placement, ...rest }).start();
+  let api = toast__namespace.group.connect(service.getState(), service.send, react.normalizeProps);
+  const Toaster = react$1.forwardRef((props2, ref) => {
+    const getRootNode = environmentContext.useEnvironmentContext();
+    const [state, send] = react.useActor(service);
+    api = toast__namespace.group.connect(state, send, react.normalizeProps);
+    react$1.useEffect(() => {
+      service.setContext({ getRootNode });
+      return () => void service.stop();
+    }, []);
+    const mergedProps = react.mergeProps(api.getGroupProps({ placement }), props2);
+    const toasts = api.toastsByPlacement[placement] ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+  });
+  Toaster.displayName = "ToastGroup";
+  return [Toaster, api];
+};
+const ToastProviderFactory = (props) => {
+  const [state, send] = react.useActor(props.service);
+  const api = toast__namespace.connect(state, send, react.normalizeProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(toastContext.ToastProvider, { value: api, children: state.context.render?.(api) });
+};
+
+exports.createToaster = createToaster;

package/toast/create-toaster.d.ts

@@ -0,0 +1,12 @@
+import { type PropTypes } from '@zag-js/react';
+import * as toast from '@zag-js/toast';
+import React from 'react';
+import type { Optional } from '../types';
+type GroupContext = Partial<toast.GroupMachineContext>;
+export interface CreateToasterProps extends Omit<Optional<GroupContext, 'id'>, 'render'> {
+    placement: toast.Placement;
+    render: (api: toast.Api<PropTypes>) => JSX.Element;
+}
+export type CreateToasterReturn = [React.ElementType, toast.GroupApi<PropTypes>];
+export declare const createToaster: (props: CreateToasterProps) => CreateToasterReturn;
+export {};

package/toast/create-toaster.mjs

@@ -0,0 +1,36 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { normalizeProps, useActor, mergeProps } from '@zag-js/react';
+import * as toast from '@zag-js/toast';
+import { forwardRef, useEffect } from 'react';
+import '../environment/index.mjs';
+import { ark } from '../factory.mjs';
+import { ToastProvider } from './toast-context.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const createToaster = (props) => {
+  const { placement, ...rest } = props;
+  const service = toast.group.machine({ id: "1", placement, ...rest }).start();
+  let api = toast.group.connect(service.getState(), service.send, normalizeProps);
+  const Toaster = forwardRef((props2, ref) => {
+    const getRootNode = useEnvironmentContext();
+    const [state, send] = useActor(service);
+    api = toast.group.connect(state, send, normalizeProps);
+    useEffect(() => {
+      service.setContext({ getRootNode });
+      return () => void service.stop();
+    }, []);
+    const mergedProps = mergeProps(api.getGroupProps({ placement }), props2);
+    const toasts = api.toastsByPlacement[placement] ?? [];
+    return /* @__PURE__ */ jsx(ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+  });
+  Toaster.displayName = "ToastGroup";
+  return [Toaster, api];
+};
+const ToastProviderFactory = (props) => {
+  const [state, send] = useActor(props.service);
+  const api = toast.connect(state, send, normalizeProps);
+  return /* @__PURE__ */ jsx(ToastProvider, { value: api, children: state.context.render?.(api) });
+};
+
+export { createToaster };

package/toast/index.cjs

@@ -3,37 +3,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const createToaster = require('./create-toaster.cjs');
 const toast = require('./toast.cjs');
 const toastCloseTrigger = require('./toast-close-trigger.cjs');
 const toastDescription = require('./toast-description.cjs');
-const toastGroup = require('./toast-group.cjs');
-const toastItemContext = require('./toast-item-context.cjs');
-const toastPlacements = require('./toast-placements.cjs');
-const toastProvider = require('./toast-provider.cjs');
 const toastTitle = require('./toast-title.cjs');
-const toast$1 = require('@zag-js/toast');
 
 const Toast = Object.assign(toast.Toast, {
-  Provider: toastProvider.ToastProvider,
-  Title: toastTitle.ToastTitle,
   Root: toast.Toast,
+  Title: toastTitle.ToastTitle,
   Description: toastDescription.ToastDescription,
-  CloseTrigger: toastCloseTrigger.ToastCloseTrigger,
-  Placements: toastPlacements.ToastPlacements,
-  Group: toastGroup.ToastGroup
+  CloseTrigger: toastCloseTrigger.ToastCloseTrigger
 });
 
-exports.ToastRoot = toast.Toast;
+exports.createToaster = createToaster.createToaster;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;
 exports.ToastDescription = toastDescription.ToastDescription;
-exports.ToastGroup = toastGroup.ToastGroup;
-exports.useToastItemContext = toastItemContext.useToastItemContext;
-exports.ToastPlacements = toastPlacements.ToastPlacements;
-exports.ToastProvider = toastProvider.ToastProvider;
-exports.useToast = toastProvider.useToast;
 exports.ToastTitle = toastTitle.ToastTitle;
-Object.defineProperty(exports, 'toastAnatomy', {
-  enumerable: true,
-  get: () => toast$1.anatomy
-});
 exports.Toast = Toast;

package/toast/index.d.ts

@@ -1,35 +1,15 @@
-import { Placement, Service } from '@zag-js/toast';
-import { JSX } from 'react/jsx-runtime';
-import { UseToastItemProps } from './use-toast-item';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { Toast as ToastRoot, type ToastProps } from './toast';
+import { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
+import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
-import { ToastGroup, type ToastGroupProps } from './toast-group';
-import { useToastItemContext, type ToastItemContext } from './toast-item-context';
-import { ToastPlacements, type ToastPlacementsProps } from './toast-placements';
-import { ToastProvider, useToast, type ToastProviderProps } from './toast-provider';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
-import { toastAnatomy } from './toast.anatomy';
-declare const Toast: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>> & {
-    Provider: (props: ToastProviderProps) => JSX.Element;
-    Title: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLHeadingElement>>;
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLParagraphElement>>;
-    CloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Placements: (props: ToastPlacementsProps) => JSX.Element;
-    Group: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | "placement"> & {
-        placement: Placement;
-        children?: ReactNode | ((toasts: Service[]) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
+declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>> & {
+    Root: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>>;
+    Title: ForwardRefExoticComponent<ToastTitleProps & RefAttributes<HTMLDivElement>>;
+    Description: ForwardRefExoticComponent<ToastDescriptionProps & RefAttributes<HTMLDivElement>>;
+    CloseTrigger: ForwardRefExoticComponent<ToastCloseTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastPlacements, ToastProvider, ToastRoot, ToastTitle, toastAnatomy, useToast, useToastItemContext, };
-export type { ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastItemContext, ToastPlacementsProps, ToastProps, ToastProviderProps, ToastTitleProps, };
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastProps, ToastTitleProps, };

package/toast/index.mjs

@@ -1,23 +1,15 @@
 'use client';
+export { createToaster } from './create-toaster.mjs';
 import { Toast as Toast$1 } from './toast.mjs';
 import { ToastCloseTrigger } from './toast-close-trigger.mjs';
 import { ToastDescription } from './toast-description.mjs';
-import { ToastGroup } from './toast-group.mjs';
-export { useToastItemContext } from './toast-item-context.mjs';
-import { ToastPlacements } from './toast-placements.mjs';
-import { ToastProvider } from './toast-provider.mjs';
-export { useToast } from './toast-provider.mjs';
 import { ToastTitle } from './toast-title.mjs';
-export { anatomy as toastAnatomy } from '@zag-js/toast';
 
 const Toast = Object.assign(Toast$1, {
-  Provider: ToastProvider,
-  Title: ToastTitle,
   Root: Toast$1,
+  Title: ToastTitle,
   Description: ToastDescription,
-  CloseTrigger: ToastCloseTrigger,
-  Placements: ToastPlacements,
-  Group: ToastGroup
+  CloseTrigger: ToastCloseTrigger
 });
 
-export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastPlacements, ToastProvider, Toast$1 as ToastRoot, ToastTitle };
+export { Toast, ToastCloseTrigger, ToastDescription, ToastTitle };

package/toast/toast-close-trigger.cjs

@@ -7,12 +7,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const toastItemContext = require('./toast-item-context.cjs');
+const toastContext = require('./toast-context.cjs');
 
 const ToastCloseTrigger = react.forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = toastItemContext.useToastItemContext();
-    const mergedProps = react$1.mergeProps(closeTriggerProps, props);
+    const api = toastContext.useToastContext();
+    const mergedProps = react$1.mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ToastCloseTriggerProps = HTMLArkProps<'button'>;
-export declare const ToastCloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface ToastCloseTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ToastCloseTrigger: ForwardRefExoticComponent<ToastCloseTriggerProps & RefAttributes<HTMLButtonElement>>;

package/toast/toast-close-trigger.mjs

@@ -3,12 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { useToastItemContext } from './toast-item-context.mjs';
+import { useToastContext } from './toast-context.mjs';
 
 const ToastCloseTrigger = forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = useToastItemContext();
-    const mergedProps = mergeProps(closeTriggerProps, props);
+    const api = useToastContext();
+    const mergedProps = mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/toast/toast-context.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('@zag-js/toast');
+const createContext = require('../create-context.cjs');
+
+const [ToastProvider, useToastContext] = createContext.createContext({
+  name: "ToastContext",
+  hookName: "useToastContext",
+  providerName: "<ToastProvider />"
+});
+
+exports.ToastProvider = ToastProvider;
+exports.useToastContext = useToastContext;

package/toast/toast-context.d.ts

@@ -0,0 +1,7 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { PropTypes } from '@zag-js/react';
+import * as toast from '@zag-js/toast';
+export interface ToastContext extends toast.Api<PropTypes> {
+}
+export declare const ToastProvider: Provider<ToastContext>, useToastContext: () => ToastContext;

package/toast/toast-context.mjs

@@ -0,0 +1,11 @@
+'use client';
+import '@zag-js/toast';
+import { createContext } from '../create-context.mjs';
+
+const [ToastProvider, useToastContext] = createContext({
+  name: "ToastContext",
+  hookName: "useToastContext",
+  providerName: "<ToastProvider />"
+});
+
+export { ToastProvider, useToastContext };