@tapcart/mobile-components 0.6.6 → 0.6.7

package/dist/components/libs/sort-filter/shopify-search-and-discovery.js

@@ -0,0 +1,172 @@
+export class ShopifySearchAndDiscovery {
+    constructor() {
+        this.collectionSortOptions = [
+            {
+                sortName: "manual",
+                name: "collection-sort-recommended",
+                sortKey: ProductCollectionSortKeys.COLLECTION_DEFAULT,
+                isReverse: false,
+            },
+            {
+                sortName: "created-descending",
+                name: "collection-sort-new",
+                sortKey: ProductCollectionSortKeys.CREATED,
+                isReverse: true,
+            },
+            {
+                sortName: "best-selling",
+                name: "collection-sort-best",
+                sortKey: ProductCollectionSortKeys.BEST_SELLING,
+                isReverse: false,
+            },
+            {
+                sortName: "price-ascending",
+                name: "collection-sort-ascending-price",
+                sortKey: ProductCollectionSortKeys.PRICE,
+                isReverse: false,
+            },
+            {
+                sortName: "price-descending",
+                name: "collection-sort-descending-price",
+                sortKey: ProductCollectionSortKeys.PRICE,
+                isReverse: true,
+            },
+        ];
+        this.getSortSearchParamKey = () => {
+            return "sort_by";
+        };
+        this.convertFilterCategoriesToSearchParams = (filters, searchParams) => {
+            const filtersToApply = filters.flatMap((it) => it.filters
+                .filter((it) => it.isSelected)
+                .map((it) => {
+                const input = JSON.parse(it.tag);
+                const key = it.collectionId;
+                if (input.hasOwnProperty("available")) {
+                    //ex {title: 'In stock', amount: 38, isSelected: true, tag: '{"available":true}', collectionId: 'filter.v.availability'}
+                    return `filter.v.availability=${input.available ? 1 : 0}`;
+                }
+                else if (input.productVendor) {
+                    //ex {title: 'vendor', amount: 12, isSelected: true, tag: '{"productVendor":"vendor"}', collectionId: 'filter.p.vendor'}
+                    return `${key}=${input.productVendor}`;
+                }
+                else if (input.tag) {
+                    //ex {title: 'Accessory', amount: 1, isSelected: true, tag: '{"tag":"Accessory"}', collectionId: 'filter.p.tag'}
+                    return `${key}=${input.tag}`;
+                }
+                else if (input.productType) {
+                    //ex {title: 'Bag', amount: 1, isSelected: true, tag: '{"productType":"Bag"}', collectionId: 'filter.p.product_type'}
+                    return `${key}=${input.productType}`;
+                }
+                else if (key) {
+                    //ex {title: 'Optimistic', amount: 1, isSelected: true, tag: '{"productMetafield":{"namespace":"test_data","key":"binding_mount","value":"Optimistic"}}', collectionId: 'filter.p.m.test_data.binding_mount'}
+                    //ex {title: 'Velour', amount: 1, isSelected: true, tag: '{"variantOption":{"name":"fabric","value":"Velour"}}', collectionId: 'filter.v.option.fabric'}
+                    const child = Object.keys(input)[0];
+                    if (!child)
+                        return "";
+                    return `${key}=${input[child].value}`;
+                }
+                else {
+                    return "";
+                }
+            })
+                .filter((it) => it !== ""));
+            const oldParams = new URLSearchParams(searchParams.toString());
+            const newParams = new URLSearchParams();
+            //remove old filters
+            oldParams.forEach((value, key) => {
+                if (!key.startsWith("filter.")) {
+                    newParams.append(key, value);
+                }
+            });
+            //build new filters
+            filtersToApply.forEach((param) => {
+                const [key, value] = param.split("=");
+                if (key && value) {
+                    newParams.append(key, value);
+                }
+            });
+            return newParams.toString();
+        };
+    }
+    convertSortToSearchParams({ sortOption, existingParams, }) {
+        var _a;
+        const name = sortOption === null || sortOption === void 0 ? void 0 : sortOption.name;
+        const input = (_a = this.collectionSortOptions.find((it) => it.name == name)) === null || _a === void 0 ? void 0 : _a.sortName;
+        const newParams = new URLSearchParams();
+        existingParams.forEach((value, key) => {
+            if (!key.startsWith(this.getSortSearchParamKey())) {
+                newParams.append(key, value);
+            }
+        });
+        if (input && input.length) {
+            newParams.append(this.getSortSearchParamKey(), input);
+        }
+        return newParams;
+    }
+    getActiveSortFromSearchParams({ searchParams, sortOptions, }) {
+        var _a, _b;
+        const sortInput = searchParams.get(this.getSortSearchParamKey());
+        const name = (_a = this.collectionSortOptions.find((it) => it.sortName == sortInput)) === null || _a === void 0 ? void 0 : _a.name;
+        return (_b = sortOptions.find((it) => (it === null || it === void 0 ? void 0 : it.name) == name)) !== null && _b !== void 0 ? _b : null;
+    }
+}
+export var SearchSortKeys;
+(function (SearchSortKeys) {
+    /**
+     * Sort by the price value.
+     */
+    SearchSortKeys["PRICE"] = "PRICE";
+    /*
+     * Sort by relevance to the search terms.
+     */
+    SearchSortKeys["RELEVANCE"] = "RELEVANCE";
+})(SearchSortKeys || (SearchSortKeys = {}));
+export var SearchUnavailableProductsType;
+(function (SearchUnavailableProductsType) {
+    /*
+     *Show unavailable products in the order that they're found.
+     */
+    SearchUnavailableProductsType["SHOW"] = "SHOW";
+    /*
+     * Exclude unavailable products.
+     */
+    SearchUnavailableProductsType["HIDE"] = "HIDE";
+})(SearchUnavailableProductsType || (SearchUnavailableProductsType = {}));
+export var ProductCollectionSortKeys;
+(function (ProductCollectionSortKeys) {
+    /**
+     * Sort by the `title` value.
+     */
+    ProductCollectionSortKeys["TITLE"] = "TITLE";
+    /**
+     * Sort by the `price` value.
+     */
+    ProductCollectionSortKeys["PRICE"] = "PRICE";
+    /**
+     * Sort by the `best-selling` value.
+     */
+    ProductCollectionSortKeys["BEST_SELLING"] = "BEST_SELLING";
+    /**
+     * Sort by the `created` value.
+     */
+    ProductCollectionSortKeys["CREATED"] = "CREATED";
+    /**
+     * Sort by the `id` value.
+     */
+    ProductCollectionSortKeys["ID"] = "ID";
+    /**
+     * Sort by the `manual` value.
+     */
+    ProductCollectionSortKeys["MANUAL"] = "MANUAL";
+    /**
+     * Sort by the `collection-default` value.
+     */
+    ProductCollectionSortKeys["COLLECTION_DEFAULT"] = "COLLECTION_DEFAULT";
+    /**
+     * During a search (i.e. when the `query` parameter has been specified on the connection) this sorts the
+     * results by relevance to the search term(s). When no search query is specified, this sort key is not
+     * deterministic and should not be used.
+     *
+     */
+    ProductCollectionSortKeys["RELEVANCE"] = "RELEVANCE";
+})(ProductCollectionSortKeys || (ProductCollectionSortKeys = {}));

