@tapcart/mobile-components 0.2.11 → 0.3.0

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

@@ -1,40 +1,200 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Text } from "@/components/ui/text";
-import { Price } from "@/components/ui/price";
-import { Icon } from "@/components/ui/icon";
-import { Skeleton } from "@/components/ui/skeleton";
-const positionClasses = {
-    topLeft: "absolute top-0 left-0 mt-2",
-    topRight: "absolute top-0 right-0 mt-2",
-    bottomLeft: "absolute bottom-0 left-0 mb-2",
-    bottomRight: "absolute bottom-0 right-0 mb-2",
-};
-var BadgeAlignment;
-(function (BadgeAlignment) {
-    BadgeAlignment["Left"] = "left";
-    BadgeAlignment["Right"] = "right";
-    BadgeAlignment["FullWidth"] = "full-width";
-})(BadgeAlignment || (BadgeAlignment = {}));
-const badgeAlignmentClasses = {
-    topLeft: BadgeAlignment.Left,
-    topRight: BadgeAlignment.Right,
-    bottomLeft: BadgeAlignment.Left,
-    bottomRight: BadgeAlignment.Right,
-};
-const ProductCard = ({ product, scaling, className, badge, icon, quickAdd, openProduct, isQuickAddProductEnabled, isLoading, }) => {
-    const { variants: [variant], images: [{ src }], title } = product;
-    const badgePosition = (badge === null || badge === void 0 ? void 0 : badge.position) || "topRight";
-    const iconPosition = (icon === null || icon === void 0 ? void 0 : icon.position) || "bottomRight";
-    const scalingClass = scaling === "fit" ? "object-contain" : "object-cover";
+import { Badge } from "./badge";
+import { Favorite } from "./favorite";
+import { Button } from "./button";
+import { Text } from "./text";
+import * as React from "react";
+import { Price } from "./price";
+import { Skeleton } from "./skeleton";
+import { cn } from "../../lib/utils";
+import { cva } from "class-variance-authority";
+import { Image } from "./image";
+const aspectScalingVariants = cva("w-full", {
+    variants: {
+        aspectRatio: {
+            "1:1": "aspect-square",
+            "2:3": "aspect-[2/3]",
+            "4:5": "aspect-[4/5]",
+        },
+        scaling: {
+            fill: "object-cover",
+            fit: "object-contain",
+        },
+    },
+    defaultVariants: {
+        aspectRatio: "2:3",
+        scaling: "fill",
+    },
+});
+const productCardBadgeVariants = cva("absolute truncate", {
+    variants: {
+        horizontalPosition: {
+            start: "left-0",
+            end: "right-0",
+            center: "",
+        },
+        verticalPosition: {
+            top: "top-0 mt-2",
+            bottom: "bottom-0 mb-2",
+            below: "",
+        },
+    },
+});
+const productCardFavoriteVariants = cva("absolute ", {
+    variants: {
+        iconPosition: {
+            "top-left": "top-0 left-2 mt-2",
+            "top-right": "top-0 right-2 mt-2",
+            "bottom-left": "bottom-0 left-2 mb-2",
+            "bottom-right": "bottom-0 right-2 mb-2",
+            "below-image-on-right": "",
+        },
+        badgeHorizontalPosition: {
+            start: "",
+            end: "",
+            center: "",
+        },
+        badgeVerticalPosition: {
+            top: "",
+            bottom: "",
+            below: "",
+        },
+        showSoldOutBadge: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            iconPosition: "top-left",
+            badgeHorizontalPosition: ["start", "center"],
+            badgeVerticalPosition: "top",
+            class: "top-10",
+        },
+        {
+            iconPosition: "top-right",
+            badgeHorizontalPosition: ["end", "center"],
+            badgeVerticalPosition: "top",
+            class: "top-10",
+        },
+        {
+            iconPosition: "bottom-left",
+            badgeHorizontalPosition: ["start", "center"],
+            badgeVerticalPosition: "bottom",
+            class: "bottom-10",
+        },
+        {
+            iconPosition: "bottom-right",
+            badgeHorizontalPosition: ["end", "center"],
+            badgeVerticalPosition: "bottom",
+            class: "bottom-10",
+        },
+        {
+            iconPosition: "bottom-left",
+            showSoldOutBadge: true,
+            class: "bottom-10",
+        },
+    ],
+    defaultVariants: {
+        iconPosition: "below-image-on-right",
+    },
+});
+const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+    const { variants, images, title, tags } = product;
+    // Select the variant that has the lowest price that is available or just the lowest price if none are available
+    let searchVariants = variants.filter((variant) => variant.available);
+    if (searchVariants.length === 0) {
+        searchVariants = variants;
+    }
+    const variant = searchVariants.reduce((lowest, current) => {
+        return current.price.amount < lowest.price.amount ? current : lowest;
+    });
+    const src = ((_a = images[0]) === null || _a === void 0 ? void 0 : _a.url) || "";
+    const [isSelected, setIsSelected] = React.useState(false);
+    const handleFavoriteClick = () => {
+        setIsSelected((prevState) => !prevState);
+    };
+    const iconPosition = ((_b = config.favoritesIcon) === null || _b === void 0 ? void 0 : _b.layoutType) || "below-image-on-right";
     if (isLoading) {
-        return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsx(Skeleton, { className: "w-full h-64" }, void 0), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2" }, void 0), _jsx(Skeleton, { className: "h-6 w-3/4 mt-2" }, void 0)] }), void 0));
+        return (_jsxs("div", Object.assign({ className: "w-1/2 rounded" }, { children: [_jsx(Skeleton, { className: "w-full h-64 rounded" }), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2 rounded" }), _jsx(Skeleton, { className: "h-4 w-full mt-2 rounded" })] })));
     }
-    return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("img", { className: `w-full h-full ${scalingClass} ${isQuickAddProductEnabled ? "rounded-t-lg rounded-b-none" : "rounded-lg"}`, src: src }, void 0), badge && (_jsx(Badge, Object.assign({ size: "plp-layout", icon: "currency-dollar", className: positionClasses[badgePosition], alignment: badgeAlignmentClasses[badgePosition] }, { children: badge.text }), void 0)), icon && (_jsx(Icon, { name: "HeartFilled", className: positionClasses[iconPosition], color: "stateColors-favorites" }, void 0))] }), void 0), isQuickAddProductEnabled && (_jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => {
-                    e.stopPropagation();
-                    quickAdd(e, product);
-                } }, { children: "+ Quick add" }), void 0)), _jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: "USD", locale: "en-US" }, void 0), _jsx(Text, Object.assign({ className: "text-textColors-productTitle" }, { children: title }), void 0)] }), void 0));
+    const productBadgesPDP = (_c = tapcartData === null || tapcartData === void 0 ? void 0 : tapcartData["product-badges"]) === null || _c === void 0 ? void 0 : _c.pdp;
+    const aboveBadgeKeys = Object.keys(productBadgesPDP).filter((key) => key !== "below");
+    const aboveBadges = aboveBadgeKeys.flatMap((key) => {
+        const badges = productBadgesPDP === null || productBadgesPDP === void 0 ? void 0 : productBadgesPDP[key];
+        return badges === null || badges === void 0 ? void 0 : badges.map((badge) => {
+            return Object.assign(Object.assign({}, badge), { verticalPosition: key });
+        });
+    });
+    // assumption is that only one badge can exist at a time, so we can just return the first one.
+    const aboveBadge = aboveBadges.length ? aboveBadges[0] : null;
+    const belowBadges = productBadgesPDP.below;
+    const belowBadge = (belowBadges === null || belowBadges === void 0 ? void 0 : belowBadges.length) ? belowBadges[0] : null;
+    const showSoldOutBadge = !product.availableForSale && !((_d = config.quickAdd) === null || _d === void 0 ? void 0 : _d.enabled);
+    // Remove Shopify GID info from product id
+    const productId = product.id;
+    const variantId = variant.id;
+    // Prepare Product Open
+    const _openProduct = () => openProduct === null || openProduct === void 0 ? void 0 : openProduct({ productId, variantId });
+    const getImageSizes = (config) => {
+        switch (config.gridLayout) {
+            case "1x1":
+                return "100vw";
+            case "2x2":
+                return "50vw";
+            case "3x3":
+                return "33vw";
+            default:
+                return "100vw";
+        }
+    };
+    const sizes = getImageSizes(config);
+    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
+                _openProduct();
+            } }, { children: [((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
+                        borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
+                        borderTopRightRadius: `${config.productImage.cornerRadius}px`,
+                    } }, { children: [_jsx(Image, { alt: product.title, aspectRatio: (_g = (_f = tapcartData.theme) === null || _f === void 0 ? void 0 : _f.productImages) === null || _g === void 0 ? void 0 : _g.aspectRatio, data: product.featuredImage || product.images[0], sizes: sizes, objectFit: (_j = (_h = tapcartData.theme) === null || _h === void 0 ? void 0 : _h.productImages) === null || _j === void 0 ? void 0 : _j.scaling }), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                                verticalPosition: aboveBadge.verticalPosition,
+                                horizontalPosition: aboveBadge.horizontalPosition,
+                            })), style: {
+                                color: aboveBadge.fontColor,
+                                backgroundColor: aboveBadge.backgroundColor,
+                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: "absolute left-0 bottom-0 mb-2 bg-stateColors-disabled", alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_k = config.favoritesIcon) === null || _k === void 0 ? void 0 : _k.enabled) &&
+                            iconPosition !== "below-image-on-right" && (_jsx(Favorite, { className: cn(productCardFavoriteVariants({
+                                iconPosition,
+                                badgeHorizontalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.horizontalPosition,
+                                badgeVerticalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.verticalPosition,
+                                showSoldOutBadge,
+                            })), selected: favorited, onClick: (e) => {
+                                onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
+                            }, icon: ((_m = (_l = config.favoritesIcon) === null || _l === void 0 ? void 0 : _l.icon) === null || _m === void 0 ? void 0 : _m.type) === "internal"
+                                ? (_p = (_o = config.favoritesIcon) === null || _o === void 0 ? void 0 : _o.icon) === null || _p === void 0 ? void 0 : _p.url
+                                : undefined }))] }))), ((_q = config.quickAdd) === null || _q === void 0 ? void 0 : _q.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: (_r = config.quickAdd) === null || _r === void 0 ? void 0 : _r.uppercase }, { "text-left": ((_s = config.quickAdd) === null || _s === void 0 ? void 0 : _s.textAlignment) === "left" }, { "text-right": ((_t = config.quickAdd) === null || _t === void 0 ? void 0 : _t.textAlignment) === "right" }, { "text-center": ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.textAlignment) === "center" }), labelStyle: { fontSize: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.fontSize }, variant: "quickadd", size: "default", 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", {
+                                "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 })) }))), ((_w = config.productTitle) === null || _w === void 0 ? void 0 : _w.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_x = config.productTitle) === null || _x === void 0 ? void 0 : _x.uppercase }, {
+                                    "text-left": ((_y = config.productTitle) === null || _y === void 0 ? void 0 : _y.textAlignment) === "left",
+                                }, {
+                                    "text-right": ((_z = config.productTitle) === null || _z === void 0 ? void 0 : _z.textAlignment) === "right",
+                                }, {
+                                    "text-center": ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "center",
+                                }, { truncate: !((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.wrapText) }, { "text-wrap": (_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_4 = config.price) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "left" }, { "justify-end": ((_5 = config.price) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "right" }, { "justify-center": ((_6 = config.price) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "center" }) }, { children: [((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                        variant.compareAtPrice &&
+                                        parseFloat((_8 = variant.compareAtPrice) === null || _8 === void 0 ? void 0 : _8.amount) >
+                                            parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
+                                        parseFloat((_9 = variant.compareAtPrice) === null || _9 === void 0 ? void 0 : _9.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_10 = config.price) === null || _10 === void 0 ? void 0 : _10.fontSize })), ((_11 = config.favoritesIcon) === null || _11 === void 0 ? void 0 : _11.enabled) &&
+                                    config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
+                                            onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
+                                        }, size: "small", icon: ((_13 = (_12 = config.favoritesIcon) === null || _12 === void 0 ? void 0 : _12.icon) === null || _13 === void 0 ? void 0 : _13.type) === "internal"
+                                            ? (_15 = (_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.icon) === null || _15 === void 0 ? void 0 : _15.url
+                                            : undefined }) })))] }))] }))] })) })));
 };
 export { ProductCard };

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

