@seekora-ai/ui-sdk-react 0.2.10 → 0.2.12

package/dist/components/primitives/ActionButtons.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
+ *
+ * Renders a set of action buttons for product cards. Can be positioned absolutely
+ * over the image (on hover) or inline below the card content.
+ */
+import React from 'react';
+export type ActionButtonType = 'addToCart' | 'wishlist' | 'buyNow' | 'quickView' | 'compare';
+export interface ActionButton {
+    type: ActionButtonType;
+    label?: string;
+    icon?: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export interface ActionButtonsProps {
+    buttons: ActionButton[];
+    layout?: 'horizontal' | 'vertical' | 'overlay';
+    position?: 'top-right' | 'bottom-center' | 'inline';
+    showLabels?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ActionButtons({ buttons, layout, position, showLabels, size, className, style, }: ActionButtonsProps): React.JSX.Element;
+//# sourceMappingURL=ActionButtons.d.ts.map

package/dist/components/primitives/ActionButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7F,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAqB,EACrB,QAAmB,EACnB,UAAkB,EAClB,IAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,qBAqFpB"}

package/dist/components/primitives/ActionButtons.js

@@ -0,0 +1,78 @@
+/**
+ * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
+ *
+ * Renders a set of action buttons for product cards. Can be positioned absolutely
+ * over the image (on hover) or inline below the card content.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+const DEFAULT_ICONS = {
+    addToCart: '🛒',
+    wishlist: '♡',
+    buyNow: '⚡',
+    quickView: '👁',
+    compare: '⚖',
+};
+const DEFAULT_LABELS = {
+    addToCart: 'Add to Cart',
+    wishlist: 'Wishlist',
+    buyNow: 'Buy Now',
+    quickView: 'Quick View',
+    compare: 'Compare',
+};
+const BUTTON_SIZES = {
+    small: { width: 28, height: 28, fontSize: '0.75rem', iconSize: '1rem' },
+    medium: { width: 36, height: 36, fontSize: '0.875rem', iconSize: '1.25rem' },
+    large: { width: 44, height: 44, fontSize: '1rem', iconSize: '1.5rem' },
+};
+export function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', showLabels = false, size = 'medium', className, style, }) {
+    const sizeConfig = BUTTON_SIZES[size];
+    const isOverlay = position !== 'inline';
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        gap: 6,
+        ...(isOverlay ? {
+            position: 'absolute',
+            ...(position === 'top-right' ? { top: 8, right: 8 } : {}),
+            ...(position === 'bottom-center' ? { bottom: 8, left: '50%', transform: 'translateX(-50%)' } : {}),
+        } : {}),
+        ...style,
+    };
+    const buttonBaseStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        padding: showLabels ? '0 12px' : 0,
+        width: showLabels ? 'auto' : sizeConfig.width,
+        height: sizeConfig.height,
+        fontSize: sizeConfig.fontSize,
+        fontWeight: 500,
+        border: 'none',
+        borderRadius: 6,
+        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        color: 'var(--seekora-text, #111827)',
+        cursor: 'pointer',
+        transition: 'all 150ms ease',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    };
+    const handleClick = (btn, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (btn.onClick && !btn.disabled && !btn.loading) {
+            btn.onClick(e);
+        }
+    };
+    return (React.createElement("div", { className: clsx('seekora-action-buttons', `seekora-action-buttons--${layout}`, className), style: containerStyle }, buttons.map((btn, i) => {
+        const icon = btn.icon ?? DEFAULT_ICONS[btn.type];
+        const label = btn.label ?? DEFAULT_LABELS[btn.type];
+        return (React.createElement("button", { key: i, type: "button", className: clsx('seekora-action-button', `seekora-action-button--${btn.type}`, btn.disabled && 'seekora-action-button--disabled', btn.loading && 'seekora-action-button--loading'), style: {
+                ...buttonBaseStyle,
+                opacity: btn.disabled ? 0.5 : 1,
+                cursor: btn.disabled ? 'not-allowed' : 'pointer',
+            }, onClick: (e) => handleClick(btn, e), disabled: btn.disabled, "aria-label": label, title: label }, btn.loading ? (React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, "\u23F3")) : (React.createElement(React.Fragment, null,
+            React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, icon),
+            showLabels && React.createElement("span", null, label)))));
+    })));
+}

package/dist/components/primitives/AnalyticsProvider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AnalyticsProvider – context + delegated event listener for data-seekora-* attribute-based analytics
+ *
+ * Installs a delegated click listener on a container. Any descendant with
+ * data-seekora-track="click"|"add-to-cart" and data-seekora-product-id="..."
+ * automatically fires analytics events without React wiring.
+ */
+import React from 'react';
+import type { SeekoraClient, SearchContext } from '@seekora-ai/search-sdk';
+export interface AnalyticsProviderProps {
+    client: SeekoraClient;
+    context?: SearchContext | Partial<SearchContext>;
+    children: React.ReactNode;
+}
+interface AnalyticsContextValue {
+    client: SeekoraClient;
+    context?: SearchContext | Partial<SearchContext>;
+}
+export declare const useAnalyticsProvider: () => AnalyticsContextValue | null;
+export declare function AnalyticsProvider({ client, context, children }: AnalyticsProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsProvider.d.ts.map

package/dist/components/primitives/AnalyticsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/AnalyticsProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoE,MAAM,OAAO,CAAC;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG3E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,qBAAqB;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;CAClD;AAID,eAAO,MAAM,oBAAoB,oCAAqC,CAAC;AAEvE,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,sBAAsB,qBAsFtF"}

package/dist/components/primitives/AnalyticsProvider.js

@@ -0,0 +1,87 @@
+/**
+ * AnalyticsProvider – context + delegated event listener for data-seekora-* attribute-based analytics
+ *
+ * Installs a delegated click listener on a container. Any descendant with
+ * data-seekora-track="click"|"add-to-cart" and data-seekora-product-id="..."
+ * automatically fires analytics events without React wiring.
+ */
+import React, { useRef, useEffect, useCallback, createContext, useContext } from 'react';
+import { log } from '@seekora-ai/ui-sdk-core';
+const AnalyticsContext = createContext(null);
+export const useAnalyticsProvider = () => useContext(AnalyticsContext);
+export function AnalyticsProvider({ client, context, children }) {
+    const containerRef = useRef(null);
+    const sendEvent = useCallback(async (eventName, metadata) => {
+        try {
+            await client.trackEvent?.({
+                event_name: eventName,
+                metadata: {
+                    timestamp: Date.now(),
+                    source: 'analytics_provider_delegation',
+                    ...metadata,
+                },
+            }, context);
+            log.verbose(`AnalyticsProvider: ${eventName}`, metadata);
+        }
+        catch (error) {
+            log.warn(`AnalyticsProvider: Failed to track ${eventName}`, { error });
+        }
+    }, [client, context]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            // Walk up from target to find element with data-seekora-track
+            const tracked = target.closest('[data-seekora-track]');
+            if (!tracked)
+                return;
+            const trackType = tracked.getAttribute('data-seekora-track');
+            const productId = tracked.getAttribute('data-seekora-product-id');
+            const position = tracked.getAttribute('data-seekora-position');
+            const section = tracked.getAttribute('data-seekora-section');
+            const variantSku = tracked.getAttribute('data-seekora-variant-sku');
+            const variantOption = tracked.getAttribute('data-seekora-variant-option');
+            const variantValue = tracked.getAttribute('data-seekora-variant-value');
+            const metadata = {};
+            if (productId)
+                metadata.product_id = productId;
+            if (position)
+                metadata.position = parseInt(position, 10);
+            if (section)
+                metadata.section = section;
+            switch (trackType) {
+                case 'click':
+                    sendEvent('product.click', metadata);
+                    if (client?.trackClick && productId) {
+                        const pos = position ? parseInt(position, 10) + 1 : 1;
+                        Promise.resolve(client.trackClick(productId, pos, context)).catch(() => { });
+                    }
+                    break;
+                case 'add-to-cart':
+                    if (variantSku)
+                        metadata.variant_sku = variantSku;
+                    sendEvent('product.add_to_cart', metadata);
+                    break;
+                case 'variant-select':
+                    if (variantOption)
+                        metadata.option_name = variantOption;
+                    if (variantValue)
+                        metadata.option_value = variantValue;
+                    sendEvent('product.variant_select', metadata);
+                    break;
+                default:
+                    // Custom track type — use it as event name
+                    if (trackType) {
+                        sendEvent(trackType, metadata);
+                    }
+                    break;
+            }
+        };
+        container.addEventListener('click', handleClick);
+        return () => container.removeEventListener('click', handleClick);
+    }, [client, context, sendEvent]);
+    return (React.createElement(AnalyticsContext.Provider, { value: { client, context } },
+        React.createElement("div", { ref: containerRef, style: { display: 'contents' } }, children)));
+}

package/dist/components/primitives/BadgeList.d.ts

@@ -0,0 +1,14 @@
+/**
+ * BadgeList – renders product badges (sale, new, sold out, custom)
+ */
+import React from 'react';
+import type { ProductBadge } from '@seekora-ai/ui-sdk-types';
+export interface BadgeListProps {
+    badges: ProductBadge[];
+    maxBadges?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function BadgeList({ badges, maxBadges, position, className, style, }: BadgeListProps): React.JSX.Element | null;
+//# sourceMappingURL=BadgeList.d.ts.map

package/dist/components/primitives/BadgeList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeList.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/BadgeList.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,QAAQ,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkBD,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,SAAS,EACT,QAAqB,EACrB,SAAS,EACT,KAAK,GACN,EAAE,cAAc,4BA4ChB"}

package/dist/components/primitives/BadgeList.js

@@ -0,0 +1,45 @@
+/**
+ * BadgeList – renders product badges (sale, new, sold out, custom)
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+const positionStyles = {
+    'top-left': { position: 'absolute', top: 6, left: 6 },
+    'top-right': { position: 'absolute', top: 6, right: 6 },
+    'bottom-left': { position: 'absolute', bottom: 6, left: 6 },
+    'bottom-right': { position: 'absolute', bottom: 6, right: 6 },
+    inline: {},
+};
+const typeColors = {
+    sale: { bg: '#ef4444', text: '#fff' },
+    new: { bg: '#3b82f6', text: '#fff' },
+    soldOut: { bg: '#6b7280', text: '#fff' },
+    limited: { bg: '#f59e0b', text: '#fff' },
+    custom: { bg: '#111827', text: '#fff' },
+};
+export function BadgeList({ badges, maxBadges, position = 'top-left', className, style, }) {
+    if (!badges || badges.length === 0)
+        return null;
+    const visible = maxBadges ? badges.slice(0, maxBadges) : badges;
+    return (React.createElement("div", { className: clsx('seekora-badge-list', className), style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 4,
+            zIndex: 1,
+            ...positionStyles[position],
+            ...style,
+        } }, visible.map((badge, i) => {
+        const colors = typeColors[badge.type ?? 'custom'];
+        return (React.createElement("span", { key: `${badge.text}-${i}`, className: clsx('seekora-badge', badge.type && `seekora-badge--${badge.type === 'soldOut' ? 'sold-out' : badge.type}`), style: {
+                display: 'inline-block',
+                padding: '2px 8px',
+                borderRadius: 4,
+                fontSize: '0.6875rem',
+                fontWeight: 600,
+                lineHeight: 1.4,
+                backgroundColor: badge.color ?? colors.bg,
+                color: badge.textColor ?? colors.text,
+                whiteSpace: 'nowrap',
+            } }, badge.text));
+    })));
+}

package/dist/components/primitives/ImageDisplay.d.ts

@@ -5,6 +5,7 @@
  * ProductCard, ProductGallery. Overridable via className/style.
  */
 import React from 'react';
+import type { ImageZoomMode } from './ImageZoom';
 export type ImageDisplayVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
 export interface ImageDisplayProps {
     images: string[];
@@ -14,6 +15,14 @@ export interface ImageDisplayProps {
     style?: React.CSSProperties;
     carouselAutoplay?: boolean;
     carouselIntervalMs?: number;
+    /** Enable zoom functionality */
+    enableZoom?: boolean;
+    /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' (hover + click) */
+    zoomMode?: ImageZoomMode;
+    /** Zoom magnification level (2 = 200%, 3 = 300%) */
+    zoomLevel?: number;
+    /** Show navigation dots for carousel */
+    showDots?: boolean;
 }
-export declare function ImageDisplay({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, }: ImageDisplayProps): React.JSX.Element;
+export declare function ImageDisplay({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, showDots, }: ImageDisplayProps): React.JSX.Element;
 //# sourceMappingURL=ImageDisplay.d.ts.map

package/dist/components/primitives/ImageDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ImageDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAUD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAkB,EAClB,GAAQ,EACR,SAAS,EACT,KAAK,EACL,gBAAwB,EACxB,kBAAyB,GAC1B,EAAE,iBAAiB,qBAiFnB"}
+{"version":3,"file":"ImageDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ImageDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAkB,EAClB,GAAQ,EACR,SAAS,EACT,KAAK,EACL,gBAAwB,EACxB,kBAAyB,EACzB,UAAkB,EAClB,QAAiB,EACjB,SAAe,EACf,QAAe,GAChB,EAAE,iBAAiB,qBAsNnB"}

package/dist/components/primitives/ImageDisplay.js

@@ -6,6 +6,7 @@
  */
 import React, { useState } from 'react';
 import { clsx } from 'clsx';
+import { ImageZoom } from './ImageZoom';
 const imgBaseStyle = {
     width: '100%',
     aspectRatio: '1',
@@ -13,7 +14,7 @@ const imgBaseStyle = {
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-export function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, }) {
+export function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, enableZoom = false, zoomMode = 'both', zoomLevel = 2.5, showDots = true, }) {
     const [index, setIndex] = useState(0);
     const [hovering, setHovering] = useState(false);
     const safeImages = Array.isArray(images) ? images.filter(Boolean) : [];
@@ -22,13 +23,21 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
         return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
     }
     if (variant === 'single') {
+        if (enableZoom) {
+            return (React.createElement(ImageZoom, { src: safeImages[0], alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: 0, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style } }));
+        }
         return (React.createElement("img", { src: safeImages[0], alt: alt, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" }));
     }
     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;
+        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 })));
+        }
         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("img", { src: src, alt: alt, className: "seekora-img-hover-img", style: imgBaseStyle, loading: "lazy" })));
