@tapcart/mobile-components 0.5.3 → 0.5.5

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

@@ -78,13 +78,13 @@ const useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, })
     return {
         data,
         error,
-        isLoadingInitialData: false,
+        isLoadingInitialData,
         isLoadingMore,
         isEmpty,
         isReachingEnd,
         ref,
         products: data ? data === null || data === void 0 ? void 0 : data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
-        isLoading: isLoading,
+        isLoading,
         isValidating,
     };
 };

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

@@ -0,0 +1,15 @@
+import { Product } from "app-studio-types";
+type URL = string;
+type UseProductsProps = {
+    productIds: string[];
+    baseURL: URL;
+    fetcher?: (url: string) => Promise<any>;
+};
+type UseProductsReturn = {
+    products: Product[];
+    error: any;
+    isLoading: boolean;
+};
+declare function useProducts({ productIds, baseURL, fetcher, }: UseProductsProps): UseProductsReturn;
+export { useProducts };
+//# sourceMappingURL=use-products.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,UAAU,EACV,OAAO,EACP,OAAuD,GACxD,EAAE,gBAAgB,GAAG,iBAAiB,CAStC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,11 @@
+import useSWR from "swr";
+function useProducts({ productIds, baseURL, fetcher = (url) => fetch(url).then((res) => res.json()), }) {
+    const url = `${baseURL}/products/by-ids?ids=${productIds.join(",")}`;
+    const { data, error } = useSWR(url, fetcher);
+    return {
+        products: data || [],
+        error,
+        isLoading: !data && !error,
+    };
+}
+export { useProducts };

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

@@ -3,6 +3,6 @@ interface ScrollData {
     direction: ScrollDirection;
     scrollY: number;
 }
-declare function useScrollDirection(threshold?: number, throttleDelay?: number): ScrollData;
+declare function useScrollDirection(threshold?: number): ScrollData;
 export { useScrollDirection };
 //# sourceMappingURL=use-scroll-direction.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CACzB,SAAS,GAAE,MAAU,EACrB,aAAa,GAAE,MAAW,GACzB,UAAU,CAmDZ;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CAAC,SAAS,GAAE,MAAU,GAAG,UAAU,CAqD7D;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -1,21 +1,13 @@
 "use client";
-import { useState, useEffect, useRef } from "react";
-function useScrollDirection(threshold = 5, throttleDelay = 50) {
+import { useState, useEffect, useRef, useTransition } from "react";
+function useScrollDirection(threshold = 5) {
     const [scrollData, setScrollData] = useState({
         direction: null,
         scrollY: 0,
     });
+    const [isPending, startTransition] = useTransition();
     const lastScrollY = useRef(0);
-    const throttle = (func, limit) => {
-        let inThrottle;
-        return (...args) => {
-            if (!inThrottle) {
-                func(...args);
-                inThrottle = true;
-                setTimeout(() => (inThrottle = false), limit);
-            }
-        };
-    };
+    const isBouncing = useRef(false);
     useEffect(() => {
         if (typeof window === "undefined") {
             return;
@@ -25,18 +17,32 @@ function useScrollDirection(threshold = 5, throttleDelay = 50) {
                 return;
             }
             const scrollY = window.scrollY;
-            const direction = scrollY > lastScrollY.current && scrollY !== 0 ? "down" : "up";
-            if (Math.abs(scrollY - lastScrollY.current) > threshold) {
-                setScrollData({ direction, scrollY });
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+            // Detect if the user is at the top or bottom of the page
+            if (scrollY <= 0 || scrollY + clientHeight >= scrollHeight) {
+                isBouncing.current = true;
+            }
+            else {
+                isBouncing.current = false;
+            }
+            // Prevent updating scroll direction if the page is bouncing
+            if (!isBouncing.current &&
+                Math.abs(scrollY - lastScrollY.current) > threshold) {
+                startTransition(() => {
+                    setScrollData({
+                        direction: scrollY > lastScrollY.current ? "down" : "up",
+                        scrollY,
+                    });
+                });
                 lastScrollY.current = scrollY > 0 ? scrollY : 0;
             }
         };
-        const throttledUpdateScrollDirection = throttle(updateScrollDirection, throttleDelay);
-        window.addEventListener("scroll", throttledUpdateScrollDirection);
+        window.addEventListener("scroll", updateScrollDirection);
         return () => {
-            window.removeEventListener("scroll", throttledUpdateScrollDirection);
+            window.removeEventListener("scroll", updateScrollDirection);
         };
-    }, [threshold, throttleDelay]);
+    }, [threshold]);
     return scrollData;
 }
 export { useScrollDirection };

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

