@tapcart/mobile-components 0.2.9 → 0.2.10

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProviderProps } from "next-themes/dist/types";
+export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}

package/dist/components/ThemeProvider.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+export function ThemeProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }), void 0);
+}

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}

package/dist/components/ThemeToggle.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { Button } from "../components/ui/button";
+export function ThemeToggle() {
+    const { setTheme, theme } = useTheme();
+    return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }, void 0), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }), void 0)] }), void 0));
+}

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

@@ -14,7 +14,7 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) =
         return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.cursorBlob });
     };
     const { data, error, size, setSize } = useSWRInfinite(getKey, loadMoreProducts, {
-        // @ts-ignore
+        // @ts-expect-error
         fallbackData: [initialData],
         revalidateFirstPage: false,
         initialSize: 1,

package/dist/components/ui/button.js

@@ -17,13 +17,13 @@ import { IconLoader2 } from "@tabler/icons-react";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
-const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
+const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:outline-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
     variants: {
         size: {
             default: "py-3 px-4",
             sm: "px-3 rounded-md",
             lg: "px-8 rounded-md",
-            icon: "p-4 w-auto",
+            icon: "p-3 w-auto",
             content: "py-3 px-4 w-auto",
         },
         variant: {
@@ -47,7 +47,7 @@ const Button = React.forwardRef((_a, ref) => {
     var { className, variant, size, asChild = false, loading, icon } = _a, props = __rest(_a, ["className", "variant", "size", "asChild", "loading", "icon"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => !loading && size === "icon" && icon ? (_jsx(Icon, { name: icon, size: "sm" }, void 0)) : null;
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" }, void 0)) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary" }, { children: props.children }), void 0) : _jsx(_Fragment, {}, void 0)] }, void 0));
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" }, void 0)) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary", className: "truncate" }, { children: props.children }), void 0) : _jsx(_Fragment, {}, void 0)] }, void 0));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size, className }), {
             "pointer-events-none": loading,
         }), ref: ref }, props, { children: loading ? (_jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }, void 0)) : size === "icon" ? (_jsx(IconButton, {}, void 0)) : (_jsx(BasicButton, {}, void 0)) }), void 0));

package/dist/components/ui/checkbox.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { Text } from "./text";
 const Check = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_24)" }, { children: _jsx("path", { d: "M5.667 21H5.66695C4.98414 21 4.32733 20.7382 3.83183 20.2684C3.33941 19.8015 3.04358 19.1646 3.00429 18.4875L3 18.3202V5.667C3 4.24616 4.11102 3.08465 5.51221 3.0043L5.67982 3H18.333C19.7538 3 20.9153 4.11101 20.9957 5.51219L21 5.67983V18.333C21 19.7538 19.889 20.9153 18.4878 20.9957L18.3202 21H5.667ZM16.4141 8.58593L16.414 8.58579C16.0389 8.21085 15.5303 8.00021 15 8.00021C14.4697 8.00021 13.9611 8.21085 13.586 8.58579L10.9998 11.1712L10.4138 10.5856L10.392 10.5638L10.3689 10.5434L10.2749 10.4604L10.2505 10.4388L10.2247 10.4189C9.82271 10.1081 9.31749 9.96192 8.81164 10.0101C8.3058 10.0583 7.83726 10.2972 7.50119 10.6783C7.16512 11.0595 6.98673 11.5542 7.00224 12.0621C7.01775 12.57 7.226 13.053 7.58469 13.4129L7.58589 13.4141L9.58589 15.4141L9.60784 15.4361L9.63111 15.4566L9.72511 15.5396L9.74895 15.5607L9.77407 15.5801C10.1589 15.8786 10.6394 16.0265 11.1254 15.9959C11.6115 15.9654 12.0697 15.7585 12.4141 15.4141L12.4141 15.4141L16.4141 11.4141L16.4361 11.3922L16.4566 11.3689L16.5396 11.2749L16.5607 11.2511L16.5801 11.2259C16.8786 10.8411 17.0265 10.3606 16.9959 9.87457C16.9654 9.38851 16.7585 8.93031 16.4141 8.58593Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_24" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
 const Unchecked = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_32)" }, { children: _jsx("path", { d: "M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_32" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));

package/dist/components/ui/drawer.js

@@ -13,8 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { cn } from "../../lib/utils";
-import { Icon } from "../../components/ui/icon";
+import { cn } from "@/lib/utils";
+import { Icon } from "@/components/ui/icon";
 const DrawerTrigger = DrawerPrimitive.Trigger;
 const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;

package/dist/components/ui/price.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Money } from "../../components/ui/money";
-import { Text } from "../../components/ui/text";
+import { Money } from "@/components/ui/money";
+import { Text } from "@/components/ui/text";
 function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", }) {
     return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined && compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: "flex flex-wrap" }, { children: [_jsx(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0" }, { children: _jsxs("span", Object.assign({ className: "mr-2" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }, void 0), " - ", priceHigh !== undefined &&
                                     _jsx(Money, { price: priceHigh, currency: currency, locale: locale }, void 0)] }), void 0) }), void 0), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0" }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }, void 0), " - ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale }, void 0)] }), void 0)] }), void 0)) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }, void 0), " - ", priceHigh !== undefined &&

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