@@ -1,4 +1,4 @@
-declare type Product = any;
+type Product = any;
 interface PageData {
     products: Product[];
     cursorBlob?: string;

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

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

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

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

package/dist/components/ui/quantity-picker.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    decreaseIcon: string;
+    increaseIcon: string;
+    deleteIcon: string;
+    onDecreaseClick: React.ReactEventHandler;
+    onIncreaseClick: React.ReactEventHandler;
+    value: number;
+    setValue: (_: number) => void;
+    className?: string;
+}
+declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPicker };
+//# sourceMappingURL=quantity-picker.d.ts.map

package/dist/components/ui/quantity-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,QAAA,MAAM,cAAc,4FAyCnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/quantity-picker.js

@@ -0,0 +1,23 @@
+"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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const IconButton = ({ icon, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-8 w-8 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { name: icon, size: "sm", color: "coreColors-secondaryIcon" }) })));
+const QuantityPicker = React.forwardRef((_a, ref) => {
+    var { className, decreaseIcon, increaseIcon, deleteIcon, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIcon", "increaseIcon", "deleteIcon", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
+    return (_jsxs("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: [_jsx(IconButton, { handler: onDecreaseClick, icon: value === 1 ? deleteIcon : decreaseIcon, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-12 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-coreColors-dividingLines text-[15px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center" }) })), _jsx(IconButton, { handler: onIncreaseClick, icon: increaseIcon, className: "rounded-tr rounded-br" })] })));
+});
+QuantityPicker.displayName = "QuantityPicker";
+export { QuantityPicker };

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

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

