@rovula/ui 0.0.45 → 0.0.46

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

@@ -356,3 +356,11 @@ export declare const WithAction: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Custom: {
+    args: {
+        onClose: import("@storybook/addon-actions").HandlerFunction;
+    };
+    render: (args: {
+        onClose?: (() => void) | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -1,3 +1,4 @@
+import { ToastProviderProps } from "@radix-ui/react-toast";
 type ToasterProps = {
     viewportClassName?: string;
     titleClassName?: string;
@@ -6,5 +7,5 @@ type ToasterProps = {
     iconWrapperClassName?: string;
     actionWrapperClassName?: string;
 };
-export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, ...toastProviderProps }: ToasterProps & ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ type ToasterToast = ToastProps & {
     description?: React.ReactNode;
     action?: ToastActionElement;
     contentMode?: "vertical" | "horizontal";
+    onClose?: () => void;
 };
 type ToasterPosition = "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
 declare const actionTypes: {

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
+import { ToastProviderProps } from '@radix-ui/react-toast';
 import { ClassValue } from 'clsx';
 
 type ButtonProps = {
@@ -543,7 +544,7 @@ type ToasterProps = {
     iconWrapperClassName?: string;
     actionWrapperClassName?: string;
 };
-declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): react_jsx_runtime.JSX.Element;
+declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, ...toastProviderProps }: ToasterProps & ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 type ToasterToast = ToastProps & {
     id: string;
@@ -551,6 +552,7 @@ type ToasterToast = ToastProps & {
     description?: React.ReactNode;
     action?: ToastActionElement;
     contentMode?: "vertical" | "horizontal";
+    onClose?: () => void;
 };
 type ToasterPosition = "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
 declare const actionTypes: {

package/dist/src/theme/global.css

@@ -2307,6 +2307,10 @@ input[type=number] {
   margin-right: -0.5rem;
 }
 
+.-mt-\[30px\] {
+  margin-top: -30px;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -3165,6 +3169,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.border-info {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .border-info-stroke {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -3658,6 +3667,11 @@ input[type=number] {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-grey-10 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3983,6 +3997,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
 .bg-primary {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4143,6 +4162,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-secondary {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5592,6 +5616,11 @@ input[type=number] {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-grey2-500 {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .text-info {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -5626,6 +5655,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-secondary {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);

package/package.json

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

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import { Markdown } from "@storybook/blocks";
 import { Toast, ToastAction } from "./Toast";
 import { Toaster } from "./Toaster";
@@ -142,3 +143,52 @@ export const WithAction = {
     );
   },
 } satisfies StoryObj;
+
+export const Custom = {
+  args: {
+    onClose: action("Close Naja (*0_0*) "),
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    const { toast } = useToast();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Toaster
+          viewportClassName="bg-red-100 -mt-[30px]"
+          titleClassName="text-red-500"
+          descriptionClassName="text-grey2-500"
+          contentClassName="bg-pink-100"
+          iconWrapperClassName="border-info border-2"
+          actionWrapperClassName="bg-green-500"
+          duration={3000} // default timeout
+        />
+        <Button
+          onClick={() => {
+            toast({
+              title: "Uh oh! Something went wrong.",
+              description: "There was a problem with your request.",
+              action: (
+                <ToastAction
+                  altText="Try again"
+                  onClick={() => alert("My action")}
+                >
+                  Try again
+                </ToastAction>
+              ),
+              duration: 1000,
+              onClose: props.onClose,
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+      </div>
+    );
+  },
+} satisfies StoryObj<{
+  onClose?: () => void;
+}>;

package/src/components/Toast/Toaster.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Toast,
   ToastClose,
@@ -13,6 +13,7 @@ import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
 import { cn } from "@/utils/cn";
+import { ToastProviderProps } from "@radix-ui/react-toast";
 
 type ToasterProps = {
   viewportClassName?: string;
@@ -30,11 +31,12 @@ export function Toaster({
   contentClassName,
   iconWrapperClassName,
   actionWrapperClassName,
-}: ToasterProps) {
+  ...toastProviderProps
+}: ToasterProps & ToastProviderProps) {
   const { toasts, position } = useToast();
 
   return (
-    <ToastProvider>
+    <ToastProvider {...toastProviderProps}>
       {toasts.map(function ({
         id,
         title,

package/src/components/Toast/useToast.ts

@@ -13,6 +13,7 @@ type ToasterToast = ToastProps & {
   description?: React.ReactNode;
   action?: ToastActionElement;
   contentMode?: "vertical" | "horizontal";
+  onClose?: () => void;
 };
 
 type ToasterPosition =
@@ -81,7 +82,7 @@ const addToRemoveQueue = (toastId: string) => {
       type: "REMOVE_TOAST",
       toastId: toastId,
     });
-  }, TOAST_REMOVE_DELAY); // TODO
+  }, TOAST_REMOVE_DELAY);
 
   toastTimeouts.set(toastId, timeout);
 };
@@ -176,7 +177,10 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss();
+        if (!open) {
+          dismiss();
+          props?.onClose?.();
+        }
       },
     },
   });