@manta-eu/react 0.1.0

package/dist/components/ad-preview/marketplace-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marketplace-layout.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/marketplace-layout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,KAAK,sBAAsB,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA8B9D"}

package/dist/components/ad-preview/marketplace-layout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ellipsis } from "lucide-react";
+import { BusinessIdentity } from "./business-identity.js";
+import { MediaContainer } from "./media-container.js";
+import { PreviewContainer } from "./preview-container.js";
+const PlaceholderRow = () => (_jsxs("div", { className: "flex gap-1 items-center w-full shrink-0", children: [_jsx("div", { className: "flex-1 h-39 bg-muted" }), _jsx("div", { className: "flex-1 h-39 bg-muted" })] }));
+export function MarketplaceLayout(props) {
+    const { className, businessName, businessIcon, assetUrl, assetNode, isVideo, children } = props;
+    return (_jsx(PreviewContainer, { className: className, children: _jsxs("div", { className: "flex flex-col gap-1 p-2 w-full overflow-hidden", children: [_jsx(PlaceholderRow, {}), _jsxs("div", { className: "flex gap-1 items-end w-full shrink-0", children: [_jsxs("div", { className: "flex flex-col items-start overflow-hidden w-38.75 shrink-0", children: [_jsxs("div", { className: "flex items-center justify-between px-1 py-2 w-full", children: [_jsx(BusinessIdentity, { businessName: businessName, businessIcon: businessIcon, avatarSize: "xs", classNames: {
+                                                name: "typography-tiny text-default-foreground",
+                                                sponsored: "text-[0.5625rem] leading-3 text-muted-foreground",
+                                            } }), _jsx(Ellipsis, { className: "size-4 text-muted-foreground" })] }), _jsx(MediaContainer, { src: assetUrl, node: assetNode, isVideo: isVideo, className: "w-full h-38.75 shrink-0" }), children] }), _jsx("div", { className: "flex-1 h-full bg-muted self-stretch" })] }), _jsx(PlaceholderRow, {})] }) }));
+}

package/dist/components/ad-preview/media-container.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+type MediaContainerProps = {
+    src: string | undefined;
+    isVideo: boolean | undefined;
+    alt?: string;
+    className?: string;
+    node?: ReactNode;
+};
+export declare function MediaContainer(props: MediaContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=media-container.d.ts.map

package/dist/components/ad-preview/media-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-container.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/media-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,mBAAmB,GAAG;IACzB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAcxD"}

package/dist/components/ad-preview/media-container.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaSlot } from "./media-slot.js";
+import { cn } from "#style";
+export function MediaContainer(props) {
+    const { src, isVideo, alt, className, node } = props;
+    return (_jsx("div", { className: cn("relative bg-muted", className), children: _jsx(MediaSlot, { src: src, node: node, isVideo: isVideo, alt: alt, className: "absolute inset-0 size-full object-contain" }) }));
+}

