@mohasinac/appkit 2.6.0 → 2.6.1

package/dist/next/api/routeHandler.js

@@ -128,10 +128,12 @@ export function createRouteHandler(options) {
             return response;
         }
         catch (err) {
-            // Structured errors thrown with .status
-            const status = typeof err?.status === "number"
-                ? err.status
-                : 500;
+            const e = err;
+            const status = typeof e?.statusCode === "number"
+                ? e.statusCode
+                : typeof e?.status === "number"
+                    ? e.status
+                    : 500;
             const message = err instanceof Error ? err.message : "Internal server error";
             // 401/403 are expected for protected routes and should not be error-noisy.
             if (status >= 500) {

package/dist/ui/components/Button.js

@@ -1,7 +1,19 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useCallback } from "react";
 import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
+function spawnRipple(host, clientX, clientY) {
+    const rect = host.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height);
+    const ripple = document.createElement("span");
+    ripple.className = "appkit-button__ripple";
+    ripple.style.width = ripple.style.height = `${size}px`;
+    ripple.style.left = `${clientX - rect.left - size / 2}px`;
+    ripple.style.top = `${clientY - rect.top - size / 2}px`;
+    host.appendChild(ripple);
+    ripple.addEventListener("animationend", () => ripple.remove(), { once: true });
+}
 /**
  * Button — versatile button with multiple variants, sizes, and loading state.
  *
@@ -27,6 +39,13 @@ const UI_BUTTON = {
 };
 export function Button({ variant = "primary", size = "md", className = "", isLoading = false, disabled, children, asChild = false, ...props }) {
     const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[variant], UI_BUTTON.sizes[size], className);
+    const userOnClick = props.onClick;
+    const handleClick = useCallback((event) => {
+        if (!disabled && !isLoading) {
+            spawnRipple(event.currentTarget, event.clientX, event.clientY);
+        }
+        userOnClick?.(event);
+    }, [disabled, isLoading, userOnClick]);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
@@ -35,5 +54,5 @@ export function Button({ variant = "primary", size = "md", className = "", isLoa
             ...(disabled ? { "aria-disabled": true } : {}),
         });
     }
-    return (_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
+    return (_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
 }

package/dist/ui/components/Button.style.css

@@ -11,6 +11,40 @@
   transition: all 0.2s ease;
   cursor: pointer;
   user-select: none;
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.appkit-button__ripple {
+  position: absolute;
+  border-radius: 9999px;
+  background: currentColor;
+  opacity: 0.28;
+  pointer-events: none;
+  transform: scale(0);
+  animation: appkit-button-ripple 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  z-index: 0;
+}
+
+.appkit-button__content,
+.appkit-button__spinner {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes appkit-button-ripple {
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appkit-button__ripple {
+    animation-duration: 1ms;
+    opacity: 0;
+  }
 }
 
 .appkit-button:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"