package/dist/components/ui/empty-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-message.d.ts","sourceRoot":"","sources":["../../../components/ui/empty-message.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C,WAAW,EAAE,MAAM,MAAM,CAAA;IACzB,SAAS,EAAE,MAAM,MAAM,EAAE,CAAA;IACzB,eAAe,EAAE,MAAM,MAAM,CAAA;CAC9B;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,UAAU,GAAG,UAAU,CAAA;IAC7B,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAA;CACzB;AAED,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAsB,EACtB,SAAoB,EACpB,eAA0B,GAC3B,EAAE,iBAAiB,2CA+CnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"empty-message.d.ts","sourceRoot":"","sources":["../../../components/ui/empty-message.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C,WAAW,EAAE,MAAM,MAAM,CAAA;IACzB,SAAS,EAAE,MAAM,MAAM,EAAE,CAAA;IACzB,eAAe,EAAE,MAAM,MAAM,CAAA;CAC9B;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,UAAU,GAAG,UAAU,CAAA;IAC7B,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAA;CACzB;AAED,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAsB,EACtB,SAAoB,EACpB,eAA0B,GAC3B,EAAE,iBAAiB,2CAmGnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/empty-message.js

@@ -4,10 +4,56 @@ import { Button } from "./button";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { cn } from "../../lib/utils";
+import { useState, useEffect } from "react";
 function EmptyMessage({ iconName, title, description, className, buttonLabel, openScreen, usePathname = () => "", useRouter = () => [], useSearchParams = () => "", }) {
+    const [clickCount, setClickCount] = useState(0);
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setClickCount(0);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, [clickCount]);
+    const handlePageClick = () => {
+        setClickCount((prevCount) => {
+            const newCount = prevCount + 1;
+            if (newCount === 10) {
+                const fullUrl = `${window.location.origin}${pathname}?${searchParams.toString()}`;
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard
+                        .writeText(fullUrl)
+                        .then(() => alert("Full URL copied to clipboard!"))
+                        .catch(() => fallbackCopyTextToClipboard(fullUrl));
+                }
+                else {
+                    fallbackCopyTextToClipboard(fullUrl);
+                }
+                return 0;
+            }
+            return newCount;
+        });
+    };
+    const fallbackCopyTextToClipboard = (text) => {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed"; // Avoid scrolling to bottom
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            const successful = document.execCommand("copy");
+            const msg = successful
+                ? "Full URL copied to clipboard!"
+                : "Unable to copy URL";
+            alert(msg);
+        }
+        catch (err) {
+            alert("Failed to copy URL");
+        }
+        document.body.removeChild(textArea);
+    };
     const onClick = () => {
         const newParams = new URLSearchParams(searchParams.toString());
         const filters = newParams.get("filters");
@@ -24,6 +70,6 @@ function EmptyMessage({ iconName, title, description, className, buttonLabel, op
             });
         }
     };