package/dist/components/ad-preview/media-slot.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export type MediaSlotProps = {
+    className: string;
+    isVideo?: boolean;
+    src?: string;
+    alt?: string;
+    /** Rendered instead of the `<img>`/`<video>`, for a caller whose media has no URL yet. */
+    node?: ReactNode;
+};
+export declare function MediaSlot(props: MediaSlotProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=media-slot.d.ts.map

package/dist/components/ad-preview/media-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-slot.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/media-slot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ/C,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0FAA0F;IAC1F,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDAgC9C"}

package/dist/components/ad-preview/media-slot.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+const videoExtensions = [".mp4", ".mov", ".webm"];
+function isVideoUrl(url) {
+    return videoExtensions.some((ext) => url.toLowerCase().endsWith(ext));
+}
+export function MediaSlot(props) {
+    const { src, alt, isVideo, className, node } = props;
+    const videoRef = useRef(null);
+    // Ahead of the `src` guard, so a node needs no placeholder URL.
+    if (node)
+        return _jsx("div", { className: className, children: node });
+    if (!src)
+        return null;
+    const shouldRenderVideo = isVideo ?? isVideoUrl(src);
+    if (shouldRenderVideo) {
+        return (_jsx("video", { ref: videoRef, muted: true, loop: true, playsInline: true, className: className, onMouseEnter: () => videoRef.current?.play(), onMouseLeave: () => {
+                videoRef.current?.pause();
+                if (videoRef.current)
+                    videoRef.current.currentTime = 0;
+            }, children: _jsx("source", { src: src }) }));
+    }
+    return _jsx("img", { src: src, alt: alt ?? "", className: className });
+}

package/dist/components/ad-preview/preview-container.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type PreviewPlatform = "google" | "facebook" | "instagram" | "snapchat";
+type PreviewContainerProps = {
+    className?: string;
+    dark?: boolean;
+    width?: number;
+    platform?: PreviewPlatform;
+    children: ReactNode;
+};
+export declare function PreviewContainer(props: PreviewContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=preview-container.d.ts.map

package/dist/components/ad-preview/preview-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-container.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/preview-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AAExE,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAsB5D"}

package/dist/components/ad-preview/preview-container.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "#style";
+export function PreviewContainer(props) {
+    const { className, dark, width, platform, children } = props;
+    const style = { maxWidth: "100%", ...(width ? { width } : {}) };
+    const isGoogle = platform === "google";
+    const platformClasses = isGoogle ? undefined : "ad-preview-typography font-ad-preview";
+    const backgroundClass = dark ? "bg-default-foreground" : "bg-card";
+    return (_jsx("div", { style: style, className: cn("rounded-xl shadow-ad-preview flex flex-col items-start relative tracking-normal overflow-hidden", platformClasses, !width && "w-82.5", backgroundClass, className), children: children }));
+}

package/dist/components/ad-preview/scroll-arrow.d.ts

@@ -0,0 +1,8 @@
+type ScrollArrowProps = {
+    direction: "left" | "right";
+    onClick: () => void;
+    className?: string;
+};
+export declare function ScrollArrow(props: ScrollArrowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=scroll-arrow.d.ts.map

package/dist/components/ad-preview/scroll-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-arrow.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/scroll-arrow.tsx"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0BlD"}

package/dist/components/ad-preview/scroll-arrow.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { match } from "ts-pattern";
+import { cn } from "#style";
+export function ScrollArrow(props) {
+    const { direction, onClick, className } = props;
+    const { Icon, className: iconClassName, ariaLabel, } = match(direction)
+        .with("left", () => ({ Icon: ChevronLeft, className: "left-1", ariaLabel: "Previous item" }))
+        .with("right", () => ({ Icon: ChevronRight, className: "right-1", ariaLabel: "Next item" }))
+        .exhaustive();
+    return (_jsx("button", { type: "button", "aria-label": ariaLabel, onClick: onClick, className: cn("absolute top-1/2 -translate-y-1/2 z-10 size-8 bg-background/90 rounded-full shadow flex items-center justify-center", iconClassName, className), children: _jsx(Icon, { className: "size-5 text-muted-foreground" }) }));
+}

package/dist/components/ad-preview/snapchat/between-content.d.ts

@@ -0,0 +1,3 @@
+import type { SnapchatBetweenContentProps } from "../types.js";
+export declare function SnapchatBetweenContent(props: SnapchatBetweenContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=between-content.d.ts.map

package/dist/components/ad-preview/snapchat/between-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"between-content.d.ts","sourceRoot":"","sources":["../../../../src/components/ad-preview/snapchat/between-content.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAa5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CA2DxE"}

package/dist/components/ad-preview/snapchat/between-content.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, EllipsisVertical } from "lucide-react";
+import { MediaSlot } from "../media-slot.js";
+import { PreviewContainer } from "../preview-container.js";
+import { StoryGradientOverlay } from "../story-gradient-overlay.js";
+import { StoryProgressBars } from "../story-progress-bars.js";
+import { getHumanCallToAction, snapchatAssetPlaceHolderUrl, snapchatLogoPlaceholderUrl } from "./constants.js";
+import { SnapchatArrowIcon } from "./icons/snapchat-arrow.js";
+import { SnapchatHeartIcon } from "./icons/snapchat-heart.js";
+function getDisplayHostname(websiteURL) {
+    try {
+        return new URL(websiteURL).hostname;
+    }
+    catch {
+        return "";
+    }
+}
+export function SnapchatBetweenContent(props) {
+    const { className, brandName, headline, assetUrl, callToAction, websiteURL, logoUrl } = props;
+    const domain = getDisplayHostname(websiteURL);
+    const finalLogoUrl = logoUrl ?? snapchatLogoPlaceholderUrl;
+    const image = assetUrl ?? snapchatAssetPlaceHolderUrl;
+    return (_jsxs(PreviewContainer, { dark: true, className: className, children: [_jsxs("div", { className: "aspect-9/16 w-full overflow-hidden relative rounded-lg bg-default-foreground", children: [_jsx(MediaSlot, { src: image, className: "absolute inset-0 size-full object-cover rounded-lg", alt: "" }), _jsx(StoryGradientOverlay, {}), _jsx(StoryProgressBars, { count: 4, activeIndex: 0 }), _jsxs("div", { className: "absolute top-4.5 left-3 right-3 z-10 flex items-start justify-between gap-2 pointer-events-none", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-2.5 text-background", style: { textShadow: "0 0 12px rgba(0,0,0,0.6)" }, children: [_jsx("img", { src: finalLogoUrl, alt: "", className: "size-10 shrink-0 rounded-full object-cover" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-1", children: [_jsx("span", { className: "typography-tiny-semibold text-background truncate", children: brandName }), _jsx("span", { className: "typography-tiny text-background/80", children: "\u00B7 Ad" })] }), _jsx("p", { className: "typography-caption-small text-background/95 line-clamp-2", children: headline })] })] }), _jsx(EllipsisVertical, { className: "size-6 shrink-0 text-background", "aria-hidden": true })] }), _jsxs("div", { className: "absolute bottom-3 left-3 right-3 z-10 flex items-center gap-2 pointer-events-none", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 rounded-2xl bg-background/40 px-2.5 py-2 backdrop-blur-sm", children: [_jsx("img", { src: finalLogoUrl, alt: "", className: "size-12 shrink-0 rounded-lg object-cover" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "typography-tiny-semibold text-background truncate", children: brandName }), _jsx("span", { className: "typography-caption-small text-background/90 line-clamp-1", children: headline }), domain ? _jsx("span", { className: "typography-caption-small text-background/80 truncate", children: domain }) : null] }), _jsx(ChevronRight, { className: "size-5 shrink-0 text-background", "aria-hidden": true })] }), _jsx("div", { className: "flex size-8 shrink-0 items-center justify-center", children: _jsx(SnapchatHeartIcon, { className: "size-8" }) })] })] }), _jsxs("div", { className: "flex w-full items-center gap-2 p-3", children: [_jsx("div", { className: "flex min-h-12 flex-1 items-center justify-center rounded-full bg-background px-4 py-3", children: _jsx("span", { className: "typography-heading text-default-foreground whitespace-nowrap", children: getHumanCallToAction(callToAction) }) }), _jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-full bg-muted/40", "aria-hidden": true, children: _jsx(SnapchatArrowIcon, { className: "size-6" }) })] })] }));
+}