@@ -7,8 +7,11 @@ declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     size: "plp-layout" | "carousels";
     icon?: string | null;
+    iconUrl?: string | null;
     type?: "icon-and-text" | "icon-only" | "text-only";
+    backgroundColor?: string | null;
+    fontColor?: string | null;
 }
-declare function Badge({ className, icon, alignment, cornerRadius, type, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, icon, iconUrl, alignment, cornerRadius, type, size, backgroundColor, fontColor, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;;mFAkClB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,WAAW,CAAA;CACnD;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,SAAS,EACT,YAAwB,EACxB,IAAsB,EACtB,IAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,2CA0BZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;;mFAqDlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,WAAW,CAAA;IAClD,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAwB,EACxB,IAAsB,EACtB,IAAmB,EACnB,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge.js

@@ -19,7 +19,7 @@ const badgeVariants = cva("inline-flex items-center justify-center gap-1 py-1 px
         alignment: {
             start: "",
             end: "",
-            center: "rounded-none w-full",
+            center: "w-full",
         },
         cornerRadius: {
             rounded: "",
@@ -42,11 +42,32 @@ const badgeVariants = cva("inline-flex items-center justify-center gap-1 py-1 px
             cornerRadius: "rounded",
             class: "rounded-tl rounded-bl",
         },
+        {
+            alignment: "center",
+            cornerRadius: "rounded",
+            class: "rounded",
+        },
+        {
+            alignment: "start",
+            cornerRadius: "circle",
+            class: "rounded-tr-2xl rounded-br-2xl",
+        },
+        {
+            alignment: "end",
+            cornerRadius: "circle",
+            class: "rounded-tl-2xl rounded-bl-2xl",
+        },
+        {
+            alignment: "center",
+            cornerRadius: "circle",
+            class: "rounded-2xl",
+        },
     ]
 });
 function Badge(_a) {
-    var { className, icon, alignment, cornerRadius = "rounded", type = "icon-and-text", size = "plp-layout" } = _a, props = __rest(_a, ["className", "icon", "alignment", "cornerRadius", "type", "size"]);
-    const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text" }, { children: props.children })));
-    return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className) }, props, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" })), _jsx(BadgeText, {})] })) : type === "icon-only" && icon ? (_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" })) : (_jsx(BadgeText, {})) })));
+    var { className, icon, iconUrl, alignment, cornerRadius = "rounded", type = "icon-and-text", size = "plp-layout", backgroundColor, fontColor } = _a, props = __rest(_a, ["className", "icon", "iconUrl", "alignment", "cornerRadius", "type", "size", "backgroundColor", "fontColor"]);
+    const backgroundColorOverride = backgroundColor ? { backgroundColor } : {};
+    const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text", fontColor: fontColor }, { children: props.children })));
+    return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className), style: backgroundColorOverride }, props, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [(icon || iconUrl) && (_jsx(Icon, { name: icon, url: iconUrl, strokeColor: fontColor, fillColor: fontColor, size: size === "carousels" ? "xs" : "sm" })), _jsx(BadgeText, {})] })) : type === "icon-only" && icon ? (_jsx(Icon, { name: icon, url: iconUrl, strokeColor: fontColor, fillColor: fontColor, size: size === "carousels" ? "xs" : "sm" })) : (_jsx(BadgeText, {})) })));
 }
 export { Badge, badgeVariants };

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

