@mohasinac/appkit 2.6.0 → 2.6.2

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/dist/validation/schemas.d.ts

@@ -128,7 +128,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
     width: number;
     height: number;
@@ -141,7 +141,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
     width: number;
     height: number;
@@ -154,7 +154,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
     width: number;
     height: number;
@@ -167,7 +167,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
     width: number;
     height: number;
@@ -180,7 +180,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
     width: number;
     height: number;
@@ -193,7 +193,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
     width: number;
     height: number;
@@ -206,7 +206,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
     width: number;
     height: number;
@@ -219,7 +219,7 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     quality?: number | undefined;
     aspectRatio?: string | undefined;
     outputFolder?: string | undefined;
-    outputFormat?: "webp" | "jpeg" | "png" | undefined;
+    outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>;
 export declare const trimDataSchema: z.ZodEffects<z.ZodObject<{
     sourceUrl: z.ZodEffects<z.ZodString, string, string>;

package/package.json

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

package/scripts/seed-cli.mjs

@@ -165,7 +165,7 @@ const {
   carouselsSeedData, carouselSlidesSeedData, homepageSectionsSeedData,
   siteSettingsSeedData, faqSeedData,
   wishlistsSeedData, historySeedData, conversationsSeedData,
-  sublistingCategoriesSeedData, groupedListingsSeedData,
+  groupedListingsSeedData,
   scammersSeedData, productFeaturesSeedData,
   // collection constants
   USER_COLLECTION, ADDRESS_SUBCOLLECTION, STORE_ADDRESS_SUBCOLLECTION,
@@ -175,7 +175,7 @@ const {
   HOMEPAGE_SECTIONS_COLLECTION, SITE_SETTINGS_COLLECTION, FAQS_COLLECTION,
   NOTIFICATIONS_COLLECTION, PAYOUT_COLLECTION, BLOG_POSTS_COLLECTION,
   EVENTS_COLLECTION, EVENT_ENTRIES_COLLECTION, SESSION_COLLECTION,
-  CART_COLLECTION, CONVERSATIONS_COLLECTION, SUBLISTING_CATEGORIES_COLLECTION,
+  CART_COLLECTION, CONVERSATIONS_COLLECTION,
   GROUPED_LISTINGS_COLLECTION, SCAMMER_COLLECTION,
   WISHLIST_COLLECTION, HISTORY_COLLECTION, PRODUCT_FEATURES_COLLECTION,
   // PII helpers
@@ -219,7 +219,6 @@ const COLLECTION_MAP = {
   wishlists: WISHLIST_COLLECTION,
   history: HISTORY_COLLECTION,
   conversations: CONVERSATIONS_COLLECTION,
-  sublistingCategories: SUBLISTING_CATEGORIES_COLLECTION,
   groupedListings: GROUPED_LISTINGS_COLLECTION,
   scammerProfiles: SCAMMER_COLLECTION,
   productFeatures: PRODUCT_FEATURES_COLLECTION,
@@ -253,7 +252,6 @@ const SEED_DATA_MAP = {
   wishlists: wishlistsSeedData,
   history: historySeedData,
   conversations: conversationsSeedData,
-  sublistingCategories: sublistingCategoriesSeedData,
   groupedListings: groupedListingsSeedData,
   scammerProfiles: scammersSeedData,
   productFeatures: productFeaturesSeedData,