package/dist/components/ad-preview/snapchat/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const snapchatAssetPlaceHolderUrl = "https://placehold.co/1080x1920.svg";
+export declare const snapchatLogoPlaceholderUrl = "https://placehold.co/100x100.svg";
+export type CallToAction = "MORE" | "APPLY_NOW" | "ORDER_NOW" | "PLAY" | "READ" | "SHOP_NOW" | "SHOW" | "SIGN_UP" | "VIEW" | "WATCH" | "DONATE" | "DOWNLOAD" | "RESPOND" | "BUY_TICKETS" | "SHOWTIMES" | "BOOK_NOW" | "GET_NOW" | "LISTEN" | "TRY" | "VOTE" | "VIEW_MENU" | "PRE_REGISTER" | "PLAY_GAME";
+export declare function getHumanCallToAction(callToAction: CallToAction): string;
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/ad-preview/snapchat/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/ad-preview/snapchat/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,uCAAuC,CAAC;AAChF,eAAO,MAAM,0BAA0B,qCAAqC,CAAC;AAE7E,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,WAAW,GACX,WAAW,GACX,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,WAAW,GACX,UAAU,GACV,SAAS,GACT,QAAQ,GACR,KAAK,GACL,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,CAAC;AAEhB,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM,CA2BvE"}

