@tapcart/mobile-components 0.6.12 → 0.6.14

package/dist/components/hooks/use-collection.d.ts

@@ -9,13 +9,15 @@ interface UseCollectionProps {
     appId: string;
     collectionId?: string;
     collectionHandle?: string;
+    collectionIdList?: string[];
     language: string;
     getCollections?: boolean;
+    limit?: number;
 }
 interface Product {
     handle: string;
 }
-export declare const useCollection: ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections, }: UseCollectionProps) => {
+export declare const useCollection: ({ apiUrl, appId, collectionId, collectionHandle, collectionIdList, language, limit, getCollections, }: UseCollectionProps) => {
     collections: Collection[] | null;
     specificCollection: Collection | null;
     loading: boolean;

package/dist/components/hooks/use-collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-collection.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-collection.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAC;CAEhB;AAED,eAAO,MAAM,aAAa,iFAQrB,kBAAkB;;;;;CAwEtB,CAAC"}
+{"version":3,"file":"use-collection.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-collection.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AA6ED,eAAO,MAAM,aAAa,0GASvB,kBAAkB;;;;;CA0DpB,CAAA"}

package/dist/components/hooks/use-collection.js

@@ -9,56 +9,60 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useEffect } from "react";
-export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections = false, }) => {
+const notEmpty = (value) => {
+    return value !== null && value !== undefined;
+};
+const fetchWrapper = (url, errorCallback) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+        return yield res.json();
+    }
+    catch (error) {
+        console.error("Error fetching collection:", error);
+        errorCallback(error instanceof Error ? error.message : "An unknown error occurred.");
+    }
+});
+const fetchCollection = (apiUrl, language, setError, collectionId = "", collectionHandle = "") => __awaiter(void 0, void 0, void 0, function* () {
+    const collectionBy = collectionHandle ? "by-handle" : "by-id";
+    const params = new URLSearchParams({
+        collectionHandle: collectionHandle,
+        collectionId: collectionId,
+        language,
+    }).toString();
+    return yield fetchWrapper(`${apiUrl}/collections/${collectionBy}?${params}`, setError);
+});
+const fetchAllCollections = (apiUrl, setError, limit = 100) => __awaiter(void 0, void 0, void 0, function* () {
+    const limitParam = new URLSearchParams({
+        limit: `${limit}`,
+    }).toString();
+    return yield fetchWrapper(`${apiUrl}/collections/by-app-id?${limitParam}`, setError);
+});
+export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, collectionIdList, language, limit = 100, getCollections = false, }) => {
     const [collections, setCollections] = useState(null);
     const [specificCollection, setSpecificCollection] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     useEffect(() => {
-        const fetchCollections = () => __awaiter(void 0, void 0, void 0, function* () {
+        const fetchAllOrSumCollections = () => __awaiter(void 0, void 0, void 0, function* () {
             try {
-                const allCollectionsUrl = `${apiUrl}/collections/by-app-id`;
-                let specificCollectionUrl = null;
-                if (collectionId || collectionHandle) {
-                    // Fetch specific collection by ID or handle
-                    const params = new URLSearchParams({
-                        collectionHandle: collectionHandle || "",
-                        collectionId: collectionId || "",
-                        language,
-                    }).toString();
-                    const collectionBy = collectionHandle ? "by-handle" : "by-id";
-                    specificCollectionUrl = `${apiUrl}/collections/${collectionBy}?${params}`;
+                if (getCollections) {
+                    const collections = yield fetchAllCollections(apiUrl, setError, limit);
+                    return setCollections(collections);
                 }
-                const fetchAllCollections = getCollections && allCollectionsUrl
-                    ? fetch(allCollectionsUrl, {
-                        method: "GET",
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                    })
-                    : null;
-                const fetchSpecificCollection = specificCollectionUrl
-                    ? fetch(specificCollectionUrl, {
-                        method: "GET",
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                    })
-                    : null;
-                const [allCollectionsResponse, specificCollectionResponse] = yield Promise.all([
-                    fetchAllCollections,
-                    fetchSpecificCollection,
-                ]);
-                if (fetchAllCollections && allCollectionsResponse && !allCollectionsResponse.ok) {
-                    throw new Error(`Failed to fetch all collections: ${allCollectionsResponse.statusText}`);
+                if (collectionIdList === null || collectionIdList === void 0 ? void 0 : collectionIdList.length) {
+                    const collections = yield Promise.all(collectionIdList.map((id) => fetchCollection(apiUrl, language, setError, id)));
+                    const filteredCollections = collections.filter(notEmpty);
+                    return setCollections(filteredCollections);
                 }
-                if (fetchSpecificCollection && specificCollectionResponse && !specificCollectionResponse.ok) {
-                    throw new Error(`Failed to fetch specific collection: ${specificCollectionResponse.statusText}`);
+                if (collectionId || collectionHandle) {
+                    const collection = yield fetchCollection(apiUrl, language, setError, collectionId, collectionHandle);
+                    return setSpecificCollection(collection);
                 }
-                const allCollectionsData = fetchAllCollections && allCollectionsResponse ? yield allCollectionsResponse.json() : null;
-                const specificCollectionData = fetchSpecificCollection && specificCollectionResponse ? yield specificCollectionResponse.json() : null;
-                setCollections(allCollectionsData);
-                setSpecificCollection(specificCollectionData);
             }
             catch (error) {
                 console.error("Error fetching collection:", error);
@@ -68,7 +72,16 @@ export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, l
                 setLoading(false);
             }
         });
-        fetchCollections();
-    }, [apiUrl, appId, collectionId, collectionHandle, language, getCollections]);
+        fetchAllOrSumCollections();
+    }, [
+        apiUrl,
+        appId,
+        collectionId,
+        collectionHandle,
+        language,
+        getCollections,
+        limit,
+        collectionIdList,
+    ]);
     return { collections, specificCollection, loading, error };
 };

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFA0FX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFA6FX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -81,10 +81,11 @@ const labelVariants = cva("truncate", {
 const Button = React.forwardRef((_a, ref) => {
     var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl"]);
     const Comp = asChild ? Slot : "button";
-    const IconButton = () => icon || iconUrl ? _jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } }) : null;
+    const IconButton = () => icon || iconUrl ? (_jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } })) : null;
     const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: iconSize || variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), {
-                    "mr-2": iconPosition !== "right",
-                }), strokeColor: iconStrokeColor, style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+                    "mr-2": iconPosition === "left",
+                    "ml-2": iconPosition === "right",
+                }), strokeColor: iconStrokeColor, style: { color: iconColor, stroke: iconColor, fill: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,

package/dist/components/ui/price.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":";AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,EAClB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,EAAE,UAAU,2CA+DZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":";AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,EAClB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,EAAE,UAAU,2CAiEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/price.js

@@ -12,7 +12,7 @@ function Price({ price, priceHigh, priceRanges = false, isSale = false, compareA
     const StrikeThroughPrice = () => {
         if (!isSale || !compareAtPrice)
             return null;
-        return (_jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: Object.assign({ fontSize: `${fontSize}px` }, strikeThroughStyles) }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), priceRanges && compareAtPriceHigh && _jsx(Spacer, {}), priceRanges && compareAtPriceHigh && (_jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale }))] })));
+        return (_jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0 flex items-center", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale, styles: strikeThroughStyles }), priceRanges && compareAtPriceHigh && _jsx(Spacer, {}), priceRanges && compareAtPriceHigh && (_jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale, styles: strikeThroughStyles }))] })));
     };
     return (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsx(ProductPrice, {}), _jsx(StrikeThroughPrice, {})] })));
 }

