@soul-refiner/design-system 0.2.81 → 0.2.83

package/dist/components/feedback/animated_toast/animated_toast.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToastTypes } from '../toast/toast';
+export interface AnimatedToastProps {
+    message: string;
+    onClose: () => void;
+    type: ToastTypes;
+}
+export declare const AnimatedToast: ({ message, type, onClose, }: AnimatedToastProps) => React.JSX.Element;

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Toast } from '../toast';
+export const AnimatedToast = ({ message, type, onClose, }) => {
+    const [dismissed, setDismissed] = React.useState(false);
+    const handleDismiss = () => {
+        setDismissed(true);
+    };
+    return (React.createElement(Wrapper, null,
+        React.createElement(Container, null,
+            React.createElement(Toast, { content: message, type: type, onClose: onClose, handleDismiss: handleDismiss }))));
+};
+const Wrapper = styled.div `
+  display: flex;
+  row-gap: 12px;
+  position: fixed;
+  z-index: 9999;
+  bottom: 16px;
+  right: 16px;
+`;
+const Container = styled.div `
+  animation: slide-in 0.4s ease-in-out forwards;
+
+  .toast-dismissed {
+    animation: slide-out 0.4s ease-in-out forwards;
+  }
+
+  @keyframes slide-out {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+`;

package/dist/components/feedback/animated_toast/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedToast } from './animated_toast';
+export type { AnimatedToastProps } from './animated_toast';

package/dist/components/feedback/animated_toast/index.js

@@ -0,0 +1 @@
+export { AnimatedToast } from './animated_toast';

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

@@ -12,3 +12,5 @@ export { Toast } from './toast';
 export type { ToastProps } from './toast';
 export { Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
+export { AnimatedToast } from './animated_toast';
+export type { AnimatedToastProps } from './animated_toast';

package/dist/components/feedback/index.js

@@ -5,3 +5,4 @@ export { Notification } from './notification';
 export { Progress } from './progress';
 export { Toast } from './toast';
 export { Tooltip } from './tooltip';
+export { AnimatedToast } from './animated_toast';

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

@@ -1,10 +1,10 @@
 import React from 'react';
-type ToastTypes = 'error' | 'info' | 'success' | 'warning';
+export type ToastTypes = 'error' | 'info' | 'success' | 'warning';
 export interface ToastProps {
     content: string;
     href?: string;
     onClose: () => void;
     type: ToastTypes;
+    handleDismiss?: () => void;
 }
-export declare const Toast: ({ content, href, onClose, type }: ToastProps) => React.JSX.Element;
-export {};
+export declare const Toast: ({ content, href, onClose, type, handleDismiss, }: ToastProps) => React.JSX.Element;

package/dist/components/feedback/toast/toast.js

@@ -4,23 +4,63 @@ import styled from 'styled-components';
 import { Styles } from '../../../common';
 import { Button, P } from '../../';
 import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Toast = ({ content, href, onClose, type }) => {
+export const Toast = ({ content, href, onClose, type, handleDismiss, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),
         info: React.createElement(Information, { size: 24 }),
         success: React.createElement(AlertCircle, { size: 24 }),
         warning: React.createElement(AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type },
         iconLookup[type],
         React.createElement(P, { as: "span" }, content),
         href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
-        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })));
+        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: () => {
+                !!handleDismiss && handleDismiss();
+                onClose();
+            }, type: "special" }),
+        !!handleDismiss && (React.createElement(ToastProgress, null,
+            React.createElement("div", { className: `toast-progress-bar ${type}` })))));
 };
+const ToastProgress = styled.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+
+  .toast-progress-bar {
+    height: 100%;
+    animation: progress-bar 4s linear forwards;
+  }
+
+  .toast-progress-bar.success {
+    background-color: var(--color-green-3);
+  }
+
+  .toast-progress-bar.info {
+    background-color: var(--color-blue-4);
+  }
+
+  .toast-progress-bar.warning {
+    background-color: var(--color-orange-5);
+  }
+
+  .toast-progress-bar.error {
+    background-color: var(--color-red-4);
+  }
+
+  @keyframes progress-bar {
+    0% {
+      width: 100%;
+    }
+    100% {
+      width: 0%;
+    }
+  }
+`;
 const Wrapper = styled.output `
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
   width: 99vw;
   max-width: 476px;
   box-sizing: border-box;
@@ -29,22 +69,6 @@ const Wrapper = styled.output `
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
 
-  &::before {
-    position: absolute;
-    content: '';
-    left: 0px;
-    width: 4px;
-    height: 100%;
-    background-color: ${({ $type }) => $type === 'error'
-    ? 'var(--color-red-4)'
-    : $type === 'info'
-        ? 'var(--color-blue-4)'
-        : $type === 'success'
-            ? 'var(--color-green-3)'
-            : 'var(--color-orange-5)'};
-    border-radius: 8px 0px 0px 8px;
-  }
-
   & > svg {
     fill: ${({ $type }) => $type === 'error'
     ? 'var(--color-red-4)'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.81",
+  "version": "0.2.83",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {