@tapcart/mobile-components 0.2.12 → 0.3.1

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

@@ -0,0 +1,157 @@
+import * as React from "react";
+import type { PartialDeep } from "type-fest";
+import type { Image as ImageType } from "app-studio-types";
+type SrcSetOptions = {
+    intervals: number;
+    startingWidth: number;
+    incrementSize: number;
+    placeholderWidth: number;
+};
+export type LoaderParams = {
+    src?: ImageType["url"];
+    width?: number;
+    height?: number;
+    crop?: Crop;
+    isContained?: boolean;
+};
+export type Loader = (params: LoaderParams) => string;
+type Crop = "center" | "top" | "bottom" | "left" | "right";
+export type TapcartImageProps = React.ComponentPropsWithRef<"img"> & TapcartImageBaseProps;
+type TapcartImageBaseProps = {
+    /** The aspect ratio of the image, in the format of `width/height`.
+     *
+     * @example
+     * ```
+     * <Image data={productImage} aspectRatio="4/5" />
+     * ```
+     */
+    aspectRatio?: string;
+    /** The crop position of the image.
+     *
+     * @remarks
+     * In the event that AspectRatio is set, without specifying a crop,
+     * the Shopify CDN won't return the expected image.
+     *
+     * @defaultValue `center`
+     */
+    crop?: Crop;
+    data?: PartialDeep<ImageType, {
+        recurseIntoArrays: true;
+    }>;
+    /** A function that returns a URL string for an image.
+     *
+     * @remarks
+     * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide
+     * your own function to use a another provider, as long as they support URL based image transformations.
+     */
+    loader?: Loader;
+    /** An optional prop you can use to change the default srcSet generation behaviour */
+    srcSetOptions?: SrcSetOptions;
+    /** An optional prop to set the fill behavior of the image. Defaults to "cover"
+     *
+     * @remarks
+     * "fit" maps to `object-fit: contain`
+     * "fill" maps to `object-fit: cover`
+     */
+    objectFit?: "fit" | "fill" | "cover" | "contain" | "none" | "scale-down";
+};
+/**
+ * Tapcart’s Image component is a wrapper around the HTML image element.
+ * It supports the same props as the HTML `img` element, but automatically
+ * generates the srcSet and sizes attributes for you. For most use cases,
+ * you’ll want to set the `aspectRatio` prop to ensure the image is sized
+ * correctly.
+ *
+ * @remarks
+ * - `decoding` is set to `async` by default.
+ * - `loading` is set to `lazy` by default.
+ * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
+ * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
+ *
+ * @example
+ * A responsive image with a 4:5 aspect ratio:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   aspectRatio="4:5"
+ *   sizes="(min-width: 45em) 40vw, 100vw"
+ * />
+ * ```
+ * @example
+ * A fixed size image:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   width={100}
+ *   height={100}
+ * />
+ * ```
+ *
+ * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<TapcartImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/**
+ * The shopifyLoader function is a simple utility function that takes a src, width,
+ * height, and crop and returns a string that can be used as the src for an image.
+ * It can be used with the Tapcart Image component or with the next/image component.
+ * (or any others that accept equivalent configuration)
+ * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
+ * @param width - The width of the image, e.g. `100`
+ * @param height - The height of the image, e.g. `100`
+ * @param crop - The crop of the image, e.g. `center`
+ * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
+ *
+ * @example
+ * ```
+ * shopifyLoader({
+ *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+ *   width: 100,
+ *   height: 100,
+ *   crop: 'center',
+ * })
+ * ```
+ */
+export declare function shopifyLoader({ src, width, height, crop, isContained, }: LoaderParams): string;
+/**
+ * This function generates a srcSet for Shopify images.
+ * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
+ * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
+ * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+ * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
+ */
+export declare function generateSrcSet(src?: string, sizesArray?: Array<{
+    width?: number;
+    height?: number;
+    crop?: Crop;
+}>, loader?: Loader, isContained?: boolean): string;
+/**
+ * This function generates an array of sizes for Shopify images, for both fixed and responsive images.
+ * @param width - The CSS width of the image
+ * @param intervals - The number of intervals to generate
+ * @param startingWidth - The starting width of the image
+ * @param incrementSize - The size of each interval
+ * @returns An array of widths
+ */
+export declare function generateImageWidths(width: string | number | undefined, intervals: number, startingWidth: number, incrementSize: number): number[];
+/**
+ * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1:1`, not `0.5`, or `auto`
+ * @param aspectRatio - The aspect ratio of the image, e.g. `1:1`
+ * @returns The aspect ratio as a number, e.g. `1`
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
+ */
+export declare function parseAspectRatio(aspectRatio?: string): number | undefined;
+/**
+ * Generate sizes for Imagery loader
+ * @param imageWidths
+ * @param aspectRatio
+ * @param crop
+ * @returns
+ */
+export declare function generateSizes(imageWidths?: number[], aspectRatio?: string, crop?: Crop): {
+    width: number;
+    height: number | undefined;
+    crop: Crop;
+}[] | undefined;
+export {};
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAM1D,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAUD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;AAKrD,KAAK,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAChE,qBAAqB,CAAA;AAEvB,KAAK,qBAAqB,GAAG;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;IAC1D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;CACzE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,KAAK,yGAqKjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,WAAW,GACZ,EAAE,YAAY,UAiBd;AAiED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,GAAG,CAAC,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,KAAK,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC,EACpE,MAAM,GAAE,MAAsB,EAC9B,WAAW,UAAQ,GAClB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,6BAA0B,EAC/B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,GACpB,MAAM,EAAE,CAUV;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIzE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,WAAW,CAAC,EAAE,MAAM,EAAE,EACtB,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,GAAE,IAAe,GAEnB;IACE,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,IAAI,EAAE,IAAI,CAAA;CACX,EAAE,GACH,SAAS,CAUZ"}

