@seekora-ai/ui-sdk-react 0.2.26 → 0.2.28

package/dist/src/index.d.ts

@@ -2187,6 +2187,8 @@ interface ProductDisplayConfig {
     showImage?: boolean;
     /** Image aspect ratio */
     imageAspectRatio?: '1:1' | '4:3' | '3:4' | '16:9' | 'auto';
+    /** Image object-fit: 'cover' crops to fill (default), 'contain' fits entire image */
+    imageObjectFit?: 'cover' | 'contain';
     /** Show price */
     showPrice?: boolean;
     /** Show compare/original price */

package/dist/src/index.esm.js

@@ -9980,7 +9980,7 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
     const imageStyle = {
         width: '100%',
         height: '100%',
-        objectFit: 'cover',
+        objectFit: style?.objectFit ?? 'cover',
         display: 'block',
     };
     // Compute the indicator rectangle (what portion of the image the zoom panel shows).
@@ -10345,7 +10345,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
     if (variant === 'hover') {
         const showSecond = safeImages.length > 1 && hovering;
         const src = showSecond ? safeImages[1] : safeImages[0];
-        const hoverImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const hoverImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         if (enableZoom) {
             return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-hover', className), style: { position: 'relative', ...style }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false) },
                 React.createElement(ImageZoom, { src: src, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: showSecond ? 1 : 0, className: "seekora-img-hover-img", style: hoverImgStyle })));
@@ -10364,7 +10364,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                 return next;
             });
         };
-        const carouselImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const carouselImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-carousel-main", style: carouselImgStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: carouselImgStyle, loading: "lazy" }));
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
             mainImage,
@@ -10396,7 +10396,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                     } })))))))));
     }
     if (variant === 'thumbStrip' || variant === 'thumbList') {
-        const thumbMainStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const thumbMainStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: responsiveGap, ...style } },
             mainImage,
@@ -11579,15 +11579,15 @@ const imgPlaceholderStyle = {
     borderRadius: BORDER_RADIUS$1.sm,
     backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
-function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
+function ImageBlock({ images, title, imageVariant, aspectRatio, objectFit, enableZoom, zoomMode, zoomLevel }) {
     const ar = aspectRatio
         ? (aspectRatio.includes(':') ? aspectRatio.replace(':', '/') : aspectRatio)
         : '1';
     if (images.length > 0) {
         return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: BORDER_RADIUS$1.sm } },
-            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
+            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
     }
-    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar }, "aria-hidden": true });
+    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, "aria-hidden": true });
 }
 /** minimal: image, title, price (current default behavior) */
 function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
@@ -11595,7 +11595,7 @@ function MinimalLayout({ images, title, price, product, imageVariant, displayCon
     const titleFontSize = isMobile ? '0.9375rem' : '0.875rem'; // Slightly larger on mobile
     const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
     return (React.createElement(React.Fragment, null,
-        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, objectFit: displayConfig.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
         React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
         price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
@@ -11613,7 +11613,7 @@ function StandardLayout({ images, title, price, comparePrice, brand, badges, opt
     const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap } },
@@ -11632,7 +11632,7 @@ function DetailedLayout({ images, title, price, comparePrice, brand, badges, pri
     const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },