@tapcart/mobile-components 0.2.7 → 0.2.9

package/dist/components/hooks/use-infinite-scroll.d.ts

@@ -0,0 +1,25 @@
+interface Product {
+    handle: string;
+}
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+}
+interface UseInfiniteScrollProps {
+    initialData: PageData[];
+    loadMoreProducts: (params: any) => Promise<PageData>;
+    queryVariables: Record<string, any>;
+}
+interface UseInfiniteScrollReturn {
+    data: PageData[] | undefined;
+    error: any;
+    isLoadingInitialData: boolean;
+    isLoadingMore: boolean | undefined;
+    isEmpty: boolean;
+    isReachingEnd: boolean;
+    ref: (node?: Element | null | undefined) => void;
+    products: Product[];
+}
+declare const useInfiniteScroll: ({ initialData, loadMoreProducts, queryVariables, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
+export { useInfiniteScroll };
+//# sourceMappingURL=use-infinite-scroll.d.ts.map

package/dist/components/hooks/use-infinite-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAOA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB;AAED,QAAA,MAAM,iBAAiB,uDAIpB,sBAAsB,KAAG,uBAkD3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/hooks/use-infinite-scroll.js

@@ -0,0 +1,49 @@
+"use client";
+import { useCallback, useEffect } from "react";
+import useSWRInfinite from "swr/infinite";
+import { useInView } from "react-intersection-observer";
+const PAGE_SIZE = 8;
+const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) => {
+    var _a, _b, _c, _d;
+    const { ref, inView } = useInView();
+    const getKey = (pageIndex, previousPageData) => {
+        if (pageIndex === 0)
+            return queryVariables;
+        if (!previousPageData || !previousPageData.cursorBlob)
+            return null;
+        return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.cursorBlob });
+    };
+    const { data, error, size, setSize } = useSWRInfinite(getKey, loadMoreProducts, {
+        // @ts-ignore
+        fallbackData: [initialData],
+        revalidateFirstPage: false,
+        initialSize: 1,
+    });
+    const isLoadingInitialData = !data && !error;
+    const isLoadingMore = isLoadingInitialData ||
+        (size > 0 && data && typeof data[size - 1] === "undefined");
+    const isEmpty = ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    const isReachingEnd = isEmpty ||
+        ((data && ((_d = (_c = data[data.length - 1]) === null || _c === void 0 ? void 0 : _c.products) === null || _d === void 0 ? void 0 : _d.length)) || 0) < PAGE_SIZE;
+    const loadMore = useCallback(() => {
+        if (!isLoadingMore && !isReachingEnd) {
+            setSize(size + 1);
+        }
+    }, [isLoadingMore, isReachingEnd, size, setSize]);
+    useEffect(() => {
+        if (inView) {
+            loadMore();
+        }
+    }, [inView, loadMore]);
+    return {
+        data,
+        error,
+        isLoadingInitialData,
+        isLoadingMore,
+        isEmpty,
+        isReachingEnd,
+        ref,
+        products: data ? data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
+    };
+};
+export { useInfiniteScroll };

package/dist/components/ui/product-card.d.ts

@@ -1,32 +1,67 @@
 import * as React from "react";
