@rovula/ui 0.0.45 → 0.0.46

package/dist/cjs/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/cjs/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/cjs/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/components/Toast/Toast.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
+import { action } from "@storybook/addon-actions";
 import { Toast, ToastAction } from "./Toast";
 import { Toaster } from "./Toaster";
 import { useToast } from "./useToast";
@@ -80,3 +81,21 @@ export const WithAction = {
                     }, children: "Show Toast" })] }));
     },
 };
+export const Custom = {
+    args: {
+        onClose: action("Close Naja (*0_0*) "),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const { toast } = useToast();
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(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 }), _jsx(Button, { onClick: () => {
+                        toast({
+                            title: "Uh oh! Something went wrong.",
+                            description: "There was a problem with your request.",
+                            action: (_jsx(ToastAction, { altText: "Try again", onClick: () => alert("My action"), children: "Try again" })),
+                            duration: 1000,
+                            onClose: props.onClose,
+                        });
+                    }, children: "Show Toast" })] }));
+    },
+};

package/dist/components/Toast/Toaster.js

@@ -16,10 +16,11 @@ import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
 import { cn } from "@/utils/cn";
-export function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }) {
+export function Toaster(_a) {
+    var { viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName } = _a, toastProviderProps = __rest(_a, ["viewportClassName", "titleClassName", "descriptionClassName", "contentClassName", "iconWrapperClassName", "actionWrapperClassName"]);
     const { toasts, position } = useToast();
-    return (_jsxs(ToastProvider, { children: [toasts.map(function (_a) {
+    return (_jsxs(ToastProvider, Object.assign({}, toastProviderProps, { children: [toasts.map(function (_a) {
                 var { id, title, description, action, contentMode = "horizontal" } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode"]);
                 return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: _jsx(Icon, { type: "heroicons", name: "check-circle", className: "size-6" }) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
-            }), _jsx(ToastViewport, { position: position, className: viewportClassName })] }));
+            }), _jsx(ToastViewport, { position: position, className: viewportClassName })] })));
 }

package/dist/components/Toast/useToast.js

@@ -37,7 +37,7 @@ const addToRemoveQueue = (toastId) => {
             type: "REMOVE_TOAST",
             toastId: toastId,
         });
-    }, TOAST_REMOVE_DELAY); // TODO
+    }, TOAST_REMOVE_DELAY);
     toastTimeouts.set(toastId, timeout);
 };
 export const reducer = (state, action) => {
@@ -89,8 +89,11 @@ function toast(_a) {
     dispatch({
         type: "ADD_TOAST",
         toast: Object.assign(Object.assign({}, props), { id, open: true, onOpenChange: (open) => {
-                if (!open)
+                var _a;
+                if (!open) {
                     dismiss();
+                    (_a = props === null || props === void 0 ? void 0 : props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+                }
             } }),
     });
     return {

package/dist/esm/bundle.css

@@ -671,6 +671,9 @@ input[type=number] {
 .-mr-2{
   margin-right: -0.5rem;
 }
+.-mt-\[30px\]{
+  margin-top: -30px;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -1333,6 +1336,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   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);
@@ -1726,6 +1733,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -1986,6 +1997,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -2114,6 +2129,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -3262,6 +3281,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);
@@ -3289,6 +3312,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   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);