package/dist/components/ui/scroll-area.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-declare type Orientation = "horizontal" | "vertical";
+type Orientation = "horizontal" | "vertical";
 declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     orientation?: Orientation | undefined;

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,aAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAE5C,QAAA,MAAM,UAAU,+JAed,CAAA;AAGF,QAAA,MAAM,SAAS;;wCAuBb,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAE5C,QAAA,MAAM,UAAU,+JAed,CAAA;AAGF,QAAA,MAAM,SAAS;;wCAuBb,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

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

@@ -16,14 +16,14 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils";
 const ScrollArea = React.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: "flex w-max px-[16px]" }, { children: children }), void 0) }), void 0), _jsx(ScrollBar, {}, void 0), _jsx(ScrollAreaPrimitive.Corner, {}, void 0)] }), void 0));
+    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ ref: ref, className: cn("relative overflow-hidden", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, Object.assign({ className: "h-full w-full rounded-[inherit]" }, { children: _jsx("div", Object.assign({ className: "flex w-max px-[16px]" }, { children: children })) })), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef((_a, ref) => {
     var { className, orientation = "horizontal" } = _a, props = __rest(_a, ["className", "orientation"]);
     return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, Object.assign({ ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
             "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
-            "h-2.5 flex-col border-t border-t-transparent p-[1px] ", className) }, props, { children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }, void 0) }), void 0));
+            "h-2.5 flex-col border-t border-t-transparent p-[1px] ", className) }, props, { children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
 });
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 export { ScrollArea, ScrollBar };

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