+export declare type Config = {
+    gridLayout?: string;
+    productImage?: {
+        enabled: boolean;
+        cornerRadius: number;
+        aspectRatio: "1:1" | "2:3" | "4:5";
+        scaling: "fill" | "fit";
+    };
+    price?: {
+        enabled: boolean;
+        fontSize: number;
+        textAlignment: string;
+        currency: string;
+        locale: string;
+    };
+    productTitle?: {
+        enabled: boolean;
+        fontSize: number;
+        uppercase: boolean;
+        textAlignment: string;
+        wrapText: boolean;
+    };
+    quickAdd?: {
+        enabled: boolean;
+        fontSize: number;
+        uppercase: boolean;
+        textAlignment: string;
+        cornerRadius: number;
+        quickAdd: (event: React.MouseEvent<HTMLButtonElement>, product: ProductCardProps["product"]) => void;
+    };
+    badge?: {
+        text: string;
+        verticalPosition: "top" | "bottom" | "below";
+        horizontalPosition: "left" | "right" | "full-width";
+        icon: string;
+    };
+    favoritesIcon?: {
+        enabled: boolean;
+        layoutType: "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "default";
+        showBackground: boolean;
+        cornerRadius: number;
+        icon: string;
+        size: "small" | "large" | null | undefined;
+    };
+};
 declare type ProductCardProps = {
+    config: Config;
     product: {
         variants: {
             compare_at_price: number | undefined;
             price: number;
         }[];
         images: {
-            src: string;
+            url: string;
         }[];
         title: string;
         tags: string[];
+        availableForSale: boolean;
+        openProduct: (event: React.MouseEvent<HTMLDivElement>, product: ProductCardProps["product"]) => void;
     };
-    className: string;
-    scaling: "fit" | "fill";
-    isQuickAddProductEnabled: boolean;
     isLoading: boolean;
-    badge?: {
-        text: string;
-        variant: "secondary" | "default" | "destructive" | "outline" | null | undefined;
-        className?: string;
-        position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-    };
-    icon?: {
-        name: string;
-        position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-    };
-    quickAdd: (event: React.MouseEvent<HTMLButtonElement>, product: ProductCardProps["product"]) => void;
-    openProduct: (event: React.MouseEvent<HTMLDivElement>, product: ProductCardProps["product"]) => void;
+    favorited?: boolean;
+    onFavoriteClick?: () => void;
 };
 declare const ProductCard: React.FC<ProductCardProps>;
 export { ProductCard };

package/dist/components/ui/product-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,aAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACpE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,wBAAwB,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,CAAC;QAChF,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;KACjE,CAAC;IACF,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;KACjE,CAAA;IACD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACrG,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CACtG,CAAC;AAuBF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkE3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,oBAAY,MAAM,GAAG;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,YAAY,EAAE,MAAM,CAAA;QACpB,WAAW,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;QAClC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAA;KACxB,CAAA;IACD,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,EAAE,MAAM,CAAA;QAChB,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,EAAE,OAAO,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC1C,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KACjC,IAAI,CAAA;KACV,CAAA;IACD,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,gBAAgB,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAA;QAC5C,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,CAAA;QACnD,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,OAAO,CAAA;QAChB,UAAU,EACN,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,SAAS,CAAA;QACb,cAAc,EAAE,OAAO,CAAA;QACvB,YAAY,EAAE,MAAM,CAAA;QACpB,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;KAC3C,CAAA;CACF,CAAA;AAED,aAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QACnE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QACzB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,EAAE,CAAA;QACd,gBAAgB,EAAE,OAAO,CAAA;QACzB,WAAW,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EACvC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KACjC,IAAI,CAAA;KACV,CAAA;IACD,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAqFD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2J3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-card.js

@@ -3,38 +3,130 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Text } from "../../components/ui/text";
+import * as React from "react";
 import { Price } from "../../components/ui/price";
-import { Icon } from "../../components/ui/icon";
 import { Skeleton } from "../../components/ui/skeleton";