package/dist/components/ad-preview/snapchat/constants.js

@@ -0,0 +1,31 @@
+import { match } from "ts-pattern";
+export const snapchatAssetPlaceHolderUrl = "https://placehold.co/1080x1920.svg";
+export const snapchatLogoPlaceholderUrl = "https://placehold.co/100x100.svg";
+export function getHumanCallToAction(callToAction) {
+    return match(callToAction)
+        .returnType()
+        .with("MORE", () => "More")
+        .with("APPLY_NOW", () => "Apply Now")
+        .with("ORDER_NOW", () => "Order Now")
+        .with("PLAY", () => "Play")
+        .with("READ", () => "Read")
+        .with("SHOP_NOW", () => "Shop Now")
+        .with("SHOW", () => "Show")
+        .with("SIGN_UP", () => "Sign Up")
+        .with("VIEW", () => "View")
+        .with("WATCH", () => "Watch")
+        .with("DONATE", () => "Donate")
+        .with("DOWNLOAD", () => "Download")
+        .with("RESPOND", () => "Respond")
+        .with("BUY_TICKETS", () => "Buy Tickets")
+        .with("SHOWTIMES", () => "Showtimes")
+        .with("BOOK_NOW", () => "Book Now")
+        .with("GET_NOW", () => "Get Now")
+        .with("LISTEN", () => "Listen")
+        .with("TRY", () => "Try")
+        .with("VOTE", () => "Vote")
+        .with("VIEW_MENU", () => "View Menu")
+        .with("PRE_REGISTER", () => "Pre-Register")
+        .with("PLAY_GAME", () => "Play Game")
+        .exhaustive();
+}

package/dist/components/ad-preview/snapchat/icons/snapchat-arrow.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from "react";
+type SnapchatArrowIconProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function SnapchatArrowIcon(props: SnapchatArrowIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=snapchat-arrow.d.ts.map

package/dist/components/ad-preview/snapchat/icons/snapchat-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapchat-arrow.d.ts","sourceRoot":"","sources":["../../../../../src/components/ad-preview/snapchat/icons/snapchat-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,sBAAsB,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA+C9D"}

package/dist/components/ad-preview/snapchat/icons/snapchat-arrow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function SnapchatArrowIcon(props) {
+    const { className, style } = props;
+    const reactId = useId();
+    const filterId = `snapchat-arrow-filter-${reactId.replace(/:/g, "")}`;
+    return (_jsxs("svg", { className: className, style: style, width: "156", height: "156", viewBox: "0 0 156 156", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { filter: `url(#${filterId})`, children: _jsx("path", { d: "M82.3862 39.7208L118.027 69.4408L117.987 69.4008C120.504 71.5208 121.982 74.6408 121.982 77.9608C121.982 81.2808 120.544 84.4008 117.987 86.5208L82.3862 116.201C80.9878 117.361 79.3096 117.961 77.5915 117.961C76.5127 117.961 75.4339 117.721 74.395 117.241C71.758 116.001 70.0798 113.401 70.0798 110.441V94.0408C62.0487 94.3208 50.4215 96.2008 41.3116 108.361C40.3127 109.681 38.6346 110.241 37.0363 109.801C35.4381 109.361 34.2794 108.001 34.1196 106.361C34.0396 105.561 32.2816 86.6008 44.0686 73.6008C50.3416 66.6808 59.052 62.8008 70.0798 62.0808V45.4808C70.0798 42.5208 71.718 39.9208 74.395 38.6808C77.0721 37.4408 80.1087 37.8408 82.3862 39.7208Z", fill: "white" }) }), _jsx("defs", { children: _jsxs("filter", { id: filterId, x: "6", y: "12", width: "144", height: "144", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "6" }), _jsx("feGaussianBlur", { stdDeviation: "12" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_108_1540" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_108_1540", result: "shape" })] }) })] }));
+}

