@arobo/react 1.0.1 → 1.1.1

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { TagRemoveButton, TagRoot } from "./tag";
+export declare const Tag: (({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element;
+    RemoveButton: ({ children, className, ...restProps }: import("./tag").TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tag = {
+    Props: ComponentProps<typeof TagRoot>;
+    RootProps: ComponentProps<typeof TagRoot>;
+    RemoveButtonProps: ComponentProps<typeof TagRemoveButton>;
+};
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps } from "./tag";

package/dist/components/tag/index.js

@@ -0,0 +1,11 @@
+import { TagRoot, TagRemoveButton } from './tag.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tag = Object.assign(TagRoot, {
+  Root: TagRoot,
+  RemoveButton: TagRemoveButton
+});
+
+export { Tag, TagRemoveButton, TagRoot };

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Button as ButtonPrimitive } from "react-aria-components";
+import React from "react";
+import { Tag as TagPrimitive } from "react-aria-components";
+import { type TagVariants } from "@arobo/styles";
+interface TagRootProps extends ComponentPropsWithRef<typeof TagPrimitive>, TagVariants {
+}
+declare const TagRoot: ({ children, className, ...restProps }: TagRootProps) => import("react/jsx-runtime").JSX.Element;
+type TagRemoveButtonProps = ComponentPropsWithRef<typeof ButtonPrimitive> & {
+    children?: React.ReactNode;
+};
+declare const TagRemoveButton: ({ children, className, ...restProps }: TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps };

package/dist/components/tag/tag.js