@@ -11,6 +11,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     labelClassName?: string;
     labelStyle?: React.CSSProperties | undefined;
     iconColor?: string;
+    iconPosition?: "left" | "right";
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,uFAuEX,CAAA;AAGD,OAAO,EAAE,MAAM,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;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAyEX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -32,7 +32,7 @@ const buttonVariants = cva("w-full flex rounded items-center justify-center tran
             secondary: "bg-buttonColors-secondaryFill border border-buttonColors-secondaryOutlineColor disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled shadow-secondary",
             ghost: "hover:bg-accent",
             link: "underline-offset-4 hover:underline disabled:text-stateColors-disabled disabled:bg-transparent",
-            quickadd: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor w-full rounded-none rounded-b-lg h-8 text-xs",
+            quickadd: "bg-buttonColors-primaryFill w-full rounded-none rounded-b-lg h-8 text-xs border border-buttonColors-primaryOutlineColor py-2",
             applePay: "bg-white border border-black",
             shopPay: "bg-[#612EFF]",
         },
@@ -69,7 +69,7 @@ const labelVariants = cva("truncate", {
             secondary: "text-buttonColors-secondaryText",
             ghost: "hover:text-accent-foreground",
             link: "text-textColors-primaryColor",
-            quickadd: "text-buttonColors-primaryText",
+            quickadd: "text-buttonColors-primaryText text-xs",
             applePay: "text-black border",
             shopPay: "",
         },
@@ -79,12 +79,13 @@ const labelVariants = cva("truncate", {
     },
 });
 const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor"]);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconPosition } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconPosition"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => (icon ? _jsx(Icon, { name: icon, size: "sm" }) : null);
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), "mr-2"), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), { "mr-2": iconPosition !== "right" }), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
+            "flex-row-reverse": icon && iconPosition === "right"
         }), ref: ref }, props, { children: loading ? (_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 } }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";

