@masaraxui/react 1.0.0

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

@@ -0,0 +1,70 @@
+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 (visual only). */
+    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;
+    readonly maxVisibleToasts?: number;
+    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;
+    isLoading?: boolean | undefined;
+}
+export interface MasaraxUIToastOptions {
+    description?: ReactNode;
+    indicator?: ReactNode;
+    variant?: ToastContentValue["variant"];
+    actionProps?: ButtonProps;
+    isLoading?: boolean;
+    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?: MasaraxUIToastOptions): string;
+    success(message: ReactNode, options?: Omit<MasaraxUIToastOptions, "variant">): string;
+    danger(message: ReactNode, options?: Omit<MasaraxUIToastOptions, "variant">): string;
+    info(message: ReactNode, options?: Omit<MasaraxUIToastOptions, "variant">): string;
+    warning(message: ReactNode, options?: Omit<MasaraxUIToastOptions, "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<MasaraxUIToastOptions, "variant">) => string;
+    danger: (message: ReactNode, options?: Omit<MasaraxUIToastOptions, "variant">) => string;
+    info: (message: ReactNode, options?: Omit<MasaraxUIToastOptions, "variant">) => string;
+    warning: (message: ReactNode, options?: Omit<MasaraxUIToastOptions, "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,147 @@
+"use strict";
+import { UNSTABLE_ToastQueue } from 'react-aria-components';
+import { flushSync } from 'react-dom';
+import { DEFAULT_RAC_MAX_VISIBLE_TOAST, DEFAULT_TOAST_TIMEOUT } from './constants.js';
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue Options
+ * --------------------------------------------------------------------------------------------- */
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue
+ * --------------------------------------------------------------------------------------------- */
+class ToastQueue {
+  constructor(options) {
+    this.maxVisibleToasts = options?.maxVisibleToasts;
+    this.queue = new UNSTABLE_ToastQueue({
+      maxVisibleToasts: DEFAULT_RAC_MAX_VISIBLE_TOAST,
+      wrapUpdate: options?.wrapUpdate ? options.wrapUpdate : fn => {
+        if ("startViewTransition" in document) {
+          document.startViewTransition(() => {
+            flushSync(fn);
+          });
+        } else {
+          fn();
+        }
+      }
+    });
+  }
+  add(content, options) {
+    // Apply default timeout if not provided, but respect explicit 0 (persistent toast)
+    const timeout = options?.timeout !== undefined ? options.timeout : DEFAULT_TOAST_TIMEOUT;
+    return this.queue.add(content, {
+      ...options,
+      timeout
+    });
+  }
+  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) => {
+    // Use default timeout if not provided, but respect explicit 0 (persistent toast)
+    const timeout = options?.timeout !== undefined ? options.timeout : DEFAULT_TOAST_TIMEOUT;
+    return queue.add({
+      title: message,
+      description: options?.description,
+      indicator: options?.indicator,
+      variant: options?.variant || "default",
+      actionProps: options?.actionProps,
+      isLoading: options?.isLoading
+    }, {
+      timeout,
+      onClose: () => {
+        requestAnimationFrame(() => {
+          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 = queue.add({
+      title: options.loading,
+      variant: "default",
+      isLoading: true
+    }, {
+      timeout: 0 // Don't auto-close loading toasts
+    });
+    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_RAC_MAX_VISIBLE_TOAST
+});
+const toast = createToastFunction(toastQueue);
+
+export { ToastQueue, toast, toastQueue };

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

@@ -0,0 +1,69 @@
+import type { ToastContentValue } from "./toast-queue";
+import type { ToastVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ToastProps as ToastPrimitiveProps } from "react-aria-components";
+import { Text as TextPrimitive, UNSTABLE_ToastContent as ToastContentPrimitive, UNSTABLE_ToastRegion as ToastRegionPrimitive } from "react-aria-components";
+import { Button } from "../button";
+import { CloseButton } from "../close-button";
+import { ToastQueue } from "./toast-queue";
+interface ToastProps<T extends object = ToastContentValue> extends ToastPrimitiveProps<T>, ToastVariants {
+    scaleFactor?: number;
+}
+declare const Toast: {
+    <T extends object = ToastContentValue>({ children, className, placement, scaleFactor, toast, variant, ...rest }: ToastProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastContentProps extends ComponentPropsWithRef<typeof ToastContentPrimitive> {
+}
+declare const ToastContent: ({ children, className, ...rest }: ToastContentProps) => import("react/jsx-runtime").JSX.Element;
+interface ToastIndicatorProps extends ComponentPropsWithRef<"div"> {
+    variant?: ToastVariants["variant"];
+}
+declare const ToastIndicator: {
+    ({ children, className, variant, ...rest }: ToastIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastTitleProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastTitle: {
+    ({ children, className, ...rest }: ToastTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastDescriptionProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastDescription: {
+    ({ children, className, ...rest }: ToastDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastCloseButtonProps extends ComponentPropsWithRef<typeof CloseButton> {
+}
+declare const ToastCloseButton: {
+    ({ className, ...rest }: ToastCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastActionButtonProps extends ComponentPropsWithRef<typeof Button> {
+}
+declare const ToastActionButton: {
+    ({ children, className, ...rest }: ToastActionButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ToastRegionPrimitiveProps<T extends object = ToastContentValue> = ComponentPropsWithRef<typeof ToastRegionPrimitive<T>>;
+interface ToastProviderProps<T extends object = ToastContentValue> extends Omit<ToastRegionPrimitiveProps<T>, "queue" | "children"> {
+    children?: ToastRegionPrimitiveProps<T>["children"];
+    /** The gap between toasts. @default 8 */
+    gap?: number;
+    /** The maximum number of toasts to display at a time (visual only). */
+    maxVisibleToasts?: number;
+    /** The scale factor for toasts. @default 0.05 */
+    scaleFactor?: number;
+    placement?: ToastVariants["placement"];
+    queue?: ToastQueue<T>;
+    /** The width of the toast. @default 460 */
+    width?: number | string;
+}
+declare const ToastProvider: {
+    <T extends object = ToastContentValue>({ children, className, gap, maxVisibleToasts, placement, queue: queueProp, scaleFactor, width, ...rest }: ToastProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ToastQueue, Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastTitle, };
+export type { ToastActionButtonProps, ToastCloseButtonProps, ToastContentProps, ToastDescriptionProps, ToastIndicatorProps, ToastProps, ToastProviderProps, ToastTitleProps, };

package/dist/components/toast/toast.js

@@ -0,0 +1,365 @@
+"use client";
+import { toastVariants } from '@masaraxui/styles';
+import React__default, { useContext, createContext, useRef, useEffect, useMemo, useCallback } from 'react';
+import { UNSTABLE_ToastStateContext, UNSTABLE_Toast, Text, UNSTABLE_ToastContent, UNSTABLE_ToastRegion } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { Button } from '../button/index.js';
+import { CloseButton } from '../close-button/index.js';
+import { InfoIcon, DangerIcon, WarningIcon, SuccessIcon } from '../icons.js';
+import { Spinner } from '../spinner/index.js';
+import { DEFAULT_SCALE_FACTOR, DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_TOAST_WIDTH } from './constants.js';
+import { toast } from './toast-queue.js';
+export { ToastQueue } from './toast-queue.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMeasuredHeight } from '../../hooks/use-measured-height.js';
+import { useMediaQuery } from '../../hooks/use-media-query.js';
+
+const ToastContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast
+ * --------------------------------------------------------------------------------------------- */
+
+const Toast = ({
+  children,
+  className,
+  placement,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  toast,
+  variant,
+  ...rest
+}) => {
+  const {
+    gap = DEFAULT_GAP,
+    heightsByKey,
+    maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOAST,
+    onToastHeightChange,
+    placement: contextPlacement,
+    scaleFactor: contextScaleFactor,
+    slots
+  } = useContext(ToastContext);
+  const finalPlacement = placement ?? contextPlacement;
+  const finalScaleFactor = scaleFactor ?? contextScaleFactor;
+  const state = useContext(UNSTABLE_ToastStateContext);
+  const visibleToasts = state.visibleToasts;
+  const index = visibleToasts.indexOf(toast);
+  const isFrontmost = index <= 0;
+  const isBottom = finalPlacement?.startsWith("bottom");
+  const isHidden = index >= maxVisibleToasts;
+  const toastKey = toast?.key;
+  const toastRef = useRef(null);
+  const {
+    height: toastHeight
+  } = useMeasuredHeight(toastRef);
+  useEffect(() => {
+    if (toastKey && typeof toastHeight === "number") {
+      onToastHeightChange?.(toastKey, toastHeight);
+    }
+  }, [toastKey, toastHeight, onToastHeightChange]);
+  const style = useMemo(() => {
+    const frontToastKey = visibleToasts[0]?.key;
+    const frontHeight = (frontToastKey ? heightsByKey?.[frontToastKey] : undefined) ?? toastHeight ?? 0;
+    const offset = index * gap;
+    const translateY = (isBottom ? -1 : 1) * offset;
+    const scale = 1 - index * finalScaleFactor;
+    return {
+      viewTransitionName: `toast-${String(toast.key).replace(/[^a-zA-Z0-9]/g, "-")}`,
+      translate: `0 ${translateY}px 0`,
+      scale: `${scale}`,
+      zIndex: visibleToasts.length - index,
+      tabindex: isFrontmost ? 0 : -1,
+      ...(frontHeight ? {
+        "--front-height": `${frontHeight}px`
+      } : null),
+      opacity: isHidden ? 0 : 1,
+      pointerEvents: isHidden ? "none" : "auto",
+      ...rest.style
+    };
+  }, [finalScaleFactor, gap, heightsByKey, index, isBottom, isFrontmost, isHidden, rest.style, toast?.key, toastHeight, visibleToasts]);
+  return /*#__PURE__*/jsx(UNSTABLE_Toast, {
+    ref: toastRef,
+    "aria-hidden": isHidden,
+    className: composeTwRenderProps(className, slots?.toast({
+      variant
+    })),
+    "data-frontmost": dataAttr(isFrontmost),
+    "data-hidden": dataAttr(isHidden),
+    "data-index": index,
+    "data-slot": "toast",
+    style: style,
+    toast: toast,
+    ...rest,
+    children: children
+  });
+};
+Toast.displayName = "MasaraxUI.Toast";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Content
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastContent = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastContent, {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "toast-content",
+    ...rest,
+    children: children
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Indicator
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastIndicator = ({
+  children,
+  className,
+  variant,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  const getDefaultIcon = useCallback(() => {
+    switch (variant) {
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+    }
+  }, [variant]);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "toast-indicator",
+    ...rest,
+    children: children ?? getDefaultIcon()
+  });
+};
+ToastIndicator.displayName = "MasaraxUI.ToastIndicator";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Title
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastTitle = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "toast-title",
+    slot: "title",
+    ...rest,
+    children: children
+  });
+};
+ToastTitle.displayName = "MasaraxUI.ToastTitle";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Description
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastDescription = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "toast-description",
+    slot: "description",
+    ...rest,
+    children: children
+  });
+};
+ToastDescription.displayName = "MasaraxUI.ToastDescription";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Close Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastCloseButton = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.close()),
+    "data-slot": "toast-close",
+    slot: "close",
+    ...rest
+  });
+};
+ToastCloseButton.displayName = "MasaraxUI.ToastCloseButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Action Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastActionButton = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.action?.()),
+    "data-slot": "toast-action-button",
+    ...rest,
+    children: children
+  });
+};
+ToastActionButton.displayName = "MasaraxUI.ToastActionButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Region
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastProvider = ({
+  children,
+  className,
+  gap = DEFAULT_GAP,
+  maxVisibleToasts,
+  placement = "bottom",
+  queue: queueProp,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  width = DEFAULT_TOAST_WIDTH,
+  ...rest
+}) => {
+  const slots = useMemo(() => toastVariants({
+    placement
+  }), [placement]);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const [toastHeights, setToastHeights] = React__default.useState({});
+  const toastQueue = useMemo(() => {
+    if (queueProp) {
+      // Custom toast prop provided - use it (it already has its own maxVisibleToasts limit)
+      return "getQueue" in queueProp ? queueProp.getQueue() : queueProp;
+    }
+    return toast.getQueue();
+  }, [queueProp]);
+  const resolvedMaxVisibleToasts = useMemo(() => {
+    const queueLimit = queueProp && "maxVisibleToasts" in queueProp ? queueProp.maxVisibleToasts : undefined;
+    return maxVisibleToasts ?? queueLimit ?? DEFAULT_MAX_VISIBLE_TOAST;
+  }, [maxVisibleToasts, queueProp]);
+  const handleToastHeightChange = useCallback((key, height) => {
+    setToastHeights(prev => {
+      if (prev[key] === height) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [key]: height
+      };
+    });
+  }, []);
+  const getDefaultChildren = useCallback(renderProps => {
+    const {
+      actionProps,
+      description,
+      indicator,
+      isLoading,
+      title,
+      variant
+    } = renderProps.toast.content ?? {};
+    return /*#__PURE__*/jsxs(Toast, {
+      placement: placement,
+      scaleFactor: scaleFactor,
+      toast: renderProps.toast,
+      variant: variant,
+      children: [indicator === null ? null : isLoading ? /*#__PURE__*/jsx(ToastIndicator, {
+        variant: variant,
+        children: /*#__PURE__*/jsx(Spinner, {
+          color: "current",
+          size: "sm"
+        })
+      }) : /*#__PURE__*/jsx(ToastIndicator, {
+        variant: variant,
+        children: indicator
+      }), /*#__PURE__*/jsxs(ToastContent, {
+        children: [!!title && /*#__PURE__*/jsx(ToastTitle, {
+          children: title
+        }), !!description && /*#__PURE__*/jsx(ToastDescription, {
+          children: description
+        }), isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+          ...actionProps,
+          children: actionProps.children
+        }) : null]
+      }), !isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+        ...actionProps,
+        children: actionProps.children
+      }) : null, /*#__PURE__*/jsx(ToastCloseButton, {})]
+    });
+  }, [isMobile, placement, scaleFactor]);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastRegion, {
+    className: composeTwRenderProps(className, slots?.region()),
+    "data-slot": "toast-region",
+    queue: toastQueue,
+    style: {
+      // @ts-expect-error - CSS variables
+      "--gap": `${gap}px`,
+      "--scale-factor": scaleFactor,
+      "--placement": placement,
+      "--toast-width": typeof width === "number" ? `${width}px` : width
+    },
+    ...rest,
+    children: renderProps => {
+      const content = renderProps.toast.content;
+      const renderPropsWithIsLoading = {
+        ...renderProps,
+        isLoading: content?.isLoading ?? false
+      };
+      return /*#__PURE__*/jsx(ToastContext, {
+        value: {
+          slots,
+          placement,
+          scaleFactor,
+          gap,
+          maxVisibleToasts: resolvedMaxVisibleToasts,
+          heightsByKey: toastHeights,
+          onToastHeightChange: handleToastHeightChange,
+          width
+        },
+        children: typeof children === "undefined" ? getDefaultChildren(renderProps) : typeof children === "function" ? children(renderPropsWithIsLoading) : children
+      });
+    }
+  });
+};
+ToastProvider.displayName = "MasaraxUI.ToastProvider";
+
+export { Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastTitle };

