@lexsis/storefront-components 1.0.0

package/dist/primitives/PDPGallery.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { AspectBox } from "./AspectBox";
+import { MediaLoop } from "./MediaLoop";
+function positionMeta(pos) {
+    const isCorner = pos.includes("-");
+    const isVerticalRail = pos === "left" || pos === "right";
+    const isFirst = pos === "left" || pos === "top";
+    return { isCorner, isVerticalRail, isFirst };
+}
+const GALLERY_ANIMS = {
+    fade: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+    },
+    slide: {
+        initial: (dir) => ({ x: dir >= 0 ? "100%" : "-100%", opacity: 0 }),
+        animate: { x: 0, opacity: 1 },
+        exit: (dir) => ({ x: dir >= 0 ? "-100%" : "100%", opacity: 0 }),
+    },
+    zoom: {
+        initial: { opacity: 0, scale: 0.94 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 1.06 },
+    },
+    flip: {
+        initial: { opacity: 0, rotateY: -90 },
+        animate: { opacity: 1, rotateY: 0 },
+        exit: { opacity: 0, rotateY: 90 },
+    },
+    ken_burns: {
+        initial: { opacity: 0, scale: 1 },
+        animate: { opacity: 1, scale: 1.06 },
+        exit: { opacity: 0 },
+    },
+};
+const GALLERY_TRANSITIONS = {
+    fade: { duration: 0.3, ease: "easeInOut" },
+    slide: { duration: 0.38, ease: [0.25, 0.46, 0.45, 0.94] },
+    zoom: { duration: 0.35, ease: "easeOut" },
+    flip: { duration: 0.32, ease: "easeInOut" },
+    ken_burns: { duration: 4, ease: "linear" },
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+export function PDPGallery({ images, alt = "", aspect = "4:5", fit = "contain", thumbPosition = "left", thumbSize = 64, autoInterval = 0, animationMode = "fade", accentColor = "#1a1a1a", borderColor = "#e5e7eb", imageRadius = "var(--lx-image-radius, 16px)", thumbRadius = "8px", bgColor = "#f9f9f9", className = "", style, activeIndex: controlledIndex, onSelect, }) {
+    const [internalIndex, setInternalIndex] = useState(0);
+    const [direction, setDirection] = useState(1); // 1=forward, -1=backward
+    const prevIndexRef = useRef(0);
+    const isControlled = controlledIndex !== undefined;
+    const activeImg = isControlled ? controlledIndex : internalIndex;
+    const select = useCallback((i) => {
+        const prev = isControlled ? (controlledIndex ?? 0) : internalIndex;
+        setDirection(i >= prev ? 1 : -1);
+        prevIndexRef.current = prev;
+        if (!isControlled)
+            setInternalIndex(i);
+        onSelect?.(i);
+    }, [isControlled, controlledIndex, internalIndex, onSelect]);
+    useEffect(() => {
+        if (!autoInterval || images.length < 2)
+            return;
+        const t = setInterval(() => {
+            const next = (activeImg + 1) % images.length;
+            setDirection(1);
+            if (!isControlled)
+                setInternalIndex(next);
+            onSelect?.(next);
+        }, autoInterval);
+        return () => clearInterval(t);
+    }, [autoInterval, images.length, activeImg, isControlled, onSelect]);
+    const { isCorner, isVerticalRail, isFirst } = positionMeta(thumbPosition);
+    const anim = GALLERY_ANIMS[animationMode];
+    const trans = GALLERY_TRANSITIONS[animationMode];
+    const cornerStyle = {
+        "top-left": { top: "8px", left: "8px", bottom: "auto", right: "auto", justifyContent: "flex-start" },
+        "top-right": { top: "8px", right: "8px", bottom: "auto", left: "auto", justifyContent: "flex-end" },
+        "bottom-left": { bottom: "8px", left: "8px", top: "auto", right: "auto", justifyContent: "flex-start" },
+        "bottom-right": { bottom: "8px", right: "8px", top: "auto", left: "auto", justifyContent: "flex-end" },
+    };
+    const thumbRail = images.length > 1 ? (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: isVerticalRail ? "column" : "row",
+            gap: "6px",
+            flexShrink: 0,
+            overflowX: isVerticalRail ? "visible" : "auto",
+            overflowY: isVerticalRail ? "auto" : "visible",
+            maxHeight: isVerticalRail ? "480px" : undefined,
+            paddingBottom: (!isVerticalRail && !isCorner) ? "4px" : undefined,
+            ...(isCorner ? {
+                position: "absolute",
+                zIndex: 2,
+                ...cornerStyle[thumbPosition],
+                flexDirection: "row",
+                maxWidth: "calc(100% - 16px)",
+                overflowX: "auto",
+                overflowY: "hidden",
+            } : {}),
+            ...(isVerticalRail ? { width: `${thumbSize}px` } : {}),
+        }, children: images.map((img, i) => (_jsx("button", { onClick: () => select(i), style: {
+                flexShrink: 0,
+                width: `${thumbSize}px`,
+                height: `${thumbSize}px`,
+                borderRadius: thumbRadius,
+                overflow: "hidden",
+                border: `2px solid ${i === activeImg ? accentColor : "transparent"}`,
+                outline: i === activeImg ? `2px solid ${accentColor}` : "none",
+                outlineOffset: "1px",
+                padding: 0,
+                cursor: "pointer",
+                transition: "border-color 0.15s, opacity 0.15s",
+                opacity: i === activeImg ? 1 : 0.65,
+                ...(isCorner ? { backgroundColor: "rgba(0,0,0,0.3)", backdropFilter: "blur(4px)" } : {}),
+            }, children: _jsx(MediaLoop, { src: img, alt: `View ${i + 1}`, fit: "cover" }) }, i))) })) : null;
+    const mainImage = (_jsxs("div", { style: { flex: 1, minWidth: 0, position: "relative", overflow: "hidden" }, children: [_jsx(AspectBox, { aspect: aspect, fit: fit, style: { borderRadius: imageRadius, backgroundColor: bgColor, overflow: "hidden" }, children: _jsx(AnimatePresence, { mode: "wait", custom: direction, children: images[activeImg] && (_jsx(motion.div, { custom: direction, initial: typeof anim.initial === "function" ? anim.initial(direction) : anim.initial, animate: anim.animate, exit: typeof anim.exit === "function" ? anim.exit(direction) : anim.exit, transition: trans, style: { position: "absolute", inset: 0 }, children: _jsx(MediaLoop, { src: images[activeImg], alt: alt, fit: fit, applyImageTokens: true }) }, `${activeImg}-${images[activeImg]}`)) }) }), isCorner && thumbRail] }));
+    if (isCorner) {
+        return _jsx("div", { className: className, style: { ...style }, children: mainImage });
+    }
+    return (_jsxs("div", { className: className, style: {
+            display: "flex",
+            flexDirection: isVerticalRail ? "row" : "column",
+            gap: "12px",
+            alignItems: isVerticalRail ? "flex-start" : "stretch",
+            ...style,
+        }, children: [isFirst && thumbRail, mainImage, !isFirst && thumbRail] }));
+}
+//# sourceMappingURL=PDPGallery.js.map