package/dist/components/ui/color-swatch.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+declare const colorSwatchVariants: (props?: ({
+    overflow?: "wrap" | "horizontal-scroll" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface Color {
+    color: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface Img {
+    url: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface ColorSwatchProps extends VariantProps<typeof colorSwatchVariants> {
+    className?: string;
+    items: Color[] | Img[];
+    onSelect: (color: Color | Img) => void;
+    shape: "rectangle" | "circle";
+    type: "color" | "image";
+}
+declare const ColorSwatch: React.FC<ColorSwatchProps>;
+export { ColorSwatch, type ColorSwatchProps, type Color, type Img };
+//# sourceMappingURL=color-swatch.d.ts.map

package/dist/components/ui/color-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../../../components/ui/color-swatch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAI5D,QAAA,MAAM,mBAAmB;;mFAWvB,CAAA;AAEF,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,GAAG;IACX,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC7B,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsD3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,KAAK,EAAE,KAAK,GAAG,EAAE,CAAA"}

package/dist/components/ui/color-swatch.js

@@ -0,0 +1,44 @@
+"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 { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const colorSwatchVariants = cva("grid grid-flow-col w-full gap-x-2 gap-y-2", {
+    variants: {
+        overflow: {
+            "horizontal-scroll": "overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+            wrap: "flex flex-wrap",
+        },
+    },
+    defaultVariants: {
+        overflow: "horizontal-scroll",
+    },
+});
+const ColorSwatch = (_a) => {
+    var { className, onSelect, shape = "rectangle", overflow = "horizontal-scroll", items, type } = _a, props = __rest(_a, ["className", "onSelect", "shape", "overflow", "items", "type"]);
+    return (_jsx("div", Object.assign({ className: cn(colorSwatchVariants({ overflow }), className) }, props, { children: items.map((item, index) => {
+            return (_jsx("button", Object.assign({ className: cn("border border-transparent rounded-sm", {
+                    "border-coreColors-brandColorPrimary": item.selected,
+                    "rounded-sm": shape === "rectangle",
+                    "rounded-full": shape === "circle",
+                }), onClick: () => onSelect(item) }, { children: _jsx("div", Object.assign({ className: cn("relative h-[22px] w-[22px] border border-coreColors-dividingLines bg-contain", {
+                        "rounded-sm": shape === "rectangle",
+                        "rounded-full": shape === "circle",
+                    }), style: {
+                        backgroundColor: type === "color" ? item.color : "",
+                        borderColor: item.selected ? "#FFF" : "",
+                        backgroundImage: type === "image" ? `url(${item.url})` : "",
+                    } }, { children: item.disabled ? (_jsx("div", Object.assign({ className: "absolute flex items-center justify-center", style: { inset: shape === "rectangle" ? 0 : 2 } }, { children: _jsx("div", { className: "w-full h-[1px] bg-white transform rotate-45 rounded" }) }))) : null }), index) })));
+        }) })));
+};
+export { ColorSwatch };

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAE/D,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CAoBnB,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js

@@ -20,7 +20,7 @@ const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
 const Drawer = (_a) => {
     var { shouldScaleBackground } = _a, props = __rest(_a, ["shouldScaleBackground"]);
-    return _jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props));
+    return (_jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props, { noBodyStyles: true, disablePreventScroll: true })));
 };
 Drawer.displayName = "Drawer";
 const DrawerOverlay = React.forwardRef((_a, ref) => {

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

@@ -6,6 +6,9 @@ interface EmptyMessageProps {
     buttonLabel?: string;
     heightOffset?: number;
     openScreen: (params: OpenScreenParams) => void;
+    usePathname: () => string;
+    useRouter: () => string[];
+    useSearchParams: () => string;
 }
 interface Destination {
     type: "internal" | "external";
@@ -14,6 +17,6 @@ interface Destination {
 interface OpenScreenParams {
     destination: Destination;
 }
-declare function EmptyMessage({ iconName, title, description, className, buttonLabel, openScreen, }: EmptyMessageProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyMessage({ iconName, title, description, className, buttonLabel, openScreen, usePathname, useRouter, useSearchParams, }: EmptyMessageProps): import("react/jsx-runtime").JSX.Element;
 export { EmptyMessage };
 //# sourceMappingURL=empty-message.d.ts.map

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":"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;CAC/C;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,GACX,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":"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"}

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

@@ -4,8 +4,7 @@ import { Button } from "./button";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { cn } from "../../lib/utils";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-function EmptyMessage({ iconName, title, description, className, buttonLabel, openScreen, }) {
+function EmptyMessage({ iconName, title, description, className, buttonLabel, openScreen, usePathname = () => "", useRouter = () => [], useSearchParams = () => "", }) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();

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

@@ -5,7 +5,7 @@ interface GridType {
     children: React.ReactNode;
 }
 declare const gridVariants: (props?: ({
-    columns?: 2 | 1 | 3 | 4 | null | undefined;
+    columns?: 3 | 1 | 2 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface GridProps extends GridType, VariantProps<typeof gridVariants> {
 }

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

@@ -6,8 +6,11 @@ declare const iconVariants: (props?: ({
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface IconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof iconVariants> {
-    name?: string;
+    name?: string | null;
+    url?: string | null;
+    fillColor?: string | null;
+    strokeColor?: string | null;
 }
-declare function Icon({ className, name, size, color, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ className, name, size, color, fillColor, strokeColor, url, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export { Icon, iconVariants, IconPencilMinus };
 //# sourceMappingURL=icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B;AA8CD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAgBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -1,3 +1,4 @@
+'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)
@@ -10,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactSVG } from "react-svg";
 import { cva } from "class-variance-authority";
-import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff } from "@tabler/icons-react";
+import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, } from "@tabler/icons-react";
 import { cn, iconColorVariantClasses } from "../../lib/utils";
 const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
     variants: {
@@ -76,9 +78,23 @@ const icons = {
     search: IconSearch,
     "shopping-cart-off": IconShoppingCartOff,
 };
-function Icon(_a) {
-    var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);
+const TablerIcon = ({ name, size }) => {
     const IconComponent = icons[name];
-    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ color, size, className })) }, props, { children: [IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null, props.children] })));
+    return IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null;
+};
+const CustomIcon = ({ url, size, strokeColor, fillColor }) => {
+    return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
+            svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
+            const paths = svg.querySelectorAll("path");
+            paths.forEach((path) => {
+                path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
+                fillColor && path.setAttribute("fill", fillColor);
+                strokeColor && path.setAttribute("stroke", strokeColor);
+            });
+        } }));
+};
+function Icon(_a) {
+    var { className, name, size = "md", color, fillColor, strokeColor, url } = _a, props = __rest(_a, ["className", "name", "size", "color", "fillColor", "strokeColor", "url"]);
+    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ size, color, className })) }, props, { children: [url ? (_jsx(CustomIcon, { url: url, size: size, strokeColor: strokeColor, fillColor: fillColor })) : (_jsx(TablerIcon, { name: name, size: size })), props.children] })));
 }
 export { Icon, iconVariants, IconPencilMinus };

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