-    return (_jsxs("div", Object.assign({ className: cn("flex-grow flex flex-col justify-center items-center gap-4 h-full", className) }, { children: [_jsxs("div", Object.assign({ className: "flex flex-col justify-center items-center gap-2" }, { children: [_jsx(Icon, { name: iconName, size: "md", color: "coreColors-secondaryIcon" }), _jsx(Text, Object.assign({ type: "h2", className: "text-textColors-primaryColor text-center" }, { children: title })), _jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor text-center" }, { children: description }))] })), buttonLabel ? (_jsx(Button, Object.assign({ variant: "default", onClick: onClick, className: "w-auto" }, { children: buttonLabel }))) : null] })));
+    return (_jsxs("div", Object.assign({ className: cn("flex-grow flex flex-col justify-center items-center gap-4 h-full", className), onClick: handlePageClick }, { children: [_jsxs("div", Object.assign({ className: "flex flex-col justify-center items-center gap-2" }, { children: [_jsx(Icon, { name: iconName, size: "md", color: "coreColors-secondaryIcon" }), _jsx(Text, Object.assign({ type: "h2", className: "text-textColors-primaryColor text-center" }, { children: title })), _jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor text-center" }, { children: description }))] })), buttonLabel ? (_jsx(Button, Object.assign({ variant: "default", onClick: onClick, className: "w-auto" }, { children: buttonLabel }))) : null] })));
 }
 export { EmptyMessage };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inputVariants: (props?: ({
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
+    id: string;
+    label?: string;
+    icon?: string;
+    asChild?: boolean;
+    value: string;
+    placeholder: string;
+    onChange: (_: string) => void;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -0,0 +1,35 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
+    variants: {
+        error: {
+            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        error: false,
+    },
+});
+const Input = React.forwardRef((_a, ref) => {
+    var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
+    const Comp = asChild ? Slot : "div";
+    return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
+});
+Input.displayName = "Input";
+export { Input };

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

@@ -0,0 +1,15 @@
+type Product = any;
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+    filtersData: any;
+}
+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,KAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,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 "../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))) })));
+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" });
+    if (isLoadingInitialData)
+        return _jsx(Loader, {});
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
+                    // @ts-expect-error
+                    product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
+}
+export { ProductGrid };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/hooks/use-recommendations";
 export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-scroll-direction";
+export * from "./components/hooks/use-sort-filter";
 export * from "./components/ui/accordion";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/badge";
@@ -48,4 +49,5 @@ export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
+export * from "./components/libs/sort-filter/search-integration";
 //# 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,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,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"}
+{"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,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,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,kDAAkD,CAAA"}

package/dist/index.js

@@ -6,6 +6,7 @@ export * from "./components/hooks/use-recommendations";
 export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-scroll-direction";
+export * from "./components/hooks/use-sort-filter";
 export * from "./components/ui/accordion";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/badge";
@@ -49,3 +50,4 @@ export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
+export * from "./components/libs/sort-filter/search-integration";

package/dist/styles.css

@@ -782,6 +782,9 @@ video {
 .z-10 {
   z-index: 10;
 }
+.z-20 {
+  z-index: 20;
+}
 .z-50 {
   z-index: 50;
 }
@@ -1057,6 +1060,10 @@ video {
 .w-auto {
   width: auto;
 }
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .w-full {
   width: 100%;
 }
@@ -1785,6 +1792,9 @@ video {
 .capitalize {
   text-transform: capitalize;
 }
+.leading-6 {
+  line-height: 1.5rem;
+}
 .leading-\[130\%\] {
   line-height: 130%;
 }
@@ -2039,6 +2049,9 @@ video {
 .outline-stateColors-skeleton {
   outline-color: var(--stateColors-skeleton);
 }
+.outline-transparent {
+  outline-color: transparent;
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2355,6 +2368,10 @@ body::-webkit-scrollbar {
   outline-color: var(--coreColors-brandColorPrimary);
 }
 
+.active\:outline-transparent:active {
+  outline-color: transparent;
+}
+
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",

package/dist/components/hooks/use-click-outside.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from "react";
-type Handler = () => void;
-interface UseClickOutsideOptions {
-    enabled?: boolean;
-}
-declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: Handler, options?: UseClickOutsideOptions): RefObject<T>;
-export default useClickOutside;
-//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/components/hooks/use-click-outside.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,KAAK,OAAO,GAAG,MAAM,IAAI,CAAA;AAEzB,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC1D,OAAO,EAAE,OAAO,EAChB,OAAO,GAAE,sBAA2B,GACnC,SAAS,CAAC,CAAC,CAAC,CAqDd;AAED,eAAe,eAAe,CAAA"}

package/dist/components/hooks/use-click-outside.js

@@ -1,46 +0,0 @@
-import { useEffect, useRef } from "react";
-function useClickOutside(handler, options = {}) {
-    const { enabled = true } = options;
-    const ref = useRef(null);
-    const touchStartRef = useRef(null);
-    useEffect(() => {
-        if (!enabled)
-            return;
-        const handleOutsideInteraction = (event) => {
-            if (!ref.current || ref.current.contains(event.target))
-                return;
-            handler();
-        };
-        const handleTouchStart = (event) => {
-            touchStartRef.current = {
-                x: event.touches[0].clientX,
-                y: event.touches[0].clientY,
-            };
-        };
-        const handleTouchEnd = (event) => {
-            if (!touchStartRef.current)
-                return;
-            const touchEnd = {
-                x: event.changedTouches[0].clientX,
-                y: event.changedTouches[0].clientY,
-            };
-            const distance = Math.sqrt(Math.pow(touchEnd.x - touchStartRef.current.x, 2) +
-                Math.pow(touchEnd.y - touchStartRef.current.y, 2));
-            if (distance < 10) {
-                // Treat as a tap if the finger didn't move much
-                handleOutsideInteraction(event);
-            }
-            touchStartRef.current = null;
-        };
-        document.addEventListener("mousedown", handleOutsideInteraction);
-        document.addEventListener("touchstart", handleTouchStart);
-        document.addEventListener("touchend", handleTouchEnd);
-        return () => {
-            document.removeEventListener("mousedown", handleOutsideInteraction);
-            document.removeEventListener("touchstart", handleTouchStart);
-            document.removeEventListener("touchend", handleTouchEnd);
-        };
-    }, [handler, enabled]);
-    return ref;
-}
-export default useClickOutside;

package/dist/components/hooks/use-pull-to-refresh.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-declare function usePullToRefresh(ref: React.RefObject<HTMLDivElement>, onTrigger: () => Promise<void>): boolean;
-interface PullToRefreshProps {
-    onRefresh: () => Promise<void>;
-    children: React.ReactNode;
-}
-declare const PullToRefresh: React.FC<PullToRefreshProps>;
-export { usePullToRefresh, PullToRefresh };
-//# sourceMappingURL=use-pull-to-refresh.d.ts.map

package/dist/components/hooks/use-pull-to-refresh.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-pull-to-refresh.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-pull-to-refresh.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,iBAAS,gBAAgB,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,WAuF/B;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/hooks/use-pull-to-refresh.js

@@ -1,88 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useCallback, useRef } from "react";
-import { Icon } from "../ui/icon";
-const TRIGGER_THRESHOLD = 250;
-function usePullToRefresh(ref, onTrigger) {
-    const [loading, setLoading] = useState(false);
-    const handleTouchStartRef = useRef();
-    const handleTouchMoveRef = useRef();
-    const handleTouchEndRef = useRef();
-    const onTransitionEndRef = useRef();
-    const appr = useCallback((x) => {
-        const MAX = 128;
-        const k = 0.4;
-        return MAX * (1 - Math.exp((-k * x) / MAX));
-    }, []);
-    const handleTouchStart = useCallback((startEvent) => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const initialY = startEvent.touches[0].clientY;
-        handleTouchMoveRef.current = (moveEvent) => {
-            const el = ref.current;
-            if (!el)
-                return;
-            const currentY = moveEvent.touches[0].clientY;
-            const dy = currentY - initialY;
-            if (dy < 0)
-                return;
-            el.style.transform = `translateY(${appr(dy)}px)`;
-        };
-        handleTouchEndRef.current = (endEvent) => __awaiter(this, void 0, void 0, function* () {
-            const el = ref.current;
-            if (!el)
-                return;
-            el.style.transform = "translateY(0)";
-            el.style.transition = "transform 0.2s";
-            const y = endEvent.changedTouches[0].clientY;
-            const dy = y - initialY;
-            if (dy > TRIGGER_THRESHOLD &&
-                document.documentElement.scrollTop <= 20) {
-                setLoading(true);
-                const delay = new Promise((resolve) => setTimeout(resolve, 500)); // Wait for half a second to show the loading spinner
-                yield Promise.all([onTrigger(), delay]);
-                setLoading(false);
-            }
-            el.addEventListener("transitionend", onTransitionEndRef.current);
-            el.removeEventListener("touchmove", handleTouchMoveRef.current);
-            el.removeEventListener("touchend", handleTouchEndRef.current);
-        });
-        el.addEventListener("touchmove", handleTouchMoveRef.current);
-        el.addEventListener("touchend", handleTouchEndRef.current);
-    }, [appr, onTrigger, ref]);
-    const onTransitionEnd = useCallback(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        el.style.transition = "";
-        el.removeEventListener("transitionend", onTransitionEndRef.current);
-    }, [ref]);
-    handleTouchStartRef.current = handleTouchStart;
-    onTransitionEndRef.current = onTransitionEnd;
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        el.addEventListener("touchstart", handleTouchStartRef.current);
-        return () => {
-            el.removeEventListener("touchstart", handleTouchStartRef.current);
-        };
-    }, [ref]);
-    return loading;
-}
-const PullToRefresh = ({ onRefresh, children, }) => {
-    const ref = useRef(null);
-    const loading = usePullToRefresh(ref, onRefresh);
-    return (_jsxs("div", Object.assign({ ref: ref, className: "relative" }, { children: [loading && (_jsx("div", Object.assign({ className: "flex w-full justify-center my-4 h-10" }, { children: _jsx(Icon, { name: "loader", className: "animate-spin" }) }))), children] })));
-};
-export { usePullToRefresh, PullToRefresh };

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

@@ -1,16 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const favoriteVariants: (props?: ({
-    size?: "small" | "large" | null | undefined;
-    showBackground?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
-    selected?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    icon?: string;
-    showBackground?: boolean;
-    isAnimated?: boolean;
-}
-declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
-export { Favorite, favoriteVariants };
-//# sourceMappingURL=favorite.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;mFAkBrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AA+ND,QAAA,MAAM,QAAQ,yFAiCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}