package/dist/components/ui/image.js

@@ -0,0 +1,311 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+/* eslint-disable @next/next/no-img-element */
+import * as React from "react";
+/**
+ * Tapcart’s Image component is a wrapper around the HTML image element.
+ * It supports the same props as the HTML `img` element, but automatically
+ * generates the srcSet and sizes attributes for you. For most use cases,
+ * you’ll want to set the `aspectRatio` prop to ensure the image is sized
+ * correctly.
+ *
+ * @remarks
+ * - `decoding` is set to `async` by default.
+ * - `loading` is set to `lazy` by default.
+ * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
+ * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
+ *
+ * @example
+ * A responsive image with a 4:5 aspect ratio:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   aspectRatio="4:5"
+ *   sizes="(min-width: 45em) 40vw, 100vw"
+ * />
+ * ```
+ * @example
+ * A fixed size image:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   width={100}
+ *   height={100}
+ * />
+ * ```
+ *
+ * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
+ */
+export const Image = React.forwardRef((_a, ref) => {
+    var _b;
+    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, srcSetOptions = {
+        intervals: 15,
+        startingWidth: 100,
+        incrementSize: 100,
+        placeholderWidth: 100,
+    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "srcSetOptions", "width", "objectFit"]);
+    /*
+     * Gets normalized values for width, height from data  prop
+     */
+    const normalizedData = React.useMemo(() => {
+        /* Only use data width if height is also set */
+        const dataWidth = (data === null || data === void 0 ? void 0 : data.width) && (data === null || data === void 0 ? void 0 : data.height) ? data === null || data === void 0 ? void 0 : data.width : undefined;
+        const dataHeight = (data === null || data === void 0 ? void 0 : data.width) && (data === null || data === void 0 ? void 0 : data.height) ? data === null || data === void 0 ? void 0 : data.height : undefined;
+        return {
+            width: dataWidth,
+            height: dataHeight,
+            unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),
+        };
+    }, [data]);
+    /*
+     * Gets normalized values for width, height, src, alt, and aspectRatio props
+     * supporting the presence of `data` in addition to flat props.
+     */
+    const normalizedProps = React.useMemo(() => {
+        const nWidthProp = width || "100%";
+        const widthParts = getUnitValueParts(nWidthProp.toString());
+        const nWidth = `${widthParts.number}${widthParts.unit}`;
+        const autoHeight = height === "auto" || height === undefined || height === null;
+        const heightParts = autoHeight
+            ? null
+            : getUnitValueParts(height.toString());
+        const fixedHeight = heightParts
+            ? `${heightParts.number}${heightParts.unit}`
+            : "";
+        const nHeight = autoHeight ? "auto" : fixedHeight;
+        const nSrc = src || (data === null || data === void 0 ? void 0 : data.url);
+        const nAlt = (data === null || data === void 0 ? void 0 : data.altText) && !alt ? data === null || data === void 0 ? void 0 : data.altText : alt || "";
+        const nAspectRatio = aspectRatio
+            ? aspectRatio
+            : normalizedData.unitsMatch
+                ? [
+                    getNormalizedFixedUnit(normalizedData.width),
+                    getNormalizedFixedUnit(normalizedData.height),
+                ].join(":")
+                : undefined;
+        // Map Tapcart properties "fill" and "fit" to CSS object-fit values
+        const nObjectFit = objectFit === "fill"
+            ? "cover"
+            : objectFit === "fit"
+                ? "contain"
+                : objectFit;
+        return {
+            width: nWidth,
+            height: nHeight,
+            src: nSrc,
+            alt: nAlt,
+            aspectRatio: nAspectRatio,
+            objectFit: nObjectFit,
+        };
+    }, [
+        width,
+        height,
+        src,
+        data,
+        alt,
+        aspectRatio,
+        normalizedData,
+        passthroughProps === null || passthroughProps === void 0 ? void 0 : passthroughProps.key,
+    ]);
+    const { intervals, startingWidth, incrementSize, placeholderWidth } = srcSetOptions;
+    /*
+     * This function creates an array of widths to be used in srcSet
+     */
+    const imageWidths = React.useMemo(() => {
+        return generateImageWidths(width, intervals, startingWidth, incrementSize);
+    }, [width, intervals, startingWidth, incrementSize]);
+    const fixedWidth = isFixedWidth(normalizedProps.width);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [hasError, setHasError] = React.useState(false);
+    const handleImageLoad = () => {
+        setIsLoaded(true);
+    };
+    const handleImageError = () => {
+        setHasError(true);
+    };
+    const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
+    const wrapperStyle = {
+        aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/"),
+    };
+    return (_jsx("div", Object.assign({ className: "relative bg-stateColors-skeleton border-transparent", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({ ref: ref, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, src: normalizedProps.src, srcSet: generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, normalizedProps.objectFit === "contain"), width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, style: {
+                objectFit: normalizedProps.objectFit,
+                maxHeight: "100%",
+                height: "100%",
+                width: "100%",
+            } }, passthroughProps))) : (_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-stateColors-skeleton " })) })));
+});
+/**
+ * The shopifyLoader function is a simple utility function that takes a src, width,
+ * height, and crop and returns a string that can be used as the src for an image.
+ * It can be used with the Tapcart Image component or with the next/image component.
+ * (or any others that accept equivalent configuration)
+ * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
+ * @param width - The width of the image, e.g. `100`
+ * @param height - The height of the image, e.g. `100`
+ * @param crop - The crop of the image, e.g. `center`
+ * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
+ *
+ * @example
+ * ```
+ * shopifyLoader({
+ *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+ *   width: 100,
+ *   height: 100,
+ *   crop: 'center',
+ * })
+ * ```
+ */
+export function shopifyLoader({ src, width, height, crop, isContained, }) {
+    if (!src) {
+        return "";
+    }
+    const url = new URL(src);
+    if (width && !isContained) {
+        url.searchParams.append("width", Math.round(width).toString());
+    }
+    if (height) {
+        url.searchParams.append("height", Math.round(height).toString());
+    }
+    if (crop && !isContained) {
+        url.searchParams.append("crop", crop);
+    }
+    return url.href;
+}
+/**
+ * Checks whether the width and height share the same unit type
+ * @param width - The width of the image, e.g. 100% | 10px
+ * @param height - The height of the image, e.g. auto | 100px
+ * @returns Whether the width and height share the same unit type (boolean)
+ */
+function unitsMatch(width = "100%", height = "auto") {
+    return (getUnitValueParts(width.toString()).unit ===
+        getUnitValueParts(height.toString()).unit);
+}
+/**
+ * Given a CSS size, returns the unit and number parts of the value
+ * @param value - The CSS size, e.g. 100px
+ * @returns The unit and number parts of the value, e.g. \{unit: 'px', number: 100\}
+ */
+function getUnitValueParts(value) {
+    const unit = value.replace(/[0-9.]/g, "");
+    const number = parseFloat(value.replace(unit, ""));
+    return {
+        unit: unit === "" ? (number === undefined ? "auto" : "px") : unit,
+        number,
+    };
+}
+/**
+ * Given a value, returns the width of the image as an integer in pixels
+ * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16
+ * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit
+ */
+function getNormalizedFixedUnit(value) {
+    if (value === undefined)
+        return;
+    const { unit, number } = getUnitValueParts(value.toString());
+    switch (unit) {
+        case "em":
+        case "rem":
+            return number * 16;
+        case "px":
+        case "":
+            return number;
+        default:
+            return;
+    }
+}
+/**
+ * This function checks whether a width is fixed or not.
+ * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'
+ * @returns Whether the width is fixed or not
+ */
+function isFixedWidth(width) {
+    const fixedEndings = /\d(px|em|rem)$/;
+    return (typeof width === "number" ||
+        (typeof width === "string" && fixedEndings.test(width)));
+}
+/**
+ * This function generates a srcSet for Shopify images.
+ * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
+ * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
+ * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+ * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
+ */
+export function generateSrcSet(src, sizesArray, loader = shopifyLoader, isContained = false) {
+    if (!src)
+        return "";
+    if (!sizesArray || sizesArray.length === 0)
+        return src;
+    const srcSet = sizesArray
+        .map((size, i) => {
+        var _a;
+        return `${loader({
+            src,
+            width: size.width,
+            height: size.height,
+            crop: size.crop,
+            isContained,
+        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${(_a = size.width) !== null && _a !== void 0 ? _a : 0}w`}`;
+    })
+        .join(`, `);
+    return srcSet;
+}
+/**
+ * This function generates an array of sizes for Shopify images, for both fixed and responsive images.
+ * @param width - The CSS width of the image
+ * @param intervals - The number of intervals to generate
+ * @param startingWidth - The starting width of the image
+ * @param incrementSize - The size of each interval
+ * @returns An array of widths
+ */
+export function generateImageWidths(width = "100%", intervals, startingWidth, incrementSize) {
+    const responsive = Array.from({ length: intervals }, (_, i) => i * incrementSize + startingWidth);
+    const fixed = Array.from({ length: 3 }, (_, i) => { var _a; return (i + 1) * ((_a = getNormalizedFixedUnit(width)) !== null && _a !== void 0 ? _a : 0); });
+    return isFixedWidth(width) ? fixed : responsive;
+}
+/**
+ * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1:1`, not `0.5`, or `auto`
+ * @param aspectRatio - The aspect ratio of the image, e.g. `1:1`
+ * @returns The aspect ratio as a number, e.g. `1`
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
+ */
+export function parseAspectRatio(aspectRatio) {
+    if (!aspectRatio)
+        return;
+    const [width, height] = aspectRatio.split(":");
+    return Number(width) / Number(height);
+}
+/**
+ * Generate sizes for Imagery loader
+ * @param imageWidths
+ * @param aspectRatio
+ * @param crop
+ * @returns
+ */
+export function generateSizes(imageWidths, aspectRatio, crop = "center") {
+    if (!imageWidths)
+        return;
+    const sizes = imageWidths.map((width) => {
+        var _a;
+        return ({
+            width,
+            height: aspectRatio
+                ? width / ((_a = parseAspectRatio(aspectRatio)) !== null && _a !== void 0 ? _a : 1)
+                : undefined,
+            crop,
+        });
+    });
+    return sizes;
+}

package/dist/components/ui/line-item-text-icons.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface LineItemTextIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    primaryText: string;
+    secondaryText: string;
+    selected?: boolean;
+    showIcon?: boolean;
+    showSecondaryText?: boolean;
+    showChevron?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+declare const LineItemTextIcon: React.ForwardRefExoticComponent<LineItemTextIconProps & React.RefAttributes<HTMLButtonElement>>;
+export { LineItemTextIcon };
+//# sourceMappingURL=line-item-text-icons.d.ts.map

package/dist/components/ui/line-item-text-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-item-text-icons.d.ts","sourceRoot":"","sources":["../../../components/ui/line-item-text-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB,iGA0DrB,CAAA;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/line-item-text-icons.js

@@ -0,0 +1,22 @@
+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 LineItemTextIcon = React.forwardRef((_a, ref) => {
+    var { primaryText, secondaryText, selected = false, showIcon = true, showSecondaryText = true, showChevron = true, onClick, className } = _a, props = __rest(_a, ["primaryText", "secondaryText", "selected", "showIcon", "showSecondaryText", "showChevron", "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: [_jsx(Icon, { name: "map-pin", size: "sm", color: "coreColors-secondaryIcon", className: `${showIcon ? "" : "opacity-0"}` }), _jsxs("div", Object.assign({ className: "flex flex-col w-full items-start gap-1 overflow-hidden" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-primaryColor max-w-full truncate" }, { children: primaryText })), _jsx(Text, Object.assign({ type: "body-secondary", className: `text-textColors-secondaryColor line-clamp-2 text-left ${showSecondaryText ? "" : "opacity-0"}` }, { children: secondaryText }))] })), _jsx(Icon, { name: "chevron-right", size: "sm", color: "coreColors-secondaryIcon", className: `my-auto ${showChevron ? "" : "opacity-0"}` })] })));
+});
+LineItemTextIcon.displayName = "LineItemTextIcon";
+export { LineItemTextIcon };

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

