@rovula/ui 0.0.40 → 0.0.41

package/dist/esm/types/components/Toast/Toaster.d.ts

@@ -1 +1,10 @@
-export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
+type ToasterProps = {
+    viewportClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    contentClassName?: string;
+    iconWrapperClassName?: string;
+    actionWrapperClassName?: string;
+};
+export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -530,7 +530,15 @@ declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimit
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast$1>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
-declare function Toaster(): react_jsx_runtime.JSX.Element;
+type ToasterProps = {
+    viewportClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    contentClassName?: string;
+    iconWrapperClassName?: string;
+    actionWrapperClassName?: string;
+};
+declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): react_jsx_runtime.JSX.Element;
 
 type ToasterToast = ToastProps & {
     id: string;

package/dist/src/theme/global.css

@@ -8485,10 +8485,6 @@ body {
   .md\:right-\[40px\] {
     right: 40px;
   }
-
-  .md\:w-auto {
-    width: auto;
-  }
 }
 
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Toast/Toast.styles.tsx

@@ -24,7 +24,7 @@ export const toastVariants = cva(
 );
 
 export const toastViewportVariants = cva(
-  ["fixed z-[100] flex w-full md:w-auto flex-col-reverse px-4"],
+  ["fixed z-[100] flex w-auto flex-col-reverse px-4"],
   {
     variants: {
       position: {

package/src/components/Toast/Toaster.tsx

@@ -12,8 +12,25 @@ import {
 import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
+import { cn } from "@/utils/cn";
 
-export function Toaster() {
+type ToasterProps = {
+  viewportClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  contentClassName?: string;
+  iconWrapperClassName?: string;
+  actionWrapperClassName?: string;
+};
+
+export function Toaster({
+  viewportClassName,
+  titleClassName,
+  descriptionClassName,
+  contentClassName,
+  iconWrapperClassName,
+  actionWrapperClassName,
+}: ToasterProps) {
   const { toasts, position } = useToast();
 
   return (
@@ -23,28 +40,47 @@ export function Toaster() {
         title,
         description,
         action,
-        contentMode,
+        contentMode = "horizontal",
         ...props
       }) {
         return (
           <Toast key={id} {...props}>
-            <div className={toastIconVariants({ variant: props.variant })}>
+            <div
+              className={cn(
+                toastIconVariants({ variant: props.variant }),
+                iconWrapperClassName
+              )}
+            >
               <Icon type="heroicons" name="check-circle" className="size-6" />
             </div>
-            <div className={toastContentVariants({ contentMode })}>
-              {title && <ToastTitle>{title}</ToastTitle>}
+            <div
+              className={cn(
+                toastContentVariants({ contentMode }),
+                contentClassName
+              )}
+            >
+              {title && (
+                <ToastTitle className={titleClassName}>{title}</ToastTitle>
+              )}
               {description && (
-                <ToastDescription>{description}</ToastDescription>
+                <ToastDescription className={descriptionClassName}>
+                  {description}
+                </ToastDescription>
               )}
             </div>
-            <div className="self-center ml-[var(--spacing-spacing-xl)]">
+            <div
+              className={cn(
+                "self-center ml-[var(--spacing-spacing-xl)]",
+                actionWrapperClassName
+              )}
+            >
               {action}
             </div>
             <ToastClose />
           </Toast>
         );
       })}
-      <ToastViewport position={position} />
+      <ToastViewport position={position} className={viewportClassName} />
     </ToastProvider>
   );
 }