-const positionClasses = {
-    topLeft: "absolute top-0 left-0 mt-2",
-    topRight: "absolute top-0 right-0 mt-2",
-    bottomLeft: "absolute bottom-0 left-0 mb-2",
-    bottomRight: "absolute bottom-0 right-0 mb-2",
-};
-var BadgeAlignment;
-(function (BadgeAlignment) {
-    BadgeAlignment["Left"] = "left";
-    BadgeAlignment["Right"] = "right";
-    BadgeAlignment["FullWidth"] = "full-width";
-})(BadgeAlignment || (BadgeAlignment = {}));
-const badgeAlignmentClasses = {
-    topLeft: BadgeAlignment.Left,
-    topRight: BadgeAlignment.Right,
-    bottomLeft: BadgeAlignment.Left,
-    bottomRight: BadgeAlignment.Right,
-};
-const ProductCard = ({ product, scaling, className, badge, icon, quickAdd, openProduct, isQuickAddProductEnabled, isLoading, }) => {
-    const { variants: [variant], images: [{ src }], title } = product;
-    const badgePosition = (badge === null || badge === void 0 ? void 0 : badge.position) || "topRight";
-    const iconPosition = (icon === null || icon === void 0 ? void 0 : icon.position) || "bottomRight";
-    const scalingClass = scaling === "fit" ? "object-contain" : "object-cover";
+import { Favorite } from "../../components/ui/favorite";
+import { cn } from "../../lib/utils";
+import { cva } from "class-variance-authority";
+const aspectScalingVariants = cva("w-full", {
+    variants: {
+        aspectRatio: {
+            "1:1": "aspect-square",
+            "2:3": "aspect-[2/3]",
+            "4:5": "aspect-[4/5]",
+        },
+        scaling: {
+            fill: "object-cover",
+            fit: "object-contain",
+        },
+    },
+    defaultVariants: {
+        aspectRatio: "2:3",
+        scaling: "fill",
+    },
+});
+const badgeVariants = cva("absolute", {
+    variants: {
+        horizontalPosition: {
+            left: "left-0",
+            right: "right-0",
+            "full-width": "",
+        },
+        verticalPosition: {
+            top: "top-0 mt-2",
+            bottom: "bottom-0 mb-2",
+        },
+    },
+});
+const favoriteVariants = cva("absolute ", {
+    variants: {
+        iconPosition: {
+            topLeft: "top-0 left-2 mt-2",
+            topRight: "top-0 right-2 mt-2",
+            bottomLeft: "bottom-0 left-2 mb-2",
+            bottomRight: "bottom-0 right-2 mb-2",
+            default: "",
+        },
+        badgeHorizontalPosition: {
+            left: "",
+            right: "",
+            "full-width": "",
+        },
+        badgeVerticalPosition: {
+            top: "",
+            bottom: "",
+            below: "",
+        },
+    },
+    compoundVariants: [
+        {
+            iconPosition: "topLeft",
+            badgeHorizontalPosition: ["left", "full-width"],
+            badgeVerticalPosition: "top",
+            class: "top-10",
+        },
+        {
+            iconPosition: "topRight",
+            badgeHorizontalPosition: ["right", "full-width"],
+            badgeVerticalPosition: "top",
+            class: "top-10",
+        },
+        {
+            iconPosition: "bottomLeft",
+            badgeHorizontalPosition: ["left", "full-width"],
+            badgeVerticalPosition: "bottom",
+            class: "bottom-10",
+        },
+        {
+            iconPosition: "bottomRight",
+            badgeHorizontalPosition: ["right", "full-width"],
+            badgeVerticalPosition: "bottom",
+            class: "bottom-10",
+        },
+    ],
+    defaultVariants: {
+        iconPosition: "default",
+    },
+});
+const ProductCard = ({ config, product, isLoading, favorited, onFavoriteClick, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { variants: [variant], images: [{ url }], title, tags, } = product;
+    const [isSelected, setIsSelected] = React.useState(false);
+    const handleFavoriteClick = () => {
+        setIsSelected((prevState) => !prevState);
+    };
+    const iconPosition = ((_a = config.favoritesIcon) === null || _a === void 0 ? void 0 : _a.layoutType) || "default";
     if (isLoading) {
-        return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsx(Skeleton, { className: "w-full h-64" }, void 0), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2" }, void 0), _jsx(Skeleton, { className: "h-6 w-3/4 mt-2" }, void 0)] }), void 0));
+        return (_jsxs("div", Object.assign({ className: "w-1/2 rounded" }, { children: [_jsx(Skeleton, { className: "w-full h-64 rounded" }, void 0), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2 rounded" }, void 0), _jsx(Skeleton, { className: "h-4 w-full mt-2 rounded" }, void 0)] }), void 0));
     }
-    return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("img", { className: `w-full h-full ${scalingClass} ${isQuickAddProductEnabled ? "rounded-t-lg rounded-b-none" : "rounded-lg"}`, src: src }, void 0), badge && (_jsx(Badge, Object.assign({ size: "plp-layout", icon: "currency-dollar", className: positionClasses[badgePosition], alignment: badgeAlignmentClasses[badgePosition] }, { children: badge.text }), void 0)), icon && (_jsx(Icon, { name: "HeartFilled", className: positionClasses[iconPosition], color: "stateColors-favorites" }, void 0))] }), void 0), isQuickAddProductEnabled && (_jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => {
-                    e.stopPropagation();
-                    quickAdd(e, product);
-                } }, { children: "+ Quick add" }), void 0)), _jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: "USD", locale: "en-US" }, void 0), _jsx(Text, Object.assign({ className: "text-textColors-productTitle" }, { children: title }), void 0)] }), void 0));
+    return (_jsx("div", { children: _jsxs("div", { children: [((_b = config.productImage) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
+                        borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
+                        borderTopRightRadius: `${config.productImage.cornerRadius}px`,
+                    } }, { children: [_jsx("img", { className: cn(aspectScalingVariants({
+                                aspectRatio: (_c = config.productImage) === null || _c === void 0 ? void 0 : _c.aspectRatio,
+                                scaling: config.productImage.scaling,
+                            })), src: url, onClick: (e) => product.openProduct(e, product) }, void 0), config.badge &&
+                            tags.includes(config.badge.text) &&
+                            config.badge.verticalPosition !== "below" && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(badgeVariants({
+                                verticalPosition: config.badge.verticalPosition,
+                                horizontalPosition: config.badge.horizontalPosition,
+                            })), alignment: config.badge.horizontalPosition, icon: config.badge.icon }, { children: config.badge.text }), void 0)), ((_d = config.favoritesIcon) === null || _d === void 0 ? void 0 : _d.enabled) && iconPosition !== "default" && (_jsx(Favorite, { className: cn(favoriteVariants({
+                                iconPosition,
+                                badgeHorizontalPosition: (_e = config === null || config === void 0 ? void 0 : config.badge) === null || _e === void 0 ? void 0 : _e.horizontalPosition,
+                                badgeVerticalPosition: (_f = config === null || config === void 0 ? void 0 : config.badge) === null || _f === void 0 ? void 0 : _f.verticalPosition,
+                            })), selected: favorited, onClick: onFavoriteClick || handleFavoriteClick }, void 0))] }), void 0)), ((_g = config.quickAdd) === null || _g === void 0 ? void 0 : _g.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
+                        borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
+                        borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
+                    }, variant: "quickadd", size: "default", onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = config.quickAdd) === null || _a === void 0 ? void 0 : _a.quickAdd(e, product);
+                    } }, { children: "+ Quick add" }), void 0)), _jsxs("div", Object.assign({ className: "mt-2 w-full flex-col justify-start items-start gap-1 inline-flex" }, { children: [config.badge &&
+                            tags.includes(config.badge.text) &&
+                            config.badge.verticalPosition === "below" && (_jsx("div", Object.assign({ className: `w-full flex ${config.badge.horizontalPosition === "right"
+                                ? "justify-end"
+                                : "justify-start"}` }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: config.badge.horizontalPosition, icon: config.badge.icon, className: "rounded" }, { children: config.badge.text }), void 0) }), void 0)), _jsxs("div", Object.assign({ className: "flex w-full justify-between items-center gap-2" }, { children: [((_h = config.price) === null || _h === void 0 ? void 0 : _h.enabled) && (_jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: config.price.currency, locale: config.price.locale }, void 0)), _jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: ((_j = config.favoritesIcon) === null || _j === void 0 ? void 0 : _j.enabled) &&
+                                        config.favoritesIcon.layoutType === "default" && (_jsx(Favorite, { selected: isSelected, onClick: handleFavoriteClick, size: "small" }, void 0)) }), void 0)] }), void 0), ((_k = config.productTitle) === null || _k === void 0 ? void 0 : _k.enabled) && (_jsx("div", { children: _jsx(Text, Object.assign({ type: "body-secondary", className: "text-textColors-productTitle" }, { children: title }), void 0) }, void 0))] }), void 0)] }, void 0) }, void 0));
 };
 export { ProductCard };