@@ -1,9 +1,11 @@
 import * as React from "react";
+import { Product } from "app-studio-types";
 type Config = {
     gridLayout?: string;
     productImage?: {
         enabled: boolean;
         cornerRadius: number;
+        allowSwipeability: boolean;
     };
     price?: {
         enabled: boolean;
@@ -66,24 +68,6 @@ type TapcartData = {
         };
     };
 };
-export type Product = {
-    variants: {
-        compareAtPrice: {
-            amount: string;
-            currencyCode: string;
-        } | undefined;
-        price: {
-            amount: string;
-            currencyCode: string;
-        };
-    }[];
-    images: {
-        src: string;
-    }[];
-    title: string;
-    tags: string[];
-    availableForSale: boolean;
-};
 export type ProductCardProps = {
     config: Config;
     tapcartData: TapcartData;
@@ -92,7 +76,10 @@ export type ProductCardProps = {
     favorited?: boolean;
     onFavoriteClick?: (event: React.MouseEvent<HTMLButtonElement>, product: Product) => void;
     onQuickAdd?: (event: React.MouseEvent<HTMLButtonElement>, product: Product) => void;
-    openProduct?: (event: React.MouseEvent<HTMLDivElement>, product: Product) => void;
+    openProduct?: (params: {
+        productId: string;
+        variantId?: string;
+    }) => void;
 };
 declare const ProductCard: React.FC<ProductCardProps>;
 export { ProductCard };

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

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