package/dist/primitives/PDPGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PDPGallery.js","sourceRoot":"","sources":["../../src/primitives/PDPGallery.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/TiltCard.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from "react";
+interface TiltCardProps {
+    maxTilt?: number;
+    glare?: boolean;
+    perspective?: number;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function TiltCard({ maxTilt, glare, perspective, children, className, style, }: TiltCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TiltCard.d.ts.map

package/dist/primitives/TiltCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiltCard.d.ts","sourceRoot":"","sources":["../../src/primitives/TiltCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,QAAQ,EACR,SAAc,EACd,KAAK,GACN,EAAE,aAAa,2CAsDf"}

package/dist/primitives/TiltCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+export function TiltCard({ maxTilt = 10, glare = true, perspective = 1000, children, className = "", style, }) {
+    const ref = useRef(null);
+    const [tilt, setTilt] = useState({ x: 0, y: 0 });
+    const [glarePos, setGlarePos] = useState({ x: 50, y: 50, opacity: 0 });
+    const onMove = (e) => {
+        if (!ref.current)
+            return;
+        const r = ref.current.getBoundingClientRect();
+        const cx = r.left + r.width / 2;
+        const cy = r.top + r.height / 2;
+        const rotX = -((e.clientY - cy) / (r.height / 2)) * maxTilt;
+        const rotY = ((e.clientX - cx) / (r.width / 2)) * maxTilt;
+        setTilt({ x: rotX, y: rotY });
+        if (glare) {
+            const gx = ((e.clientX - r.left) / r.width) * 100;
+            const gy = ((e.clientY - r.top) / r.height) * 100;
+            setGlarePos({ x: gx, y: gy, opacity: 0.18 });
+        }
+    };
+    const onLeave = () => {
+        setTilt({ x: 0, y: 0 });
+        setGlarePos((g) => ({ ...g, opacity: 0 }));
+    };
+    return (_jsxs("div", { ref: ref, className: `relative ${className}`, style: {
+            transform: `perspective(${perspective}px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
+            transition: "transform 0.1s ease",
+            transformStyle: "preserve-3d",
+            ...style,
+        }, onMouseMove: onMove, onMouseLeave: onLeave, children: [children, glare && (_jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    pointerEvents: "none",
+                    borderRadius: "inherit",
+                    background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, rgba(255,255,255,${glarePos.opacity}), transparent 65%)`,
+                    transition: "opacity 0.15s ease",
+                    zIndex: 1,
+                } }))] }));
+}
+//# sourceMappingURL=TiltCard.js.map