@@ -4,7 +4,7 @@ declare const selectorsVariants: (props?: ({
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare type SelectorsProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof selectorsVariants> & {
+type SelectorsProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof selectorsVariants> & {
     disabled?: boolean;
     selected?: boolean;
     label?: string;
@@ -21,9 +21,9 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
     key?: string | undefined;
     onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-declare type SelectorContainerProps = {
+type SelectorContainerProps = {
     children: React.ReactElement<SelectorsProps>[];
-    containerRef: React.RefObject<HTMLButtonElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
 };
 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;AAED,aAAK,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;2CA6BpE,CAAA;AACD,aAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACjD,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAQvD,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,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;2CA6BpE,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;CAC9C,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/selectors.js

@@ -10,10 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 import { Text } from "./text";
 const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pageColor flex-row justify-center outline outline-1 rounded text-textColors-primaryColor outline-coreColors-dividingLines items-center", {
     variants: {
@@ -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",
+            false: "cursor-pointer active:outline-coreColors-brandColorPrimary active:opacity-70",
         },
     },
     defaultVariants: {
@@ -36,10 +36,26 @@ const Selectors = React.forwardRef((_a, ref) => {
             selected: selected,
             className,
             disabled,
-        }), "group"), ref: ref }, props, { children: _jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }), void 0) }), void 0));
+        }), "group"), ref: ref }, props, { children: _jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label })) })));
 });
-const SelectorContainer = ({ children }) => {
-    return (_jsx("div", Object.assign({ className: "flex gap-2 px-1 h-[42px] items-center overflow-x-auto" }, { children: children.map((chip, index) => (_jsx("div", { children: chip }, index))) }), void 0));
+const SelectorContainer = ({ children, containerRef, }) => {
+    const [showFadeLeft, setShowFadeLeft] = React.useState(false);
+    const [showFadeRight, setShowFadeRight] = React.useState(false);
+    const checkOverflow = () => {
+        const { scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+        setShowFadeLeft(scrollLeft > 0);
+        setShowFadeRight(scrollLeft + clientWidth < scrollWidth);
+    };
+    React.useEffect(() => {
+        const handleResize = () => checkOverflow();
+        window.addEventListener("resize", handleResize);
+        checkOverflow();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    React.useEffect(() => {
+        checkOverflow();
+    }, [children]);
+    return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: "flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", 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/separator.js

@@ -16,7 +16,7 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../lib/utils";
 const Separator = React.forwardRef((_a, ref) => {
     var { className, orientation = "horizontal", decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
-    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props), void 0));
+    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props)));
 });
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 export { Separator };