package/dist/components/toggle-button/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { ToggleButtonRoot } from "./toggle-button";
+export declare const ToggleButton: (({ children, className, isIconOnly, size, style, variant, ...rest }: import("./toggle-button").ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, isIconOnly, size, style, variant, ...rest }: import("./toggle-button").ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ToggleButton = {
+    Props: ComponentProps<typeof ToggleButtonRoot>;
+    RootProps: ComponentProps<typeof ToggleButtonRoot>;
+};
+export { ToggleButtonRoot };
+export type { ToggleButtonRootProps, ToggleButtonRootProps as ToggleButtonProps, } from "./toggle-button";
+export { toggleButtonVariants } from "@masaraxui/styles";
+export type { ToggleButtonVariants } from "@masaraxui/styles";

package/dist/components/toggle-button/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { ToggleButtonRoot } from './toggle-button.js';
+export { toggleButtonVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Root: ToggleButtonRoot
+});
+
+export { ToggleButton, ToggleButtonRoot };

package/dist/components/toggle-button/toggle-button.d.ts

@@ -0,0 +1,8 @@
+import type { ToggleButtonVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { ToggleButton as ToggleButtonPrimitive } from "react-aria-components";
+interface ToggleButtonRootProps extends ComponentPropsWithRef<typeof ToggleButtonPrimitive>, ToggleButtonVariants {
+}
+declare const ToggleButtonRoot: ({ children, className, isIconOnly, size, style, variant, ...rest }: ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleButtonRoot };
+export type { ToggleButtonRootProps };