@tapcart/mobile-components 0.2.12 → 0.3.1

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

@@ -4,27 +4,13 @@ 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";
-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"
-    }
-});
+import { Image } from "./image";
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "./carousel";
 const productCardBadgeVariants = cva("absolute truncate", {
     variants: {
         horizontalPosition: {
@@ -37,7 +23,18 @@ const productCardBadgeVariants = cva("absolute truncate", {
             bottom: "bottom-0 mb-2",
             below: "",
         },
+        imageSwipeEnabled: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            verticalPosition: "bottom",
+            imageSwipeEnabled: true,
+            class: "bottom-[18px]",
+        },
+    ],
 });
 const productCardFavoriteVariants = cva("absolute ", {
     variants: {
@@ -58,22 +55,32 @@ const productCardFavoriteVariants = cva("absolute ", {
             bottom: "",
             below: "",
         },
+        isSoldOut: {
+            true: "",
+            false: "",
+        },
         showSoldOutBadge: {
             true: "",
             false: "",
-        }
+        },
+        imageSwipeEnabled: {
+            true: "",
+            false: "",
+        },
     },
     compoundVariants: [
         {
             iconPosition: "top-left",
             badgeHorizontalPosition: ["start", "center"],
             badgeVerticalPosition: "top",
+            showSoldOutBadge: false,
             class: "top-10",
         },
         {
             iconPosition: "top-right",
             badgeHorizontalPosition: ["end", "center"],
             badgeVerticalPosition: "top",
+            showSoldOutBadge: false,
             class: "top-10",
         },
         {
@@ -93,28 +100,60 @@ const productCardFavoriteVariants = cva("absolute ", {
             showSoldOutBadge: true,
             class: "bottom-10",
         },
+        {
+            iconPosition: ["bottom-left", "bottom-right"],
+            imageSwipeEnabled: true,
+            class: "bottom-[18px]",
+        },
+        {
+            iconPosition: "bottom-left",
+            badgeHorizontalPosition: ["start", "center"],
+            badgeVerticalPosition: "bottom",
+            isSoldOut: false,
+            showSoldOutBadge: false,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
+        {
+            iconPosition: "bottom-right",
+            badgeHorizontalPosition: ["end", "center"],
+            badgeVerticalPosition: "bottom",
+            showSoldOutBadge: false,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
+        {
+            iconPosition: "bottom-left",
+            showSoldOutBadge: true,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
     ],
     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;
-    const ProductImage = ({ src }) => {
-        const productImageClasses = cn(aspectScalingVariants({ aspectRatio: tapcartData.theme.productImages.aspectRatio, scaling: tapcartData.theme.productImages.scaling }));
-        if (src) {
-            return (_jsx("img", { className: productImageClasses, src: src }));
-        }
-        else {
-            return (_jsx("div", { className: `${productImageClasses} bg-neutral-300` }));
-        }
+    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, _16, _17, _18;
+    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 { variants: [variant], images: [{ src }], title } = product;
-    const iconPosition = ((_a = config.favoritesIcon) === null || _a === void 0 ? void 0 : _a.layoutType) || "below-image-on-right";
+    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 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" })] })));
     }
-    const productBadgesPDP = (_b = tapcartData === null || tapcartData === void 0 ? void 0 : tapcartData["product-badges"]) === null || _b === void 0 ? void 0 : _b.pdp;
+    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];
@@ -126,22 +165,82 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
     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 && !((_c = config.quickAdd) === null || _c === void 0 ? void 0 : _c.enabled);
-    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full" }, { children: [((_d = config.productImage) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
+    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);
+    const imageSwipeEnabled = (((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.allowSwipeability) && product.images.length > 1);
+    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
+                _openProduct();
+            } }, { children: [((_f = config.productImage) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
                         borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
                         borderTopRightRadius: `${config.productImage.cornerRadius}px`,
-                    } }, { children: [_jsx(ProductImage, { src: src }), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                        borderBottomLeftRadius: `${((_g = config.quickAdd) === null || _g === void 0 ? void 0 : _g.enabled) ? "0" : config.productImage.cornerRadius}px`,
+                        borderBottomRightRadius: `${((_h = config.quickAdd) === null || _h === void 0 ? void 0 : _h.enabled) ? "0" : config.productImage.cornerRadius}px`,
+                    } }, { children: [imageSwipeEnabled ? (_jsx(Carousel, Object.assign({ className: "w-full max-w-xs overflow-hidden relative" }, { children: _jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx(CarouselContent, Object.assign({ className: "" }, { children: product.images.map((image, index) => {
+                                            var _a, _b, _c, _d;
+                                            return (_jsx(CarouselItem, Object.assign({ className: "pl-0" }, { children: _jsx(Image, { alt: product.title, aspectRatio: (_b = (_a = tapcartData.theme) === null || _a === void 0 ? void 0 : _a.productImages) === null || _b === void 0 ? void 0 : _b.aspectRatio, data: image, sizes: sizes, objectFit: (_d = (_c = tapcartData.theme) === null || _c === void 0 ? void 0 : _c.productImages) === null || _d === void 0 ? void 0 : _d.scaling }) })));
+                                        }) })), _jsx(CarouselDots, { className: "absolute left-0 w-full bottom-2" })] })) }))) : (_jsx(Image, { alt: product.title, aspectRatio: (_k = (_j = tapcartData.theme) === null || _j === void 0 ? void 0 : _j.productImages) === null || _k === void 0 ? void 0 : _k.aspectRatio, data: product.featuredImage || product.images[0], sizes: sizes, objectFit: (_m = (_l = tapcartData.theme) === null || _l === void 0 ? void 0 : _l.productImages) === null || _m === void 0 ? void 0 : _m.scaling })), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
                                 verticalPosition: aboveBadge.verticalPosition,
                                 horizontalPosition: aboveBadge.horizontalPosition,
+                                imageSwipeEnabled,
                             })), 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" }))), ((_e = config.favoritesIcon) === null || _e === void 0 ? void 0 : _e.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: ((_g = (_f = config.favoritesIcon) === null || _f === void 0 ? void 0 : _f.icon) === null || _g === void 0 ? void 0 : _g.type) === "internal" ? (_j = (_h = config.favoritesIcon) === null || _h === void 0 ? void 0 : _h.icon) === null || _j === void 0 ? void 0 : _j.url : undefined }))] }))), ((_k = config.quickAdd) === null || _k === void 0 ? void 0 : _k.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
+                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                                verticalPosition: "bottom",
+                                horizontalPosition: "start",
+                                imageSwipeEnabled,
+                            }), "bg-stateColors-disabled"), alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_o = config.favoritesIcon) === null || _o === void 0 ? void 0 : _o.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,
+                                isSoldOut: !product.availableForSale,
+                                showSoldOutBadge,
+                                imageSwipeEnabled
+                            })), selected: favorited, onClick: (e) => {
+                                onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
+                            }, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
+                                ? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
+                                : undefined }))] }))), ((_t = config.quickAdd) === null || _t === void 0 ? void 0 : _t.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": (_l = config.quickAdd) === null || _l === void 0 ? void 0 : _l.uppercase }, { "text-left": ((_m = config.quickAdd) === null || _m === void 0 ? void 0 : _m.textAlignment) === "left" }, { "text-right": ((_o = config.quickAdd) === null || _o === void 0 ? void 0 : _o.textAlignment) === "right" }, { "text-center": ((_p = config.quickAdd) === null || _p === void 0 ? void 0 : _p.textAlignment) === "center" }), labelStyle: { fontSize: (_q = config.quickAdd) === null || _q === void 0 ? void 0 : _q.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
+                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.uppercase }, { "text-left": ((_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.textAlignment) === "left" }, { "text-right": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "right" }, { "text-center": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "center" }), labelStyle: { fontSize: (_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.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 })) }))), ((_r = config.productTitle) === null || _r === void 0 ? void 0 : _r.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ "uppercase": (_s = config.productTitle) === null || _s === void 0 ? void 0 : _s.uppercase }, { "text-left": ((_t = config.productTitle) === null || _t === void 0 ? void 0 : _t.textAlignment) === "left" }, { "text-right": ((_u = config.productTitle) === null || _u === void 0 ? void 0 : _u.textAlignment) === "right" }, { "text-center": ((_v = config.productTitle) === null || _v === void 0 ? void 0 : _v.textAlignment) === "center" }, { "truncate": !((_w = config.productTitle) === null || _w === void 0 ? void 0 : _w.wrapText) }, { "text-wrap": (_x = config.productTitle) === null || _x === void 0 ? void 0 : _x.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_y = config.productTitle) === null || _y === void 0 ? void 0 : _y.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_z = config.price) === null || _z === void 0 ? void 0 : _z.textAlignment) === "left" }, { "justify-end": ((_0 = config.price) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "right" }, { "justify-center": ((_1 = config.price) === null || _1 === void 0 ? void 0 : _1.textAlignment) === "center" }) }, { children: [((_2 = config.price) === null || _2 === void 0 ? void 0 : _2.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice && (variant.compareAtPrice && parseFloat((_3 = variant.compareAtPrice) === null || _3 === void 0 ? void 0 : _3.amount) > parseFloat(variant.price.amount)), compareAtPrice: variant.compareAtPrice && parseFloat((_4 = variant.compareAtPrice) === null || _4 === void 0 ? void 0 : _4.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_5 = config.price) === null || _5 === void 0 ? void 0 : _5.fontSize })), ((_6 = config.favoritesIcon) === null || _6 === void 0 ? void 0 : _6.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: ((_8 = (_7 = config.favoritesIcon) === null || _7 === void 0 ? void 0 : _7.icon) === null || _8 === void 0 ? void 0 : _8.type) === "internal" ? (_10 = (_9 = config.favoritesIcon) === null || _9 === void 0 ? void 0 : _9.icon) === null || _10 === void 0 ? void 0 : _10.url : undefined }) })))] }))] }))] })) })));
+                    } }, { 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 })) }))), ((_z = config.productTitle) === null || _z === void 0 ? void 0 : _z.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.uppercase }, {
+                                    "text-left": ((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.textAlignment) === "left",
+                                }, {
+                                    "text-right": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "right",
+                                }, {
+                                    "text-center": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "center",
+                                }, { truncate: !((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.wrapText) }, { "text-wrap": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.textAlignment) === "left" }, { "justify-end": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "right" }, { "justify-center": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "center" }) }, { children: [((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                        variant.compareAtPrice &&
+                                        parseFloat((_11 = variant.compareAtPrice) === null || _11 === void 0 ? void 0 : _11.amount) >
+                                            parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
+                                        parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_13 = config.price) === null || _13 === void 0 ? void 0 : _13.fontSize })), ((_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.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: ((_16 = (_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.icon) === null || _16 === void 0 ? void 0 : _16.type) === "internal"
+                                            ? (_18 = (_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.url
+                                            : undefined }) })))] }))] }))] })) })));
 };
 export { ProductCard };

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