package/dist/components/ui/product-grid.d.ts

@@ -0,0 +1,14 @@
+declare type Product = any;
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+}
+interface ProductGridItemsProps {
+    initialData: PageData[];
+    loadMoreProducts: (params: any) => Promise<PageData>;
+    queryVariables: Record<string, any>;
+    config: Record<string, any>;
+}
+declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
+export { ProductGrid };
+//# sourceMappingURL=product-grid.d.ts.map

package/dist/components/ui/product-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/product-grid.tsx"],"names":[],"mappings":"AAkBA,aAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-grid.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInfiniteScroll } from "../../components/hooks/use-infinite-scroll";
+import { ProductCard } from "./product-card";
+const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
+        .fill(0)
+        .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) }), void 0));
+function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
+    const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
+        initialData,
+        loadMoreProducts,
+        queryVariables,
+    });
+    if (error)
+        return _jsx("div", { children: "Failed to load data" }, void 0);
+    if (isLoadingInitialData)
+        return _jsx(Loader, {}, void 0);
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
+                    // @ts-ignore
+                    product: product, config: config, isLoading: false }, product.handle))) }), void 0), isLoadingMore ? _jsx(Loader, {}, void 0) : _jsx("div", { ref: ref }, void 0)] }, void 0));
+}
+export { ProductGrid };