package/dist/primitives/TiltCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiltCard.js","sourceRoot":"","sources":["../../src/primitives/TiltCard.tsx"],"names":[],"mappings":"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"}

package/dist/product/BundleBuilder.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "../types";
+export default function BundleBuilder({ content, variant, theme }: ComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BundleBuilder.d.ts.map

package/dist/product/BundleBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BundleBuilder.d.ts","sourceRoot":"","sources":["../../src/product/BundleBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,cAAc,2CAgHhF"}

package/dist/product/BundleBuilder.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { renderText } from "../renderText";
+export default function BundleBuilder({ content, variant, theme }) {
+    const rawProducts = content.products || [];
+    const products = rawProducts.map((p) => {
+        if (typeof p === "string")
+            return { name: p, image: "", price: "" };
+        const obj = p;
+        return {
+            name: renderText(obj.name),
+            image: renderText(obj.image || obj.image_url),
+            price: renderText(obj.price),
+        };
+    });
+    const bundlePrice = renderText(content.bundle_price);
+    const ctaText = content.cta_text ? renderText(content.cta_text) : undefined;
+    const savingsText = content.savings_text ? renderText(content.savings_text) : undefined;
+    const isTiered = variant === "tiered";
+    const isPickYourOwn = variant === "pick-your-own";
+    return (_jsx("section", { className: "py-16 px-5 md:py-24 lg:py-32", style: { backgroundColor: theme.palette.bg }, children: _jsxs("div", { className: "mx-auto max-w-5xl text-center", children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10", children: products.map((product, i) => (_jsxs("div", { className: "relative p-6 rounded-xl transition-transform hover:scale-[1.02]", style: { backgroundColor: theme.palette.surface }, children: [isTiered && (_jsxs("span", { className: "absolute top-3 right-3 text-xs font-bold px-2 py-1 rounded-full", style: {
+                                    backgroundColor: theme.palette.accent,
+                                    color: "#fff",
+                                }, children: ["Tier ", i + 1] })), isPickYourOwn && (_jsx("div", { className: "absolute top-3 left-3 w-5 h-5 rounded border-2 cursor-pointer", style: { borderColor: theme.palette.accent } })), product.image && (_jsx("img", { src: product.image, alt: product.name, className: "w-full h-40 object-contain mb-4" })), _jsx("h3", { className: "text-base font-semibold mb-1", style: {
+                                    fontFamily: `${theme.fonts.display}, serif`,
+                                    color: theme.palette.text,
+                                }, children: product.name }), _jsx("p", { className: "text-sm opacity-60", style: { color: theme.palette.text }, children: product.price })] }, i))) }), _jsxs("div", { className: "inline-flex flex-col items-center p-8 rounded-2xl", style: { backgroundColor: theme.palette.surface }, children: [savingsText && (_jsx("span", { className: "inline-block px-4 py-1.5 rounded-full text-sm font-bold mb-4 text-white", style: { backgroundColor: theme.palette.accent }, children: savingsText })), _jsxs("p", { className: "text-3xl font-bold mb-2", style: {
+                                fontFamily: `${theme.fonts.display}, serif`,
+                                color: theme.palette.text,
+                            }, children: ["Bundle Price: ", _jsx("span", { style: { color: theme.palette.accent }, children: bundlePrice })] }), ctaText && (_jsx("button", { className: "mt-4 inline-flex items-center px-8 py-4 font-semibold text-white hover:-translate-y-0.5 transition-transform", style: {
+                                backgroundColor: theme.palette.accent,
+                                borderRadius: "9999px",
+                            }, children: ctaText }))] })] }) }));
+}
+//# sourceMappingURL=BundleBuilder.js.map

package/dist/product/BundleBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BundleBuilder.js","sourceRoot":"","sources":["../../src/product/BundleBuilder.tsx"],"names":[],"mappings":"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"}

package/dist/product/BuyBox.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "../types";
+export default function BuyBox({ content, variant, theme, elementStyles }: ComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BuyBox.d.ts.map

package/dist/product/BuyBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuyBox.d.ts","sourceRoot":"","sources":["../../src/product/BuyBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAu0B/C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,cAAc,2CAoIxF"}