@0xsquid/ui 0.8.0 → 0.8.1

package/dist/cjs/index.js

@@ -3283,16 +3283,27 @@ function DropdownMenu({ dropdownRef, items, className, }) {
     return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children, className, onBackdropClick }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+    const [isOpen, setIsOpen] = react.useState(_isOpen);
+    react.useEffect(() => {
+        if (_isOpen)
+            return setIsOpen(true);
+        const timeoutId = setTimeout(() => {
+            setIsOpen(false);
+        }, 300);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [_isOpen]);
     return (
     // modal container (backdrop)
-    jsxRuntime.jsx("div", { onClick: onBackdropClick
+    isOpen && (jsxRuntime.jsx("div", { onClick: onBackdropClick
             ? (event) => {
                 if (event.target === event.currentTarget) {
                     onBackdropClick();
                 }
             }
-            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {

package/dist/cjs/types/components/layout/Modal.d.ts

@@ -3,6 +3,7 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -3281,16 +3281,27 @@ function DropdownMenu({ dropdownRef, items, className, }) {
     return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children, className, onBackdropClick }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+    const [isOpen, setIsOpen] = useState(_isOpen);
+    useEffect(() => {
+        if (_isOpen)
+            return setIsOpen(true);
+        const timeoutId = setTimeout(() => {
+            setIsOpen(false);
+        }, 300);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [_isOpen]);
     return (
     // modal container (backdrop)
-    jsx("div", { onClick: onBackdropClick
+    isOpen && (jsx("div", { onClick: onBackdropClick
             ? (event) => {
                 if (event.target === event.currentTarget) {
                     onBackdropClick();
                 }
             }
-            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {

package/dist/esm/types/components/layout/Modal.d.ts

@@ -3,6 +3,7 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.css

@@ -928,10 +928,6 @@ video {
   height: 55px;
 }
 
-.tw-h-\[600px\] {
-  height: 600px;
-}
-
 .tw-h-\[60px\] {
   height: 60px;
 }
@@ -1008,6 +1004,10 @@ video {
   max-height: 570px;
 }
 
+.tw-max-h-\[600px\] {
+  max-height: 600px;
+}
+
 .tw-max-h-\[60px\] {
   max-height: 60px;
 }
@@ -1351,6 +1351,42 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes tw-blur-in {
+  0% {
+    -webkit-backdrop-filter: blur(0px) saturate(0%);
+            backdrop-filter: blur(0px) saturate(0%);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+            backdrop-filter: blur(20px) saturate(150%);
+    opacity: 1;
+  }
+}
+
+.tw-animate-blur-in {
+  animation: tw-blur-in 0.2s ease-out both;
+}
+
+@keyframes tw-blur-out {
+  0% {
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+            backdrop-filter: blur(20px) saturate(150%);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-backdrop-filter: blur(0px) saturate(0%);
+            backdrop-filter: blur(0px) saturate(0%);
+    opacity: 0;
+  }
+}
+
+.tw-animate-blur-out {
+  animation: tw-blur-out 0.2s ease-out both;
+}
+
 @keyframes tw-fade-in {
   0% {
     opacity: 0;

package/dist/index.d.ts

@@ -283,8 +283,9 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-declare function Modal({ children, className, onBackdropClick }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     title?: string;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": "",
   "license": "MIT",
   "scripts": {