package/dist/components/ad-preview/snapchat/icons/snapchat-heart.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from "react";
+type SnapchatHeartIconProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function SnapchatHeartIcon(props: SnapchatHeartIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=snapchat-heart.d.ts.map

package/dist/components/ad-preview/snapchat/icons/snapchat-heart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapchat-heart.d.ts","sourceRoot":"","sources":["../../../../../src/components/ad-preview/snapchat/icons/snapchat-heart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,sBAAsB,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA4D9D"}

package/dist/components/ad-preview/snapchat/icons/snapchat-heart.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function SnapchatHeartIcon(props) {
+    const { className, style } = props;
+    const reactId = useId();
+    const safeId = reactId.replace(/:/g, "");
+    const filterId = `snapchat-heart-filter-${safeId}`;
+    const clipId = `snapchat-heart-clip-${safeId}`;
+    return (_jsxs("svg", { className: className, style: style, width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: `url(#${clipId})`, children: _jsxs("g", { filter: `url(#${filterId})`, children: [_jsx("path", { d: "M24 15.1088C32.4677 4.43472 44.9916 15.6853 37.9154 26.6395C35.7984 30.8893 29.0331 36.0287 25.347 38.6643C24.9434 38.9465 24.4766 39.0963 24 39.0963C23.5233 39.0963 23.0563 38.9465 22.6528 38.6643C18.8926 36.0287 12.2013 30.8893 10.0844 26.6395C2.99341 15.6853 15.5914 4.43472 24 15.1088Z", fill: "white" }), _jsx("path", { d: "M25.6336 39.074L25.6336 39.0741L25.6378 39.071C27.4865 37.7492 30.1156 35.7937 32.5516 33.6311C34.9651 31.4884 37.2414 29.0975 38.3504 26.8875C41.9976 21.2197 40.6125 15.4001 37.113 12.3848C35.3639 10.8776 33.0877 10.0769 30.6811 10.3706C28.4155 10.6471 26.0857 11.8866 24.0013 14.3211C21.9299 11.8866 19.6058 10.6471 17.3418 10.3706C14.9367 10.0769 12.6575 10.8776 10.904 12.3843C7.39559 15.3989 5.994 21.2187 9.6495 26.8877C10.7579 29.0965 13.0144 31.4869 15.4197 33.6305C17.847 35.7937 20.4769 37.7498 22.3658 39.0737L22.3662 39.074C22.8508 39.413 23.4173 39.5963 24 39.5963C24.5827 39.5963 25.149 39.4129 25.6336 39.074Z", stroke: "black", strokeOpacity: "0.05", strokeMiterlimit: "10" })] }) }), _jsxs("defs", { children: [_jsxs("filter", { id: filterId, x: "-2", y: "-1.18945", width: "52", height: "52", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", {}), _jsx("feGaussianBlur", { stdDeviation: "4" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3_13290" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3_13290", result: "shape" })] }), _jsx("clipPath", { id: clipId, children: _jsx("rect", { width: "48", height: "48", fill: "white", transform: "translate(0 0.810547)" }) })] })] }));
+}

package/dist/components/ad-preview/snapchat/index.d.ts

@@ -0,0 +1,3 @@
+import type { SnapchatAdPreviewProps } from "../types.js";
+export declare function SnapchatAdPreview(props: SnapchatAdPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ad-preview/snapchat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ad-preview/snapchat/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAM9D"}

package/dist/components/ad-preview/snapchat/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { match } from "ts-pattern";
+import { SnapchatBetweenContent } from "./between-content.js";
+export function SnapchatAdPreview(props) {
+    const { format, ...rest } = props;
+    return match(format)
+        .with("between-content", () => _jsx(SnapchatBetweenContent, { ...rest }))
+        .exhaustive();
+}

package/dist/components/ad-preview/story-gradient-overlay.d.ts

@@ -0,0 +1,2 @@
+export declare function StoryGradientOverlay(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=story-gradient-overlay.d.ts.map

package/dist/components/ad-preview/story-gradient-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-gradient-overlay.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/story-gradient-overlay.tsx"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,4CAUnC"}

package/dist/components/ad-preview/story-gradient-overlay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function StoryGradientOverlay() {
+    return (_jsx("div", { className: "absolute inset-0 rounded-lg pointer-events-none", style: {
+            backgroundImage: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%), linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 35%)",
+        } }));
+}

package/dist/components/ad-preview/story-overlay-header.d.ts

@@ -0,0 +1,8 @@
+type StoryOverlayHeaderProps = {
+    businessName: string;
+    businessIcon?: string;
+    showSponsored?: boolean;
+};
+export declare function StoryOverlayHeader(props: StoryOverlayHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=story-overlay-header.d.ts.map

package/dist/components/ad-preview/story-overlay-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-overlay-header.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/story-overlay-header.tsx"],"names":[],"mappings":"AAIA,KAAK,uBAAuB,GAAG;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAoBhE"}

package/dist/components/ad-preview/story-overlay-header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ellipsis, X } from "lucide-react";
+import { AdActions } from "./ad-actions.js";
+import { BusinessIdentity } from "./business-identity.js";
+export function StoryOverlayHeader(props) {
+    const { businessName, businessIcon, showSponsored } = props;
+    return (_jsxs("div", { className: "absolute top-4.5 left-3 right-3 flex items-center justify-between z-10 pointer-events-none", children: [_jsx(BusinessIdentity, { businessName: businessName, businessIcon: businessIcon, avatarSize: "sm", showSponsored: showSponsored, classNames: { name: "text-background", sponsored: "text-background/70" } }), _jsx(AdActions, { icons: [
+                    { Icon: Ellipsis, className: "text-background" },
+                    { Icon: X, className: "text-background" },
+                ] })] }));
+}

package/dist/components/ad-preview/story-progress-bars.d.ts

@@ -0,0 +1,7 @@
+type StoryProgressBarsProps = {
+    count?: number;
+    activeIndex?: number;
+};
+export declare function StoryProgressBars(props: StoryProgressBarsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=story-progress-bars.d.ts.map

package/dist/components/ad-preview/story-progress-bars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-progress-bars.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/story-progress-bars.tsx"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAkB9D"}

package/dist/components/ad-preview/story-progress-bars.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { times } from "ramda";
+export function StoryProgressBars(props) {
+    const { count = 4, activeIndex = 0 } = props;
+    return (_jsx("div", { className: "absolute top-1.5 left-0 right-0 z-10 pointer-events-none", children: _jsx("div", { className: "flex gap-0.5 items-center w-full px-1.5", children: times((i) => (_jsxs("div", { className: "flex-1 h-0.5 rounded-sm bg-background/50 overflow-hidden", children: [i < activeIndex && _jsx("div", { className: "h-full w-full rounded-sm bg-background" }), i === activeIndex && _jsx("div", { className: "h-full w-1/2 rounded-sm bg-background" })] }, i)), count) }) }));
+}

package/dist/components/ad-preview/types.d.ts

@@ -0,0 +1,143 @@
+import type { ReactNode } from "react";
+import type { CallToAction } from "./snapchat/constants.js";
+export type SnapchatBetweenContentProps = {
+    className?: string;
+    brandName: string;
+    headline: string;
+    assetUrl?: string;
+    websiteURL: string;
+    callToAction: CallToAction;
+    logoUrl?: string | null;
+};
+export type SnapchatAdFormat = "between-content";
+export type SnapchatAdPreviewProps = SnapchatBetweenContentProps & {
+    format: SnapchatAdFormat;
+};
+export type AdPreviewBaseProps = {
+    className?: string;
+    businessName: string;
+    businessIcon?: string;
+    assetUrl?: string;
+    callToAction?: string;
+    isVideo?: boolean;
+    /** Media as a node rather than `assetUrl`. Honored by every single-media format; the
+     * multi-item ones (carousel, reels, a story with `items`) take a URL per item. */
+    assetNode?: ReactNode;
+};
+export type FacebookCarouselItem = {
+    assetUrl: string;
+    title?: string;
+    callToAction?: string;
+    isVideo?: boolean;
+};
+export type FacebookPreviewProps = AdPreviewBaseProps & {
+    mainText?: string;
+    url?: string;
+    title?: string;
+    description?: string;
+    items?: FacebookCarouselItem[];
+};
+export type InstagramPreviewProps = AdPreviewBaseProps & {
+    mainText?: string;
+    carouselAssets?: {
+        assetUrl: string;
+        title?: string;
+        description?: string;
+        isVideo?: boolean;
+    }[];
+};
+export type FacebookAdFormat = "feed" | "carousel" | "marketplace" | "story" | "reels" | "instream-reels";
+export type InstagramAdFormat = "feed" | "reel" | "story" | "search-result";
+export type FacebookAdPreviewProps = FacebookPreviewProps & {
+    format: FacebookAdFormat;
+};
+export type InstagramAdPreviewProps = InstagramPreviewProps & {
+    format: InstagramAdFormat;
+};
+export type GoogleSearchSitelink = {
+    text: string;
+    url?: string;
+    description?: string;
+};
+export type GoogleSearchAdPreviewProps = {
+    className?: string;
+    businessName: string;
+    businessIconUrl?: string;
+    businessUrl?: string;
+    headline?: string;
+    description?: string;
+    sitelinks?: GoogleSearchSitelink[];
+    label?: string;
+};
+export type GoogleShoppingPrice = {
+    current: string;
+    original?: string;
+};
+export type GoogleShoppingProduct = {
+    id: string;
+    title?: string;
+    imageUrl?: string;
+    price?: GoogleShoppingPrice;
+    badge?: string;
+    rating?: number;
+    reviewCount?: number;
+    callToAction?: string;
+};
+export type GoogleShoppingAdPreviewProps = {
+    className?: string;
+    businessName: string;
+    products: GoogleShoppingProduct[];
+    label?: string;
+};
+export type GoogleDisplayAdProps = {
+    className?: string;
+    imageSrc?: string;
+    headline: string;
+    description: string;
+    callToAction?: string;
+};
+export type GoogleGmailAdProps = {
+    className?: string;
+    imageSrc?: string;
+    headline: string;
+    description?: string;
+    businessName: string;
+    label?: string;
+};
+export type GoogleDiscoverAdProps = {
+    className?: string;
+    imageSrc?: string;
+    headline: string;
+    description?: string;
+    businessName: string;
+    businessIconUrl?: string;
+    businessUrl?: string;
+    label?: string;
+};
+export type GoogleYoutubeAdProps = {
+    className?: string;
+    imageSrc?: string;
+    headline: string;
+    description?: string;
+    businessName: string;
+    businessIconUrl?: string;
+    primaryCta?: string;
+    secondaryCta?: string;
+    sponsoredLabel?: string;
+    progress?: number;
+};
+export type GoogleAdFormat = "search" | "shopping" | "display" | "discover" | "gmail" | "youtube";
+export type GoogleAdPreviewProps = ({
+    format: "search";
+} & GoogleSearchAdPreviewProps) | ({
+    format: "shopping";
+} & GoogleShoppingAdPreviewProps) | ({
+    format: "display";
+} & GoogleDisplayAdProps) | ({
+    format: "discover";
+} & GoogleDiscoverAdProps) | ({
+    format: "gmail";
+} & GoogleGmailAdProps) | ({
+    format: "youtube";
+} & GoogleYoutubeAdProps);
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ad-preview/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/types.ts"],"names":[],"mappings":"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"}

package/dist/components/ad-preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ad-preview/use-scroll-navigation.d.ts

@@ -0,0 +1,19 @@
+type ScrollNavigationMode = {
+    type: "slide";
+    count: number;
+    gapPx?: never;
+} | {
+    type: "carousel";
+    gapPx: number;
+    count?: never;
+};
+export declare const useScrollNavigation: (mode: ScrollNavigationMode) => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    currentIndex: number;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    onScroll: () => void;
+    scroll: (direction: "left" | "right") => void;
+};
+export {};
+//# sourceMappingURL=use-scroll-navigation.d.ts.map

package/dist/components/ad-preview/use-scroll-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/ad-preview/use-scroll-navigation.ts"],"names":[],"mappings":"AAGA,KAAK,oBAAoB,GACrB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEvD,eAAO,MAAM,mBAAmB,GAAI,MAAM,oBAAoB;;;;;;wBAuC9C,MAAM,GAAG,OAAO;CAqB/B,CAAC"}

package/dist/components/ad-preview/use-scroll-navigation.js

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { match } from "ts-pattern";
+export const useScrollNavigation = (mode) => {
+    const ref = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const { count, gapPx } = match(mode)
+        .with({ type: "slide" }, ({ count }) => ({ count, gapPx: 0 }))
+        .with({ type: "carousel" }, ({ gapPx }) => ({ count: 0, gapPx }))
+        .exhaustive();
+    const updateScrollState = useCallback(() => {
+        if (!ref.current)
+            return;
+        if (mode.type === "slide") {
+            const index = Math.round(ref.current.scrollLeft / ref.current.clientWidth);
+            setCurrentIndex(index);
+            setCanScrollLeft(index > 0);
+            setCanScrollRight(index < count - 1);
+        }
+        else {
+            setCanScrollLeft(ref.current.scrollLeft > 1);
+            setCanScrollRight(ref.current.scrollLeft < ref.current.scrollWidth - ref.current.clientWidth - 1);
+        }
+    }, [mode.type, count]);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        updateScrollState();
+        const observer = new ResizeObserver(updateScrollState);
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [updateScrollState]);
+    const scroll = useCallback((direction) => {
+        if (!ref.current)
+            return;
+        if (mode.type === "slide") {
+            const next = direction === "left" ? currentIndex - 1 : currentIndex + 1;
+            const clamped = Math.max(0, Math.min(next, count - 1));
+            ref.current.scrollTo({ left: clamped * ref.current.clientWidth, behavior: "smooth" });
+        }
+        else {
+            const cardWidth = ref.current.firstElementChild?.clientWidth ?? ref.current.clientWidth * 0.8;
+            ref.current.scrollBy({
+                left: direction === "left" ? -(cardWidth + gapPx) : cardWidth + gapPx,
+                behavior: "smooth",
+            });
+        }
+    }, [mode.type, count, gapPx, currentIndex]);
+    return { ref, currentIndex, canScrollLeft, canScrollRight, onScroll: updateScrollState, scroll };
+};