@@ -0,0 +1,84 @@
+import { useContext, useMemo, Children, createContext } from 'react';
+import { Tag } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import '../tag-group/index.js';
+import { pickChildren } from '../../utils/children.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TagGroupContext } from '../tag-group/tag-group.js';
+import { tagVariants } from '../../packages/styles/src/components/tag/tag.styles.js';
+
+const TagContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tag Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagRoot = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    size,
+    variant
+  } = useContext(TagGroupContext);
+  const slots = useMemo(() => tagVariants({
+    size,
+    variant
+  }), [size, variant]);
+  const textValue = useMemo(() => {
+    if (typeof children === "string") {
+      return children;
+    }
+    if (typeof children === "object") {
+      return Children.toArray(children).filter(node => typeof node === "string").at(0);
+    }
+    return undefined;
+  }, [children]);
+
+  // Extract custom RemoveButton from children if present
+  const [childrenWithoutRemoveButton, removeButtonChildren] = useMemo(() => {
+    if (typeof children === "function") {
+      return [children, undefined];
+    }
+    return pickChildren(children, TagRemoveButton);
+  }, [children]);
+  return /*#__PURE__*/jsx(Tag, {
+    className: composeTwRenderProps(className, slots.base()),
+    "data-slot": "tag",
+    textValue: textValue,
+    ...restProps,
+    children: renderProps => /*#__PURE__*/jsx(TagContext, {
+      value: {
+        slots
+      },
+      children: typeof children === "function" ? children(renderProps) : /*#__PURE__*/jsxs(Fragment, {
+        children: [childrenWithoutRemoveButton, !!renderProps.allowsRemoving && (removeButtonChildren && removeButtonChildren.length > 0 ? removeButtonChildren : /*#__PURE__*/jsx(TagRemoveButton, {}))]
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tag Remove Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagRemoveButton = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    slots
+  } = useContext(TagContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.removeButton()),
+    "data-slot": "tag-remove-button",
+    slot: "remove",
+    ...restProps,
+    children: children
+  });
+};
+
+export { TagRemoveButton, TagRoot };

package/dist/components/tag-group/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { TagGroupContext, TagGroupList, TagGroupRoot } from "./tag-group";
+export declare const TagGroup: (({ children, className, size, variant, ...restProps }: import("./tag-group").TagGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, size, variant, ...restProps }: import("./tag-group").TagGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    List: <T extends object>({ children, className, ...restProps }: import("./tag-group").TagGroupListProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export type TagGroup = {
+    Props: ComponentProps<typeof TagGroupRoot>;
+    RootProps: ComponentProps<typeof TagGroupRoot>;
+    ListProps: ComponentProps<typeof TagGroupList>;
+};
+export { TagGroupRoot, TagGroupList, TagGroupContext };
+export type { TagGroupRootProps, TagGroupRootProps as TagGroupProps, TagGroupListProps, } from "./tag-group";

package/dist/components/tag-group/index.js

@@ -0,0 +1,12 @@
+import { TagGroupRoot, TagGroupList } from './tag-group.js';
+export { TagGroupContext } from './tag-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const TagGroup = Object.assign(TagGroupRoot, {
+  Root: TagGroupRoot,
+  List: TagGroupList
+});
+
+export { TagGroup, TagGroupList, TagGroupRoot };

package/dist/components/tag-group/tag-group.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { TagGroup as TagGroupPrimitive, TagList as TagListPrimitive } from "react-aria-components";
+import { tagGroupVariants, type TagVariants } from "@arobo/styles";
+type TagGroupContext = {
+    slots?: ReturnType<typeof tagGroupVariants>;
+    size?: TagVariants["size"];
+    variant?: TagVariants["variant"];
+};
+declare const TagGroupContext: React.Context<TagGroupContext>;
+type TagGroupRootProps = ComponentPropsWithRef<typeof TagGroupPrimitive> & {
+    size?: TagVariants["size"];
+    variant?: TagVariants["variant"];
+};
+declare const TagGroupRoot: ({ children, className, size, variant, ...restProps }: TagGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+type TagGroupListProps<T extends object> = ComponentPropsWithRef<typeof TagListPrimitive<T>> & {};
+declare const TagGroupList: <T extends object>({ children, className, ...restProps }: TagGroupListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { TagGroupRoot, TagGroupList, TagGroupContext };
+export type { TagGroupRootProps, TagGroupListProps };

package/dist/components/tag-group/tag-group.js

@@ -0,0 +1,58 @@
+import { useMemo, createContext, useContext } from 'react';
+import { TagGroup, TagList } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { tagGroupVariants } from '../../packages/styles/src/components/tag-group/tag-group.styles.js';
+
+const TagGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * TagGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagGroupRoot = ({
+  children,
+  className,
+  size,
+  variant,
+  ...restProps
+}) => {
+  const slots = useMemo(() => tagGroupVariants(), []);
+  return /*#__PURE__*/jsx(TagGroupContext, {
+    value: {
+      slots,
+      size,
+      variant
+    },
+    children: /*#__PURE__*/jsx(TagGroup, {
+      className: slots.base({
+        className
+      }),
+      "data-slot": "tag-group",
+      ...restProps,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * TagGroup List
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagGroupList = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    slots
+  } = useContext(TagGroupContext);
+  return /*#__PURE__*/jsx(TagList, {
+    className: composeTwRenderProps(className, slots?.list()),
+    "data-slot": "tag-group-list",
+    ...restProps,
+    children: children
+  });
+};
+
+export { TagGroupContext, TagGroupList, TagGroupRoot };

package/dist/components/text-field/index.js

@@ -1,6 +1,6 @@
 import { TextFieldRoot } from './text-field.js';
 export { TextFieldContext } from './text-field.js';
-export { textFieldVariants } from '../../styles/src/components/text-field/text-field.styles.js';
+export { textFieldVariants } from '../../packages/styles/src/components/text-field/text-field.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/text-field/text-field.js

@@ -1,8 +1,8 @@
-import React, { createContext } from 'react';
+import React__default, { createContext } from 'react';
 import { TextField } from 'react-aria-components';
 import { composeTwRenderProps } from '../../utils/compose.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { textFieldVariants } from '../../styles/src/components/text-field/text-field.styles.js';
+import { textFieldVariants } from '../../packages/styles/src/components/text-field/text-field.styles.js';
 
 const TextFieldContext = /*#__PURE__*/createContext({});
 
@@ -17,7 +17,7 @@ const TextFieldRoot = ({
   variant,
   ...props
 }) => {
-  const styles = React.useMemo(() => textFieldVariants({
+  const styles = React__default.useMemo(() => textFieldVariants({
     fullWidth
   }), [fullWidth]);
   return /*#__PURE__*/jsx(TextField, {

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { TextAreaRoot } from "./textarea";
+export declare const TextArea: (({ className, fullWidth, variant, ...rest }: import("./textarea").TextAreaRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, fullWidth, variant, ...rest }: import("./textarea").TextAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type TextArea = {
+    Props: ComponentProps<typeof TextAreaRoot>;
+    RootProps: ComponentProps<typeof TextAreaRoot>;
+};
+export { TextAreaRoot };
+export type { TextAreaRootProps, TextAreaRootProps as TextAreaProps } from "./textarea";

package/dist/components/textarea/index.js

@@ -0,0 +1,10 @@
+import { TextAreaRoot } from './textarea.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const TextArea = Object.assign(TextAreaRoot, {
+  Root: TextAreaRoot
+});
+
+export { TextArea, TextAreaRoot };

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { TextArea as TextAreaPrimitive } from "react-aria-components";
+import { type TextAreaVariants } from "@arobo/styles";
+interface TextAreaRootProps extends ComponentPropsWithRef<typeof TextAreaPrimitive>, TextAreaVariants {
+}
+declare const TextAreaRoot: ({ className, fullWidth, variant, ...rest }: TextAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+export { TextAreaRoot };
+export type { TextAreaRootProps };

package/dist/components/textarea/textarea.js

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import { TextArea } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { TextFieldContext } from '../text-field/text-field.js';
+import { textAreaVariants } from '../../packages/styles/src/components/textarea/textarea.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const TextAreaRoot = ({
+  className,
+  fullWidth,
+  variant,
+  ...rest
+}) => {
+  const textFieldContext = useContext(TextFieldContext);
+  const resolvedVariant = variant ?? textFieldContext?.variant;
+  return /*#__PURE__*/jsx(TextArea, {
+    "data-slot": "textarea",
+    className: composeTwRenderProps(className, textAreaVariants({
+      fullWidth,
+      variant: resolvedVariant
+    })),
+    ...rest
+  });
+};
+
+export { TextAreaRoot };

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

@@ -0,0 +1,3 @@
+export declare const DEFAULT_GAP = 8;
+export declare const DEFAULT_MAX_VISIBLE_TOAST = 3;
+export declare const DEFAULT_SCALE_FACTOR = 0.05;

package/dist/components/toast/constants.js

@@ -0,0 +1,8 @@
+// Default gap between toasts
+const DEFAULT_GAP = 8;
+// The default maximum number of visible toasts.
+const DEFAULT_MAX_VISIBLE_TOAST = 3;
+// The default scale factor for toasts.
+const DEFAULT_SCALE_FACTOR = 0.05;
+
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR };

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

@@ -0,0 +1,73 @@
+import type { ComponentProps } from "react";
+import { ToastActionButton, ToastCloseButton, ToastContainer, ToastContent, ToastDescription, ToastIndicator, Toast as ToastRoot, ToastTitle } from "./toast";
+import { ToastQueue, toast, toastQueue } from "./toast-queue";
+export declare const Toast: {
+    <T extends object = import("./toast-queue").ToastContentValue>({ children, className, placement, scaleFactor, toast, variant, ...rest }: import("./toast").ToastProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Container: {
+        <T extends object = import("./toast-queue").ToastContentValue>({ children, className, gap, maxVisibleToasts, placement, queue: queueProp, scaleFactor, ...rest }: import("./toast").ToastContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: ({ children, className, ...rest }: import("./toast").ToastContentProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: {
+        ({ children, className, variant, ...rest }: import("./toast").ToastIndicatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, ...rest }: import("./toast").ToastTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, className, ...rest }: import("./toast").ToastDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ActionButton: {
+        ({ children, className, ...rest }: import("./toast").ToastActionButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    CloseButton: {
+        ({ className, ...rest }: import("./toast").ToastCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Queue: typeof ToastQueue;
+    toast: {
+        (message: import("react").ReactNode, options?: import("./toast-queue").HeroUIToastOptions): string;
+        success(message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">): string;
+        danger(message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">): string;
+        info(message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">): string;
+        warning(message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">): string;
+        promise<T>(promise: Promise<T> | (() => Promise<T>), options: import("./toast-queue").ToastPromiseOptions<T>): string;
+        getQueue(): import("react-aria-components").UNSTABLE_ToastQueue<import("./toast-queue").ToastContentValue>;
+        close(key: string): void;
+        pauseAll(): void;
+        resumeAll(): void;
+        clear(): void;
+    } & {
+        success: (message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">) => string;
+        danger: (message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">) => string;
+        info: (message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">) => string;
+        warning: (message: import("react").ReactNode, options?: Omit<import("./toast-queue").HeroUIToastOptions, "variant">) => string;
+        promise: <T>(promise: Promise<T> | (() => Promise<T>), options: import("./toast-queue").ToastPromiseOptions<T>) => string;
+        getQueue: () => ReturnType<() => import("react-aria-components").UNSTABLE_ToastQueue<import("./toast-queue").ToastContentValue>>;
+        close: (key: string) => void;
+        pauseAll: () => void;
+        resumeAll: () => void;
+        clear: () => void;
+    };
+};
+export type Toast = {
+    Props: ComponentProps<typeof ToastRoot>;
+    ContainerProps: ComponentProps<typeof ToastContainer>;
+    ContentProps: ComponentProps<typeof ToastContent>;
+    IndicatorProps: ComponentProps<typeof ToastIndicator>;
+    TitleProps: ComponentProps<typeof ToastTitle>;
+    DescriptionProps: ComponentProps<typeof ToastDescription>;
+    ActionProps: ComponentProps<typeof ToastActionButton>;
+    CloseButtonProps: ComponentProps<typeof ToastCloseButton>;
+};
+export { ToastContainer, ToastContent, ToastIndicator, ToastTitle, ToastDescription, ToastActionButton, ToastCloseButton, };
+export type { ToastCloseButtonProps, ToastContainerProps, ToastContentProps, ToastDescriptionProps, ToastIndicatorProps, ToastProps, ToastTitleProps, } from "./toast";
+export { ToastQueue, toast, toastQueue };
+export { DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_GAP } from "./constants";
+export type { ToastQueueOptions, ToastContentValue } from "./toast-queue";

package/dist/components/toast/index.js

@@ -0,0 +1,21 @@
+import { Toast as Toast$1, ToastCloseButton, ToastActionButton, ToastDescription, ToastTitle, ToastIndicator, ToastContent, ToastContainer } from './toast.js';
+import { toast, ToastQueue } from './toast-queue.js';
+export { toastQueue } from './toast-queue.js';
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST } from './constants.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Toast = Object.assign(Toast$1, {
+  Container: ToastContainer,
+  Content: ToastContent,
+  Indicator: ToastIndicator,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  ActionButton: ToastActionButton,
+  CloseButton: ToastCloseButton,
+  Queue: ToastQueue,
+  toast
+});
+
+export { Toast, ToastActionButton, ToastCloseButton, ToastContainer, ToastContent, ToastDescription, ToastIndicator, ToastQueue, ToastTitle, toast };

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

@@ -0,0 +1,67 @@
+import type { ButtonProps } from "../button";
+import type { ReactNode } from "react";
+import type { ToastOptions as RACToastOptions, UNSTABLE_ToastQueue as ToastQueuePrimitiveType } from "react-aria-components";
+export interface ToastQueueOptions {
+    /** The maximum number of toasts to display at a time. */
+    maxVisibleToasts?: number;
+    /** Function to wrap updates in (i.e. document.startViewTransition()). */
+    wrapUpdate?: (fn: () => void) => void;
+}
+export declare class ToastQueue<T extends object = ToastContentValue> {
+    private queue;
+    constructor(options?: ToastQueueOptions);
+    add(content: T, options?: RACToastOptions): string;
+    close(key: string): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    clear(): void;
+    subscribe(fn: () => void): () => void;
+    get visibleToasts(): import("react-aria-components").QueuedToast<T>[];
+    getQueue(): ToastQueuePrimitiveType<T>;
+}
+export interface ToastContentValue {
+    indicator?: ReactNode | undefined;
+    title?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    variant?: "default" | "accent" | "success" | "warning" | "danger" | undefined;
+    actionProps?: ButtonProps | undefined;
+}
+export interface HeroUIToastOptions {
+    description?: ReactNode;
+    indicator?: ReactNode;
+    variant?: ToastContentValue["variant"];
+    actionProps?: ButtonProps;
+    timeout?: number;
+    onClose?: () => void;
+}
+export interface ToastPromiseOptions<T = unknown> {
+    loading: ReactNode;
+    success: ((data: T) => ReactNode) | ReactNode;
+    error: ((error: Error) => ReactNode) | ReactNode;
+}
+declare const toastQueue: ToastQueue<ToastContentValue>;
+export declare const toast: {
+    (message: ReactNode, options?: HeroUIToastOptions): string;
+    success(message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">): string;
+    danger(message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">): string;
+    info(message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">): string;
+    warning(message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">): string;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): string;
+    getQueue(): ToastQueuePrimitiveType<ToastContentValue>;
+    close(key: string): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    clear(): void;
+} & {
+    success: (message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">) => string;
+    danger: (message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">) => string;
+    info: (message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">) => string;
+    warning: (message: ReactNode, options?: Omit<HeroUIToastOptions, "variant">) => string;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>) => string;
+    getQueue: () => ReturnType<() => ToastQueuePrimitiveType<ToastContentValue>>;
+    close: (key: string) => void;
+    pauseAll: () => void;
+    resumeAll: () => void;
+    clear: () => void;
+};
+export { toastQueue };

package/dist/components/toast/toast-queue.js

@@ -0,0 +1,129 @@
+import { UNSTABLE_ToastQueue } from 'react-aria-components';
+import { flushSync } from 'react-dom';
+import { DEFAULT_MAX_VISIBLE_TOAST } from './constants.js';
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue Options
+ * --------------------------------------------------------------------------------------------- */
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue
+ * --------------------------------------------------------------------------------------------- */
+class ToastQueue {
+  constructor(options) {
+    this.queue = new UNSTABLE_ToastQueue({
+      maxVisibleToasts: options?.maxVisibleToasts,
+      wrapUpdate: options?.wrapUpdate ? options.wrapUpdate : fn => {
+        if ("startViewTransition" in document) {
+          document.startViewTransition(() => {
+            flushSync(fn);
+          });
+        } else {
+          fn();
+        }
+      }
+    });
+  }
+  add(content, options) {
+    return this.queue.add(content, options);
+  }
+  close(key) {
+    this.queue.close(key);
+  }
+  pauseAll() {
+    this.queue.pauseAll();
+  }
+  resumeAll() {
+    this.queue.resumeAll();
+  }
+  clear() {
+    this.queue.clear();
+  }
+  subscribe(fn) {
+    return this.queue.subscribe(fn);
+  }
+  get visibleToasts() {
+    return this.queue.visibleToasts;
+  }
+  getQueue() {
+    return this.queue;
+  }
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue Instance
+ * --------------------------------------------------------------------------------------------- */
+
+// Helper function to create toast
+function createToastFunction(queue) {
+  const toastFn = (message, options) => {
+    return queue.add({
+      title: message,
+      description: options?.description,
+      indicator: options?.indicator,
+      variant: options?.variant || "default",
+      actionProps: options?.actionProps
+    }, {
+      timeout: options?.timeout,
+      onClose: options?.onClose
+    });
+  };
+
+  // Variant methods
+  toastFn.success = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "success"
+    });
+  };
+  toastFn.danger = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "danger"
+    });
+  };
+  toastFn.info = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "accent"
+    });
+  };
+  toastFn.warning = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "warning"
+    });
+  };
+
+  // Promise support
+  toastFn.promise = (promise, options) => {
+    const promiseFn = typeof promise === "function" ? promise() : promise;
+    const loadingId = toastFn(options.loading, {
+      variant: "default"
+    });
+    promiseFn.then(data => {
+      const successMessage = typeof options.success === "function" ? options.success(data) : options.success;
+      queue.close(loadingId);
+      return toastFn.success(successMessage);
+    }).catch(error => {
+      const errorMessage = typeof options.error === "function" ? options.error(error) : options.error;
+      queue.close(loadingId);
+      return toastFn.danger(errorMessage);
+    });
+    return loadingId;
+  };
+
+  // Expose queue methods for advanced usage
+  toastFn.getQueue = () => queue.getQueue();
+  toastFn.close = key => queue.close(key);
+  toastFn.pauseAll = () => queue.pauseAll();
+  toastFn.resumeAll = () => queue.resumeAll();
+  toastFn.clear = () => queue.clear();
+  return toastFn;
+}
+const toastQueue = new ToastQueue({
+  maxVisibleToasts: DEFAULT_MAX_VISIBLE_TOAST
+});
+const toast = createToastFunction(toastQueue);
+
+export { ToastQueue, toast, toastQueue };