package/dist/components/ui/skeleton.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-const skeletonVariants = cva("animate-pulse flex bg-stateColors-skeleton h-10 w-10 rounded-[4px]", {
+const skeletonVariants = cva("animate-pulse flex bg-stateColors-skeleton rounded-[4px]", {
     variants: {
         variant: {
             line: "",
@@ -28,6 +28,6 @@ function Skeleton(_a) {
             width: width,
             height: height,
             borderRadius: variant === "rectangular" ? borderRadius : "",
-        } }, props), void 0));
+        } }, props)));
 }
 export { Skeleton };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "onChange"> {
+    className?: string;
+    defaultValue: number[];
+    value: number[];
+    step: number;
+    max: number;
+    min?: number;
+    onChange: (value: number[]) => void;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3D,UAAU,CACX;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,KAAK,EAAE,MAAM,EAAE,CAAA;IAEf,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACpC;AAED,QAAA,MAAM,MAAM,qFAmHX,CAAA;AAID,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/slider.js

@@ -0,0 +1,50 @@
+"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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils";
+import { Input } from "./input";
+const Slider = React.forwardRef((_a, ref) => {
+    var { className, max, min = 0, step = 1, defaultValue, value, onChange } = _a, 
+    // doubleValue = false,
+    props = __rest(_a, ["className", "max", "min", "step", "defaultValue", "value", "onChange"]);
+    const doubleValue = false;
+    const handleCommit = (value) => {
+        onChange(value);
+        if (props.onValueChange) {
+            props.onValueChange(value);
+        }
+    };
+    const useDebounce = (value, delay) => {
+        const [debouncedValue, setDebouncedValue] = React.useState(value);
+        React.useEffect(() => {
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+            return () => {
+                clearTimeout(handler);
+            };
+        }, [value, delay]);
+        return debouncedValue;
+    };
+    const debouncedSliderVal = useDebounce(value, 200);
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mt-3 mb-6" }, { children: _jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("flex relative h-0.5 w-auto items-center select-none", className), onValueChange: (value) => onChange(value), onValueCommit: (value) => {
+                        handleCommit(value);
+                    }, defaultValue: defaultValue, value: value, max: max, min: min, step: step }, props, { children: [_jsx(SliderPrimitive.Track, Object.assign({ className: "relative h-1 rounded w-full grow overflow-hidden bg-coreColors-dividingLines" }, { children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-coreColors-brandColorPrimary" }) })), _jsx(SliderPrimitive.Thumb, { className: "block hover:slider-thumb h-4 w-4 rounded-full border-2 border-coreColors-brandColorPrimary bg-coreColors-modalBackground focus-visible:outline-none hover:h-[18px] hover:w-[18px] disabled:pointer-events-none" })] })) })), _jsxs("div", Object.assign({ className: "flex w-auto gap-4 " }, { children: [doubleValue && doubleValue == true ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "w-full px-4 py-2 border bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Minimum" })), _jsxs("div", Object.assign({ className: "flex text-textColors-primaryColor text-[15px]" }, { children: ["$", min] }))] })) })), _jsx("div", { className: "w-4 h-0 self-center border-2 bg-coreColors-dividingLines" })] })) : (""), _jsx("div", Object.assign({ className: "w-full px-4 py-2 outline outline-1 outline-coreColors-dividingLines rounded bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "flex items-center h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Maximum" })), _jsxs("div", Object.assign({ className: "flex h-6 text-textColors-primaryColor text-[15px] w-full [&>div]:w-full" }, { children: ["$", _jsx(Input, { className: "border-0 p-0 h-full w-full text-[15px]", id: "slider-maximum", value: debouncedSliderVal[0].toString(), placeholder: defaultValue[0].toString(), onChange: (value) => {
+                                                const inputValue = Number(value);
+                                                inputValue > max ? onChange([max]) : onChange([inputValue]);
+                                            } })] }))] })) }))] }))] }));
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface SubscriptionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    imgUrl?: string;
+    name: string;
+    oldPrice: number;
+    type: "subscription" | "one-time";
+    newPrice: number;
+    selected?: boolean;
+    onClick?: () => void;
+    className?: string;
+    savePercentage?: boolean;
+}
+declare const Subscription: React.ForwardRefExoticComponent<SubscriptionProps & React.RefAttributes<HTMLButtonElement>>;
+export { Subscription };
+//# sourceMappingURL=subscription.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subscription.d.ts","sourceRoot":"","sources":["../../../components/ui/subscription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,cAAc,GAAG,UAAU,CAAA;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,QAAA,MAAM,YAAY,6FAsEjB,CAAA;AAID,OAAO,EAAE,YAAY,EAAE,CAAA"}