@@ -1 +1 @@
-{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,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;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAa,EACb,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAsGZ;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;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAiEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/price.js

@@ -1,13 +1,21 @@
-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 { Money } from "./money";
 import { Text } from "./text";
 import { cn } from "../../lib/utils";
-function Price({ price, priceHigh = 0, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
-    return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale &&
-                compareAtPrice !== undefined &&
-                compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsxs(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
-                                    "ml-auto": textAlignment === 'right',
-                                    "mr-auto": textAlignment === 'center',
-                                }) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), " ", "-", " ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale })] }))] }))) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))) })) : (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined ? (_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(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: _jsx("span", Object.assign({ className: "mr-2" }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) })) })), _jsx(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize } }, { children: _jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }) }))] }))) : (_jsx(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) }))) })) }));
+function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
+    const Spacer = () => (_jsx("span", { children: " - " }));
+    const ProductPrice = () => {
+        const colorClass = isSale ? 'text-textColors-salePriceText' : 'text-textColors-priceText';
+        return (_jsxs(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
+                        "ml-auto": textAlignment === 'right',
+                        "mr-auto": textAlignment === 'center',
+                    }) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })));
+    };
+    const StrikeThroughPrice = () => {
+        if (!isSale || !compareAtPrice)
+            return null;
+        return (_jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { 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("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, {})] })));
 }
 export { Price };

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":"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"}
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}

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

@@ -6,6 +6,7 @@ import { Button } from "./button";
 import { Text } from "./text";
 import * as React from "react";
 import { Price } from "./price";
+import { Icon } from "./icon";
 import { Skeleton } from "./skeleton";
 import { cn } from "../../lib/utils";
 import { cva } from "class-variance-authority";
@@ -221,10 +222,10 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
                                 : undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
                         borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
                         borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
-                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
+                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", disabled: product.availableForSale === false, onClick: (e) => {
                         e.stopPropagation();
                         onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
-                    } }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
+                    } }, { children: _jsxs("div", Object.assign({ className: "flex items-center justify-center gap-2" }, { children: [_jsx(Icon, { name: product.availableForSale ? "plus" : "shopping-cart-off", size: "xs" }), product.availableForSale ? "Quick Add" : "Sold Out"] })) }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
                                 "justify-end": belowBadge.horizontalPosition === "end",
                             }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.uppercase }, {
                                     "text-left": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "left",

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

@@ -6,6 +6,7 @@ declare const selectorsVariants: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SelectorsProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof selectorsVariants> & {
     disabled?: boolean;
+    disabledClick?: boolean;
     selected?: boolean;
     label?: string;
     key?: string;
@@ -16,15 +17,16 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
     disabled?: boolean | undefined;
+    disabledClick?: boolean | undefined;
     selected?: boolean | undefined;
     label?: string | undefined;
     key?: string | undefined;
     onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 type SelectorContainerProps = {
-    children: React.ReactElement<SelectorsProps>[];
+    children: React.ReactElement<SelectorsProps>[] | React.ReactElement<SelectorsProps>;
     containerRef: React.RefObject<HTMLDivElement>;
-    className: string;
+    className?: string;
 };
 declare const SelectorContainer: React.FC<SelectorContainerProps>;
 export { SelectorContainer, Selectors, selectorsVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CAyCpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACnF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/selectors.js

@@ -23,7 +23,7 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
         },
         disabled: {
             true: "[&>p]:!line-through [&>p]:text-stateColors-disabled",
-            false: "cursor-pointer active:outline-coreColors-brandColorPrimary active:opacity-70",
+            false: "cursor-pointer",
         },
     },
     defaultVariants: {
@@ -31,12 +31,12 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
     },
 });
 const Selectors = React.forwardRef((_a, ref) => {
-    var { label, selected, disabled = false, className, onSelect, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "className", "onSelect", "children"]);
-    return (_jsx("button", Object.assign({ disabled: disabled, onClick: onSelect, className: cn(selectorsVariants({
+    var { label, selected, disabled = false, disabledClick = true, className, onSelect, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "children"]);
+    return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: onSelect, className: cn(selectorsVariants({
             selected: selected,
             className,
             disabled,
-        }), "group"), ref: ref }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
+        }), "group", className), ref: ref }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
 });
 const SelectorContainer = ({ children, containerRef, className, }) => {
     const [showFadeLeft, setShowFadeLeft] = React.useState(false);
@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, className, }) => {
     React.useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
+    return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
 };
 Selectors.displayName = "Selectors";
 export { SelectorContainer, Selectors, selectorsVariants };

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