package/dist/components/ui/scroll-area.js

@@ -16,7 +16,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils";
 const ScrollArea = React.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: "flex w-max px-[16px]" }, { children: children })) })), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: "flex w-max" }, { children: children })) })), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef((_a, ref) => {

package/dist/components/ui/subcollection-tabs.d.ts

@@ -0,0 +1,11 @@
+type RelatedCategory = {
+    id: string;
+    title: string;
+    handle: string;
+};
+declare function SubCollectionTabs({ subCollections, useActions, }: {
+    subCollections: RelatedCategory[];
+    useActions: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { SubCollectionTabs };
+//# sourceMappingURL=subcollection-tabs.d.ts.map

package/dist/components/ui/subcollection-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subcollection-tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/subcollection-tabs.tsx"],"names":[],"mappings":"AAOA,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,iBAAS,iBAAiB,CAAC,EACzB,cAAc,EACd,UAAU,GACX,EAAE;IACD,cAAc,EAAE,eAAe,EAAE,CAAA;IAEjC,UAAU,EAAE,GAAG,CAAA;CAChB,kDA6DA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/subcollection-tabs.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { Tabs } from "./tabs";
+import { getIdFromGid } from "../../lib/utils";
+import { useSearchParams } from "next/navigation";
+function SubCollectionTabs({ subCollections, useActions, }) {
+    const searchParams = useSearchParams();
+    const [activeTab, setActiveTab] = useState(null);
+    const isInitialLoad = useRef(true);
+    const prevActiveTab = useRef(null);
+    const { openCollection } = useActions();
+    // Memoize the tabs array
+    const tabs = useMemo(() => subCollections === null || subCollections === void 0 ? void 0 : subCollections.map((category) => ({
+        label: category.title,
+        children: null,
+    })), [subCollections]);
+    useEffect(() => {
+        // Set initial active tab based on URL params
+        const collectionId = searchParams.get("collectionId");
+        const collectionHandle = searchParams.get("collectionHandle");
+        const initialIndex = subCollections.findIndex((cat) => (collectionId && getIdFromGid(cat.id) === collectionId) ||
+            (collectionHandle && cat.handle === collectionHandle));
+        setActiveTab(initialIndex !== -1 ? initialIndex : null);
+        prevActiveTab.current = initialIndex !== -1 ? initialIndex : null;
+        isInitialLoad.current = false;
+    }, [subCollections, searchParams]);
+    const handleTabChange = useCallback((index) => {
+        if (index !== prevActiveTab.current) {
+            if (index !== null && !isInitialLoad.current) {
+                const category = subCollections[index];
+                const newCollectionId = (category === null || category === void 0 ? void 0 : category.id)
+                    ? getIdFromGid(category.id)
+                    : null;
+                const newCollectionHandle = (category === null || category === void 0 ? void 0 : category.handle) || null;
+                if (newCollectionId) {
+                    openCollection({ collectionId: newCollectionId });
+                }
+                else if (newCollectionHandle) {
+                    openCollection({ collectionId: newCollectionHandle });
+                }
+            }
+        }
+    }, [subCollections, openCollection]);
+    if (!tabs)
+        return null;
+    return (_jsx(Tabs, { tabs: tabs, activeTab: activeTab, onTabChange: handleTabChange, links: true }));
+}
+export { SubCollectionTabs };

package/dist/components/ui/tabs.d.ts

@@ -4,9 +4,10 @@ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
         label: string;
         children: React.ReactNode;
     }[];
-    activeTab: number;
-    onTabChange: (_: number) => void;
+    activeTab: number | null;
+    onTabChange: (_: number | null) => void;
     active?: number;
+    links?: boolean;
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export { Tabs };

package/dist/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAA;IACpD,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAiCD,QAAA,MAAM,IAAI,kFAyGT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAA;IACpD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AA4CD,QAAA,MAAM,IAAI,kFAmHT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/ui/tabs.js

@@ -10,29 +10,35 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Text } from "./text";
-const tabVariants = cva("flex items-center justify-center px-4 py-2 w-full active:opacity-70", {
+const tabVariants = cva("flex items-center justify-center px-4 py-2 active:opacity-70", {
     variants: {
         isActive: {
             true: "[&>p]:text-textColors-primaryColor",
             false: "[&>p]:text-textColors-secondaryColor",
         },
+        isLink: {
+            true: "[&>p]:text-textColors-primaryColor",
+            false: "",
+        },
     },
     defaultVariants: {
         isActive: false,
+        isLink: false,
     },
 });
-const Tab = ({ label, isActive = false, onClick }) => {
+const Tab = ({ label, isActive = false, onClick, isLink }) => {
     return (_jsx("button", Object.assign({ className: cn(tabVariants({
             isActive,
-        })), onClick: onClick }, { children: _jsx(Text, Object.assign({ type: "body-primary" }, { children: label })) })));
+            isLink,
+        }), "whitespace-nowrap"), onClick: onClick }, { children: _jsx(Text, Object.assign({ type: "body-primary" }, { children: label })) })));
 };
 const Tabs = React.forwardRef((_a, ref) => {
-    var { className, tabs, activeTab, onTabChange } = _a, props = __rest(_a, ["className", "tabs", "activeTab", "onTabChange"]);
+    var { className, tabs, activeTab, onTabChange, links = false } = _a, props = __rest(_a, ["className", "tabs", "activeTab", "onTabChange", "links"]);
     const [underlinePosition, setUnderlinePosition] = React.useState({
         left: 0,
         width: 0,
@@ -50,6 +56,10 @@ const Tabs = React.forwardRef((_a, ref) => {
     };
     const handleTabChanged = React.useCallback(() => {
         var _a, _b;
+        if (activeTab === null) {
+            setUnderlinePosition({ left: 0, width: 0 });
+            return;
+        }
         const currentTab = containerRef.current.children[activeTab];
         setUnderlinePosition({
             left: (_a = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft) !== null && _a !== void 0 ? _a : 0,
@@ -87,10 +97,10 @@ const Tabs = React.forwardRef((_a, ref) => {
             }
         }
     }, [ref]);
-    return (_jsxs("div", Object.assign({ className: "relative" }, props, { children: [_jsxs("div", Object.assign({ ref: containerRef, className: "relative flex overflow-x-auto", onScroll: checkShowGradients }, { children: [tabs.map((tab, index) => (_jsx(Tab, { label: tab.label, isActive: activeTab === index, onClick: () => onTabChange(index) }, index))), _jsx("div", { className: `absolute bottom-0 bg-coreColors-brandColorPrimary h-[2px] transition-all duration-300`, style: {
+    return (_jsxs("div", Object.assign({ className: "relative no-scrollbar" }, props, { children: [_jsxs("div", Object.assign({ ref: containerRef, className: "relative flex overflow-x-auto no-scrollbar", onScroll: checkShowGradients }, { children: [tabs.map((tab, index) => (_jsx(Tab, { label: tab.label, isActive: activeTab === index, onClick: () => onTabChange(index), isLink: links }, index))), activeTab !== null && !links && (_jsx("div", { className: `absolute bottom-0 bg-coreColors-brandColorPrimary h-[2px] transition-all duration-300`, style: {
                             left: underlinePosition.left,
                             width: underlinePosition.width,
-                        } })] })), showRightGradient ? (_jsx("div", { className: "absolute right-0 bottom-0 w-16 h-10 bg-[linear-gradient(90deg,#ffffff00_0%,#FFF_100%)] pointer-events-none" })) : (_jsx(_Fragment, {})), showLeftGradient ? (_jsx("div", { className: "absolute left-0 bottom-0 w-16 h-10 bg-[linear-gradient(270deg,#ffffff00_0%,#FFF_100%)] pointer-events-none" })) : (_jsx(_Fragment, {}))] })));
+                        } }))] })), showRightGradient && (_jsx("div", Object.assign({ className: "absolute right-0 bottom-0 w-16 h-10 pointer-events-none overflow-hidden" }, { children: _jsx("div", { className: "w-full h-full gradient-right" }) }))), showLeftGradient && (_jsx("div", Object.assign({ className: "absolute left-0 bottom-0 w-16 h-10 pointer-events-none overflow-hidden" }, { children: _jsx("div", { className: "w-full h-full gradient-left" }) })))] })));
 });
 Tabs.displayName = "Tabs";
 export { Tabs };

package/dist/index.d.ts

@@ -50,4 +50,5 @@ export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
 export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";
+export * from "./components/ui/subcollection-tabs";
 //# 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,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,oCAAoC,CAAA"}

package/dist/index.js

@@ -51,3 +51,4 @@ export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
 export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";
+export * from "./components/ui/subcollection-tabs";

package/dist/styles.css

@@ -481,7 +481,7 @@ video {
     --productImage-scaling: cover;
     --productImage-isCustom: "false";
 
-    --standard-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.10);
+    --standard-shadow: 0px 5px 25px 0px rgba (0,  0,  0,  0.10);
   }
   .textarea-component::-webkit-scrollbar {
     width: 4px;
@@ -1054,6 +1054,9 @@ video {
 .w-8 {
   width: 2rem;
 }
+.w-\[138px\] {
+  width: 138px;
+}
 .w-\[140px\] {
   width: 140px;
 }
@@ -1086,6 +1089,9 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-\[138px\] {
+  min-width: 138px;
+}
 .min-w-\[148px\] {
   min-width: 148px;
 }
@@ -1367,6 +1373,9 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.break-words {
+  overflow-wrap: break-word;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1541,10 +1550,6 @@ video {
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1574,12 +1579,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-\[linear-gradient\(270deg\2c \#ffffff00_0\%\2c \#FFF_100\%\)\] {
-  background-image: linear-gradient(270deg,#ffffff00 0%,#FFF 100%);
-}
-.bg-\[linear-gradient\(90deg\2c \#ffffff00_0\%\2c \#FFF_100\%\)\] {
-  background-image: linear-gradient(90deg,#ffffff00 0%,#FFF 100%);
-}
 .bg-fade-left {
   background-image: linear-gradient(to right, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
@@ -1660,10 +1659,6 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-\[16px\] {
-  padding-left: 16px;
-  padding-right: 16px;
-}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1710,6 +1705,9 @@ video {
 .pl-8 {
   padding-left: 2rem;
 }
+.pr-0 {
+  padding-right: 0px;
+}
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -2028,11 +2026,6 @@ video {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-none {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-primary {
   --tw-shadow: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
   --tw-shadow-colored: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
@@ -2189,6 +2182,43 @@ body::-webkit-scrollbar {
   scrollbar-width: none; /* Firefox */
 }
 
+.gradient-right::before,
+.gradient-left::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--coreColors-pageColor);
+}
+
+.gradient-right::before {
+  -webkit-mask-image: linear-gradient(
+    to left,
+    var(--coreColors-pageColor),
+    transparent
+  );
+          mask-image: linear-gradient(
+    to left,
+    var(--coreColors-pageColor),
+    transparent
+  );
+}
+
+.gradient-left::before {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    var(--coreColors-pageColor),
+    transparent
+  );
+          mask-image: linear-gradient(
+    to right,
+    var(--coreColors-pageColor),
+    transparent
+  );
+}
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -11,16 +11,6 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Tapcart Inc.",
   "homepage": "https://tapcart.com",
-  "scripts": {
-    "lint": "eslint \"**/*.ts*\"",
-    "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",
-    "dev:ts": "tsc -w -p tsconfig.json",
-    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
-    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
-  },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
@@ -29,17 +19,17 @@
     "@types/lodash": "4.17.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "app-studio-types": "workspace:*",
     "autoprefixer": "^10.4.14",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^7.32.0",
-    "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
     "tsc-alias": "^1.8.10",
-    "tsconfig": "workspace:*",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "app-studio-types": "0.0.3",
+    "eslint-config-custom": "0.0.0",
+    "tsconfig": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -73,5 +63,15 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"
+  },
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "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",
+    "dev:ts": "tsc -w -p tsconfig.json",
+    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
+    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
   }
-}
+}