+            React.createElement("img", { src: src, alt: alt, className: "seekora-img-hover-img", style: hoverImgStyle, loading: "lazy" })));
     }
     if (variant === 'carousel') {
         const go = (delta) => {
@@ -41,16 +50,41 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
                 return next;
             });
         };
+        const carouselImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : 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 } },
-            React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: imgBaseStyle, loading: "lazy" }),
+            mainImage,
             safeImages.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: () => go(-1) }),
-                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: () => go(1) })))));
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u203A"),
+                showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
+                        position: 'absolute',
+                        bottom: 8,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        display: 'flex',
+                        gap: 6,
+                        padding: '6px 12px',
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        borderRadius: 12,
+                        zIndex: 10,
+                    } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); setIndex(i); }, style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        border: 'none',
+                        padding: 0,
+                        backgroundColor: i === index ? '#fff' : 'rgba(255,255,255,0.5)',
+                        cursor: 'pointer',
+                        transition: 'all 150ms ease',
+                    } })))))))));
     }
     if (variant === 'thumbStrip' || variant === 'thumbList') {
+        const thumbMainStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : 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: 8, ...style } },
-            React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: imgBaseStyle, loading: "lazy" }),
-            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: () => setIndex(i) },
+            mainImage,
+            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => e.stopPropagation() },
                 React.createElement("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })))))));
     }
     return React.createElement("img", { src: current, alt: alt, className: clsx('seekora-img-display', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" });
@@ -64,11 +98,17 @@ function arrowStyle(left) {
         width: 32,
         height: 32,
         borderRadius: '50%',
-        border: '1px solid var(--seekora-border-color)',
-        backgroundColor: 'var(--seekora-bg-surface)',
+        border: 'none',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        color: '#111',
+        fontSize: '1.25rem',
+        fontWeight: 'bold',
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+        zIndex: 10,
+        transition: 'all 150ms ease',
     };
 }

package/dist/components/primitives/ImageZoom.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ImageZoom – zoom on hover and click (Amazon-style magnifier + lightbox)
+ *
+ * Supports three zoom modes:
+ * - hover: Magnified view in a separate panel on the right (Amazon style)
+ * - lens: Magnifying glass that follows cursor
+ * - click: Full-screen lightbox modal
+ */
+import React from 'react';
+export type ImageZoomMode = 'hover' | 'lens' | 'click' | 'both';
+export interface ImageZoomProps {
+    src: string;
+    alt?: string;
+    mode?: ImageZoomMode;
+    zoomLevel?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Show zoom indicator icon */
+    showZoomIndicator?: boolean;
+    /** Lens size in pixels (for lens mode) */
+    lensSize?: number;
+    /** Zoom panel size (for hover mode) */
+    zoomPanelSize?: {
+        width: number;
+        height: number;
+    };
+    /** Multiple images for lightbox carousel */
+    images?: string[];
+    /** Current image index (for multi-image support) */
+    currentIndex?: number;
+}
+export declare function ImageZoom({ src, alt, mode, zoomLevel, className, style, showZoomIndicator, lensSize, zoomPanelSize, images, currentIndex, }: ImageZoomProps): React.JSX.Element;
+//# sourceMappingURL=ImageZoom.d.ts.map

package/dist/components/primitives/ImageZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageZoom.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ImageZoom.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAQ,EACR,IAAa,EACb,SAAe,EACf,SAAS,EACT,KAAK,EACL,iBAAwB,EACxB,QAAc,EACd,aAA2C,EAC3C,MAAM,EACN,YAAgB,GACjB,EAAE,cAAc,qBAgehB"}