@@ -4,7 +4,8 @@ declare const textVariants: (props?: ({
     type?: "h1" | "h2" | "label" | "body-primary" | "body-secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof textVariants> {
+    fontColor?: string | null;
 }
-declare function Text({ className, type, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ className, type, fontColor, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
 export { Text, textVariants };
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;CAAG;AAExC,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAErD;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAEL,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/text.js

@@ -27,7 +27,8 @@ const textVariants = cva("", {
     },
 });
 function Text(_a) {
-    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
-    return _jsx("p", Object.assign({ className: cn(textVariants({ type }), className) }, props));
+    var { className, type, fontColor } = _a, props = __rest(_a, ["className", "type", "fontColor"]);
+    const fontColorOverride = fontColor ? { color: fontColor } : {};
+    return _jsx("p", Object.assign({ className: cn(textVariants({ type }), className), style: fontColorOverride }, props));
 }
 export { Text, textVariants };

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

@@ -4,14 +4,14 @@ import { type VariantProps } from "class-variance-authority";
 declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
 declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
 declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "error" | "warning" | "success" | null | undefined;
+    variant?: "error" | "default" | "warning" | "success" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
 declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type ToastType = "default" | "warning" | "error" | "success";
 declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    type?: "default" | "error" | "warning" | "success" | undefined;
+    type?: "error" | "default" | "warning" | "success" | undefined;
     icon?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;

package/dist/index.d.ts

@@ -1,44 +1,46 @@
-export * from "./components/ui/button";
-export * from "./components/ui/Input/input";
-export * from "./components/ui/aspect-ratio";
+export { cn, cva, getColor } from "./lib/utils";
+export * from "./components/hooks/use-infinite-scroll";
+export * from "./components/hooks/use-products";
+export * from "./components/hooks/use-scroll-direction";
 export * from "./components/ui/accordion";
-export * from "./components/ui/icon";
+export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/badge";
+export * from "./components/ui/button";
 export * from "./components/ui/carousel";
 export * from "./components/ui/checkbox";
+export * from "./components/ui/chip";
+export * from "./components/ui/color-swatch";
 export * from "./components/ui/container";
+export * from "./components/ui/drawer";
+export * from "./components/ui/dropdown";
+export * from "./components/ui/empty-message";
+export * from "./components/ui/favorite";
 export * from "./components/ui/grid";
+export * from "./components/ui/icon";
+export * from "./components/ui/image";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/label";
-export * from "./components/ui/separator";
-export * from "./components/ui/badge";
-export * from "./components/ui/video";
+export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/money";
-export * from "./components/ui/skeleton";
-export * from "./components/ui/text";
-export * from "./components/ui/toggle";
-export * from "./components/ui/toggle-group";
-export * from "./components/ui/switch";
+export * from "./components/ui/price";
+export * from "./components/ui/product-card";
+export * from "./components/ui/quantity-picker";
+export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";
-export * from "./components/ui/slider";
 export * from "./components/ui/selectors";
+export * from "./components/ui/separator";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/subscription";
+export * from "./components/ui/switch";
+export * from "./components/ui/tabs";
+export * from "./components/ui/text";
+export * from "./components/ui/textarea";
 export * from "./components/ui/toast";
 export * from "./components/ui/toaster";
-export * from "./components/ui/chip";
+export * from "./components/ui/toggle-group";
+export * from "./components/ui/toggle";
 export * from "./components/ui/use-toast";
-export * from "./components/ui/drawer";
-export * from "./components/ui/radio-group";
-export * from "./components/ui/tabs";
-export * from "./components/ui/price";
-export * from "./components/ui/favorite";
+export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
-export * from "./components/ui/product-card";
-export * from "./components/ui/dropdown";
-export * from "./components/ui/quantity-picker";
-export * from "./components/hooks/use-infinite-scroll";
-export * from "./components/ui/subscription";
-export * from "./components/ui/line-item-text-icons";
-export * from "./components/ui/textarea";
-export * from "./components/hooks/use-scroll-direction";
-export { cn, cva, getColor } from "./lib/utils";
-export * from "./components/ui/image";
-export * from "./components/ui/empty-message";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sCAAsC,CAAA;AACpD,cAAc,0BAA0B,CAAA;AACxC,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,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"}

package/dist/index.js

@@ -1,44 +1,46 @@
 // component exports
-export * from "./components/ui/button";
-export * from "./components/ui/Input/input";
-export * from "./components/ui/aspect-ratio";
+export { cn, cva, getColor } from "./lib/utils";
+export * from "./components/hooks/use-infinite-scroll";
+export * from "./components/hooks/use-products";
+export * from "./components/hooks/use-scroll-direction";
 export * from "./components/ui/accordion";
-export * from "./components/ui/icon";
+export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/badge";
+export * from "./components/ui/button";
 export * from "./components/ui/carousel";
 export * from "./components/ui/checkbox";
+export * from "./components/ui/chip";
+export * from "./components/ui/color-swatch";
 export * from "./components/ui/container";
+export * from "./components/ui/drawer";
+export * from "./components/ui/dropdown";
+export * from "./components/ui/empty-message";
+export * from "./components/ui/favorite";
 export * from "./components/ui/grid";
+export * from "./components/ui/icon";
+export * from "./components/ui/image";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/label";
-export * from "./components/ui/separator";
-export * from "./components/ui/badge";
-export * from "./components/ui/video";
+export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/money";
-export * from "./components/ui/skeleton";
-export * from "./components/ui/text";
-export * from "./components/ui/toggle";
-export * from "./components/ui/toggle-group";
-export * from "./components/ui/switch";
+export * from "./components/ui/price";
+export * from "./components/ui/product-card";
+export * from "./components/ui/quantity-picker";
+export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";
-export * from "./components/ui/slider";
 export * from "./components/ui/selectors";
+export * from "./components/ui/separator";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/subscription";
+export * from "./components/ui/switch";
+export * from "./components/ui/tabs";
+export * from "./components/ui/text";
+export * from "./components/ui/textarea";
 export * from "./components/ui/toast";
 export * from "./components/ui/toaster";
-export * from "./components/ui/chip";
+export * from "./components/ui/toggle-group";
+export * from "./components/ui/toggle";
 export * from "./components/ui/use-toast";
-export * from "./components/ui/drawer";
-export * from "./components/ui/radio-group";
-export * from "./components/ui/tabs";
-export * from "./components/ui/price";
-export * from "./components/ui/favorite";
+export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
-export * from "./components/ui/product-card";
-export * from "./components/ui/dropdown";
-export * from "./components/ui/quantity-picker";
-export * from "./components/hooks/use-infinite-scroll";
-export * from "./components/ui/subscription";
-export * from "./components/ui/line-item-text-icons";
-export * from "./components/ui/textarea";
-export * from "./components/hooks/use-scroll-direction";
-export { cn, cva, getColor } from "./lib/utils";
-export * from "./components/ui/image";
-export * from "./components/ui/empty-message";

package/dist/styles.css

@@ -800,9 +800,6 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.mb-4 {
-  margin-bottom: 1rem;
-}
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -914,6 +911,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[22px\] {
+  height: 22px;
+}
 .h-\[2px\] {
   height: 2px;
 }
@@ -983,6 +983,9 @@ video {
 .w-\[1px\] {
   width: 1px;
 }
+.w-\[22px\] {
+  width: 22px;
+}
 .w-\[40px\] {
   width: 40px;
 }
@@ -1055,6 +1058,10 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1112,6 +1119,9 @@ video {
   -moz-columns: 3;
        columns: 3;
 }
+.grid-flow-col {
+  grid-auto-flow: column;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1130,6 +1140,9 @@ video {
 .flex-row {
   flex-direction: row;
 }
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -1169,10 +1182,17 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
 .gap-x-\[7px\] {
   -moz-column-gap: 7px;
        column-gap: 7px;
 }
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
 .gap-y-4 {
   row-gap: 1rem;
 }
@@ -1221,6 +1241,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-2xl {
+  border-radius: 1rem;
+}
 .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -1250,15 +1273,27 @@ video {
 .rounded-bl {
   border-bottom-left-radius: 0.25rem;
 }
+.rounded-bl-2xl {
+  border-bottom-left-radius: 1rem;
+}
 .rounded-br {
   border-bottom-right-radius: 0.25rem;
 }
+.rounded-br-2xl {
+  border-bottom-right-radius: 1rem;
+}
 .rounded-tl {
   border-top-left-radius: 0.25rem;
 }
+.rounded-tl-2xl {
+  border-top-left-radius: 1rem;
+}
 .rounded-tr {
   border-top-right-radius: 0.25rem;
 }
+.rounded-tr-2xl {
+  border-top-right-radius: 1rem;
+}
 .border {
   border-width: 1px;
 }
@@ -1385,6 +1420,9 @@ video {
 .bg-fade-right {
   background-image: linear-gradient(to left, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
+.bg-contain {
+  background-size: contain;
+}
 .fill-current {
   fill: currentColor;
 }
@@ -1409,10 +1447,6 @@ video {
 .p-\[1px\] {
   padding: 1px;
 }
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1878,6 +1912,12 @@ video {
 *:hover {
     text-decoration-line: unset !important;
   }
+.\[-ms-overflow-style\:none\] {
+  -ms-overflow-style: none;
+}
+.\[scrollbar-width\:none\] {
+  scrollbar-width: none;
+}
 
 body::-webkit-scrollbar {
   display: none;
@@ -2391,6 +2431,10 @@ body::-webkit-scrollbar {
   color: var(--stateColors-error);
 }
 
+.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+  display: none;
+}
+
 .\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
   border-color: var(--coreColors-brandColorPrimary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -67,6 +67,7 @@
     "next-themes": "^0.2.1",
     "postcss-cli": "^11.0.0",
     "react-intersection-observer": "^9.10.2",
+    "react-svg": "^16.1.34",
     "swr": "^2.2.5",
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",