@memelabui/ui 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -342,7 +342,7 @@ var sizeClass3 = {
   lg: "p-2.5 w-11 h-11"
 };
 var variantClass2 = {
-  primary: "bg-primary text-white shadow-glow hover:brightness-[0.98]",
+  primary: "bg-primary text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02]",
   success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
   warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
   danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
@@ -2045,6 +2045,7 @@ var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", pad
     }
   );
 });
+var EXIT_DURATION = 200;
 function Modal({
   isOpen,
   onClose,
@@ -2060,6 +2061,23 @@ function Modal({
 }) {
   const dialogRef = React.useRef(null);
   const lastActiveElementRef = React.useRef(null);
+  const [mounted, setMounted] = React.useState(false);
+  const [closing, setClosing] = React.useState(false);
+  const closingTimerRef = React.useRef();
+  React.useEffect(() => {
+    if (isOpen) {
+      setClosing(false);
+      setMounted(true);
+      clearTimeout(closingTimerRef.current);
+    } else if (mounted) {
+      setClosing(true);
+      closingTimerRef.current = setTimeout(() => {
+        setMounted(false);
+        setClosing(false);
+      }, EXIT_DURATION);
+    }
+    return () => clearTimeout(closingTimerRef.current);
+  }, [isOpen]);
   React.useEffect(() => {
     if (!isOpen) return;
     lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2076,20 +2094,28 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useScrollLock(isOpen);
-  if (!isOpen) return null;
+  useScrollLock(mounted);
+  const handleClose = React.useCallback(() => {
+    if (closing) return;
+    onClose();
+  }, [closing, onClose]);
+  if (!mounted) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-closing": closing || void 0,
       className: cn(
-        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm animate-modal-backdrop",
+        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm",
         zIndexClassName,
         overlayClassName
       ),
+      style: {
+        animation: closing ? `ml-modal-backdrop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-backdrop 200ms ease forwards"
+      },
       role: "presentation",
       onMouseDown: (e) => {
         if (!closeOnBackdrop) return;
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) handleClose();
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -2101,16 +2127,19 @@ function Modal({
           tabIndex: -1,
           ref: dialogRef,
           className: cn(
-            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 animate-modal-pop focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
             useGlass && "glass bg-surface-50/80",
             contentClassName
           ),
+          style: {
+            animation: closing ? `ml-modal-pop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-pop 200ms ease forwards"
+          },
           onMouseDown: (e) => e.stopPropagation(),
           onKeyDownCapture: (e) => {
             if (closeOnEsc && e.key === "Escape") {
               e.preventDefault();
               e.stopPropagation();
-              onClose();
+              handleClose();
               return;
             }
             if (e.key !== "Tab") return;
@@ -4891,7 +4920,10 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        role: "region",
         "aria-label": "Notifications",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
         className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass2[position]),
         children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
       }

package/dist/index.js

@@ -336,7 +336,7 @@ var sizeClass3 = {
   lg: "p-2.5 w-11 h-11"
 };
 var variantClass2 = {
-  primary: "bg-primary text-white shadow-glow hover:brightness-[0.98]",
+  primary: "bg-primary text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02]",
   success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
   warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
   danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
@@ -2039,6 +2039,7 @@ var Card = forwardRef(function Card2({ hoverable, variant = "surface", padding =
     }
   );
 });
+var EXIT_DURATION = 200;
 function Modal({
   isOpen,
   onClose,
@@ -2054,6 +2055,23 @@ function Modal({
 }) {
   const dialogRef = useRef(null);
   const lastActiveElementRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const closingTimerRef = useRef();
+  useEffect(() => {
+    if (isOpen) {
+      setClosing(false);
+      setMounted(true);
+      clearTimeout(closingTimerRef.current);
+    } else if (mounted) {
+      setClosing(true);
+      closingTimerRef.current = setTimeout(() => {
+        setMounted(false);
+        setClosing(false);
+      }, EXIT_DURATION);
+    }
+    return () => clearTimeout(closingTimerRef.current);
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2070,20 +2088,28 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useScrollLock(isOpen);
-  if (!isOpen) return null;
+  useScrollLock(mounted);
+  const handleClose = useCallback(() => {
+    if (closing) return;
+    onClose();
+  }, [closing, onClose]);
+  if (!mounted) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-closing": closing || void 0,
       className: cn(
-        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm animate-modal-backdrop",
+        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm",
         zIndexClassName,
         overlayClassName
       ),
+      style: {
+        animation: closing ? `ml-modal-backdrop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-backdrop 200ms ease forwards"
+      },
       role: "presentation",
       onMouseDown: (e) => {
         if (!closeOnBackdrop) return;
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) handleClose();
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -2095,16 +2121,19 @@ function Modal({
           tabIndex: -1,
           ref: dialogRef,
           className: cn(
-            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 animate-modal-pop focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
             useGlass && "glass bg-surface-50/80",
             contentClassName
           ),
+          style: {
+            animation: closing ? `ml-modal-pop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-pop 200ms ease forwards"
+          },
           onMouseDown: (e) => e.stopPropagation(),
           onKeyDownCapture: (e) => {
             if (closeOnEsc && e.key === "Escape") {
               e.preventDefault();
               e.stopPropagation();
-              onClose();
+              handleClose();
               return;
             }
             if (e.key !== "Tab") return;
@@ -4885,7 +4914,10 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        role: "region",
         "aria-label": "Notifications",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
         className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass2[position]),
         children: toasts.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
       }

package/dist/styles/index.css

@@ -62,6 +62,14 @@
   --ml-transition-fast: 150ms ease;
   --ml-transition-normal: 200ms ease;
   --ml-transition-slow: 300ms ease;
+
+  /* ---- Animation durations ---- */
+  --ml-anim-fast: 200ms;
+  --ml-anim-normal: 300ms;
+  --ml-anim-slow: 500ms;
+
+  /* ---- Layout ---- */
+  --ml-header-height: 4rem;
 }
 @keyframes ml-float {
   0%,
@@ -120,6 +128,24 @@
     transform: translateY(0) scale(1);
   }
 }
+@keyframes ml-modal-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes ml-modal-pop-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
 @keyframes ml-shimmer {
   0% {
     transform: translateX(-200%);
@@ -149,7 +175,8 @@
   [class*='animate-modal'],
   [class*='animate-shimmer'],
   [class*='animate-spin'],
-  [class*='animate-pulse'] {
+  [class*='animate-pulse'],
+  [data-closing] {
     animation-duration: 0.01ms;
     animation-iteration-count: 1;
     transition-duration: 0.01ms;
@@ -664,6 +691,12 @@ a {
       0 1px 3px rgba(0, 0, 0, 0.35),
       inset 0 0 0 1px var(--ml-glass-border, rgba(255, 255, 255, 0.1));
   }
+.glass:hover {
+    background: var(--ml-glass-bg-hover, rgba(255, 255, 255, 0.07));
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.35),
+      inset 0 0 0 1px var(--ml-glass-border-hover, rgba(102, 126, 234, 0.25));
+  }
 /* Surface card */
 .surface {
     border-radius: var(--ml-radius-md, 0.75rem);
@@ -677,9 +710,12 @@ a {
     );
   }
 .surface-hover {
-    transition: box-shadow var(--ml-transition-fast, 150ms ease);
+    transition:
+      box-shadow var(--ml-transition-fast, 150ms ease),
+      transform var(--ml-transition-fast, 150ms ease);
   }
 .surface-hover:hover {
+    transform: translateY(-1px);
     box-shadow: var(
       --ml-shadow-surface-hover,
       0 10px 25px rgba(0, 0, 0, 0.45),
@@ -1420,30 +1456,6 @@ a {
 .animate-\[ml-shimmer_2s_ease-in-out_infinite\] {
   animation: ml-shimmer 2s ease-in-out infinite;
 }
-@keyframes ml-modal-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.animate-modal-backdrop {
-  animation: ml-modal-backdrop 140ms ease-out both;
-}
-@keyframes ml-modal-pop {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-.animate-modal-pop {
-  animation: ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both;
-}
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -2734,10 +2746,6 @@ a {
 .hover\:ring-white\/20:hover {
   --tw-ring-color: rgb(255 255 255 / 0.2);
 }
-.hover\:brightness-\[0\.98\]:hover {
-  --tw-brightness: brightness(0.98);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memelabui/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "MemeLab shared UI component library — React + Tailwind + Glassmorphism",
   "type": "module",
   "sideEffects": [
@@ -46,6 +46,20 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup && pnpm build:css",
+    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
+    "build:storybook": "storybook build -o storybook-static",
+    "test": "vitest",
+    "test:ci": "vitest --run",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
+    "format": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "format:fix": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -67,7 +81,7 @@
     "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.19.0",
+    "eslint": "^10.0.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^25.0.1",
@@ -88,6 +102,10 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "packageManager": "pnpm@9.15.0",
+  "engines": {
+    "node": ">=22"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -101,18 +119,5 @@
     "glassmorphism",
     "dark-theme",
     "component-library"
-  ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "tsup && pnpm build:css",
-    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
-    "build:storybook": "storybook build -o storybook-static",
-    "test": "vitest",
-    "test:ci": "vitest --run",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
-    "lint:fix": "eslint src --ext ts,tsx --fix",
-    "format": "prettier --check \"src/**/*.{ts,tsx,css}\"",
-    "format:fix": "prettier --write \"src/**/*.{ts,tsx,css}\""
-  }
-}
+  ]
+}