package/dist/index.d.ts

@@ -30,5 +30,7 @@ export * from "./components/ui/price";
 export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
+export * from "./components/ui/product-grid";
+export * from "./components/hooks/use-infinite-scroll";
 export { cn, cva } from "./lib/utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wCAAwC,CAAA;AACtD,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -31,4 +31,6 @@ export * from "./components/ui/price";
 export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
+export * from "./components/ui/product-grid";
+export * from "./components/hooks/use-infinite-scroll";
 export { cn, cva } from "./lib/utils";

package/dist/styles.css

@@ -667,6 +667,9 @@ video {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-10 {
+  bottom: 2.5rem;
+}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -676,6 +679,9 @@ video {
 .left-1\/2 {
   left: 50%;
 }
+.left-2 {
+  left: 0.5rem;
+}
 .left-\[50\%\] {
   left: 50%;
 }
@@ -694,6 +700,9 @@ video {
 .top-1\/2 {
   top: 50%;
 }
+.top-10 {
+  top: 2.5rem;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -779,6 +788,12 @@ video {
 .grid {
   display: grid;
 }
+.aspect-\[2\/3\] {
+  aspect-ratio: 2/3;
+}
+.aspect-\[4\/5\] {
+  aspect-ratio: 4/5;
+}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -857,9 +872,6 @@ video {
 .w-2\.5 {
   width: 0.625rem;
 }
-.w-3\/4 {
-  width: 75%;
-}
 .w-4 {
   width: 1rem;
 }
@@ -997,6 +1009,12 @@ video {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -1067,9 +1085,6 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
-.rounded-lg {
-  border-radius: var(--radius);
-}
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
@@ -1083,18 +1098,10 @@ video {
   border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
-.rounded-b-none {
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
 .rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
-.rounded-t-lg {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
 .rounded-bl {
   border-bottom-left-radius: 0.25rem;
 }
@@ -1178,6 +1185,10 @@ video {
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1361,6 +1372,9 @@ video {
 .font-semibold {
   font-weight: 600;
 }
+.uppercase {
+  text-transform: uppercase;
+}
 .leading-\[130\%\] {
   line-height: 130%;
 }
@@ -1550,6 +1564,9 @@ video {
 .outline {
   outline-style: solid;
 }
+.outline-0 {
+  outline-width: 0px;
+}
 .outline-1 {
   outline-width: 1px;
 }
@@ -1948,6 +1965,10 @@ video {
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
+:is(.dark .dark\:bg-neutral-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
 @media (min-width: 640px) {
 
   .sm\:mt-0 {
@@ -1976,6 +1997,12 @@ video {
     text-align: left;
   }
 }
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
   "sourceMap": true,
@@ -17,13 +16,15 @@
     "ui:add": "pnpm dlx shadcn-ui@latest add",
     "build:styles": "postcss styles/globals.css -o dist/styles.css",
     "build:ts": "tsc -p tsconfig.json && tsc-alias",
-    "build": "pnpm run build:ts && pnpm run build:styles"
+    "build": "pnpm run build:ts && pnpm run build:styles",
+    "dev": "tsc -w -p tsconfig.json"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "4.17.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.14",
@@ -57,6 +58,8 @@
     "lucide-react": "^0.248.0",
     "next-themes": "^0.2.1",
     "postcss-cli": "^11.0.0",
+    "react-intersection-observer": "^9.10.2",
+    "swr": "^2.2.5",
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"