@@ -1,67 +1,32 @@
 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: {
-            url: string;
+            src: 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;
-    favorited?: boolean;
-    onFavoriteClick?: () => void;
+    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;
 };
 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;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"}
+{"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"}

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

@@ -1,132 +1,40 @@
 "use client";
 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 { Skeleton } from "../../components/ui/skeleton";
-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";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+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";
     if (isLoading) {
-        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: [_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 (_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));
+    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));
 };
 export { ProductCard };

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

@@ -1,6 +1,6 @@
 "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 { 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)
@@ -16,7 +16,7 @@ function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, })
     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
+                    // @ts-expect-error
                     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/components/ui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AA6BD,QAAA,MAAM,cAAc;;8HA8EnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AAuCD,QAAA,MAAM,cAAc;;8HA6FnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/ui/radio-group.js

@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
 const RadioGroup = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-2", className) }, props, { ref: ref }), void 0));
+    return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-4", className) }, props, { ref: ref }), void 0));
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-start group", {
@@ -34,11 +34,7 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-s
         variant: "default",
     },
 });
-const RadioGroupItemLabels = ({ key, label, numberAmount, subtext }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-start mb-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label }), void 0), numberAmount ?
-                    _jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }), void 0)
-                    : null] }), void 0), subtext ?
-            _jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext }), void 0)
-            : null] }), void 0));
+const RadioGroupItemLabels = ({ key, label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-start" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label }), void 0), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }), void 0)) : null] }), void 0), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-2" }, { children: subtext }), void 0)) : null] }), void 0));
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { value, label = "", subtext, numberAmount = 0, onSelect, onClick, selected = false, className, variant = "default", key } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "key"]);
     return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }, void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }, void 0)) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }, void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }), void 0)) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }, void 0) }), void 0), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }, void 0) }), void 0)] }), void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }), void 0)) }), void 0)) }), void 0));

package/dist/components/ui/selectors.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { Text } from "./text";
 const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pageColor flex-row justify-center outline outline-1 rounded text-textColors-primaryColor outline-coreColors-dividingLines items-center", {
     variants: {

package/dist/components/ui/tabs.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { Text } from "./text";
 const tabVariants = cva("flex items-center justify-center px-4 py-2 w-full", {
     variants: {

package/dist/components/ui/use-toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ToastProps } from "../../components/ui/toast";
+import type { ToastProps } from "@/components/ui/toast";
 declare type ToasterToast = ToastProps & {
     id: string;
     title?: React.ReactNode;

package/dist/styles.css

@@ -667,9 +667,6 @@ video {
 .bottom-0 {
   bottom: 0px;
 }
-.bottom-10 {
-  bottom: 2.5rem;
-}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -679,9 +676,6 @@ video {
 .left-1\/2 {
   left: 50%;
 }
-.left-2 {
-  left: 0.5rem;
-}
 .left-\[50\%\] {
   left: 50%;
 }
@@ -700,9 +694,6 @@ video {
 .top-1\/2 {
   top: 50%;
 }
-.top-10 {
-  top: 2.5rem;
-}
 .top-2 {
   top: 0.5rem;
 }
@@ -791,9 +782,6 @@ video {
 .aspect-\[2\/3\] {
   aspect-ratio: 2/3;
 }
-.aspect-\[4\/5\] {
-  aspect-ratio: 4/5;
-}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -872,6 +860,9 @@ video {
 .w-2\.5 {
   width: 0.625rem;
 }
+.w-3\/4 {
+  width: 75%;
+}
 .w-4 {
   width: 1rem;
 }
@@ -1009,12 +1000,6 @@ video {
 .items-center {
   align-items: center;
 }
-.justify-start {
-  justify-content: flex-start;
-}
-.justify-end {
-  justify-content: flex-end;
-}
 .justify-center {
   justify-content: center;
 }
@@ -1085,6 +1070,9 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: var(--radius);
+}
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
@@ -1098,10 +1086,18 @@ 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;
 }
@@ -1372,9 +1368,6 @@ video {
 .font-semibold {
   font-weight: 600;
 }
-.uppercase {
-  text-transform: uppercase;
-}
 .leading-\[130\%\] {
   line-height: 130%;
 }
@@ -1564,9 +1557,6 @@ video {
 .outline {
   outline-style: solid;
 }
-.outline-0 {
-  outline-width: 0px;
-}
 .outline-1 {
   outline-width: 1px;
 }
@@ -1787,6 +1777,9 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.disabled\:outline-stateColors-disabled:disabled {
+  outline-color: var(--stateColors-disabled);
+}
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -41,6 +41,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",