@@ -37,7 +37,7 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-s
 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" }), _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", 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)] }))) }))) })));
+    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/selectors.d.ts

@@ -23,7 +23,7 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
 } & React.RefAttributes<HTMLButtonElement>>;
 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,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,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,7 +10,7 @@ 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";
@@ -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: {
@@ -38,8 +38,24 @@ const Selectors = React.forwardRef((_a, ref) => {
             disabled,
         }), "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))) })));
+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/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: "",

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"}

package/dist/components/ui/subscription.js

@@ -0,0 +1,24 @@
+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 { Text } from "./text";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const Subscription = React.forwardRef((_a, ref) => {
+    var { imgUrl, name, oldPrice, newPrice, savePercentage = true, selected = false, type = "subscription", onClick, className } = _a, props = __rest(_a, ["imgUrl", "name", "oldPrice", "newPrice", "savePercentage", "selected", "type", "onClick", "className"]);
+    return (_jsxs("button", Object.assign({ className: cn("flex flex-row p-4 gap-2 w-full border-b border-coreColors-dividingLines", selected ? "bg-stateColors-skeleton" : "", className), ref: ref, onClick: onClick }, props, { children: [type == "subscription" && (_jsx(Icon, { name: "repeat", size: "sm", color: "stateColors-subscriptions", className: "my-auto" })), _jsxs("div", Object.assign({ className: "flex flex-col w-full items-start overflow-hidden" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-primaryColor truncate w-full text-left" }, { children: name })), type == "subscription" && savePercentage && newPrice ? (_jsxs(Text, Object.assign({ type: "body-secondary", className: "text-stateColors-subscriptions" }, { children: ["Save ", 100 - (newPrice * 100) / oldPrice, "%"] }))) : null] })), _jsxs("div", Object.assign({ className: "flex flex-row items-start gap-2" }, { children: [type == "subscription" && newPrice ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-salePriceText" }, { children: `$${newPrice.toFixed(2)}` }))) : null, _jsx(Text, Object.assign({ type: "body-primary", className: `${type == "subscription"
+                            ? "line-through hover:!line-through text-textColors-strikethroughPriceText"
+                            : "text-textColors-priceText"}` }, { children: `$${oldPrice.toFixed(2)}` }))] }))] })));
+});
+Subscription.displayName = "Subscription";
+export { Subscription };

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAI1D,QAAA,MAAM,MAAM,8JAkBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAI1D,QAAA,MAAM,MAAM,8JAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/switch.js

@@ -15,8 +15,8 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils";
 const Switch = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className) }, props, { ref: ref }, { children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) })));
+    var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ onClick: onClick, className: cn("peer inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-stateColors-success data-[state=unchecked]:bg-stateColors-disabled", className) }, props, { ref: ref }, { children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-7 w-7 rounded-full bg-coreColors-pageColor drop-shadow-[0_3px_1px_0_rgba(0,0,0,1)] ring-0 transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0") }) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/components/ui/tabs.js

@@ -15,7 +15,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Text } from "./text";
-const tabVariants = cva("flex items-center justify-center px-4 py-2 w-full", {
+const tabVariants = cva("flex items-center justify-center px-4 py-2 w-full active:opacity-70", {
     variants: {
         isActive: {
             true: "[&>p]:text-textColors-primaryColor",

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAarB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,QAAQ,2FA6Eb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}