@seekora-ai/ui-sdk-react 0.2.14 → 0.2.16

package/dist/components/SearchResults.js

@@ -29,7 +29,7 @@ const formatPrice = (value, currency = '₹') => {
     }
     return String(value);
 };
-export const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', loadingOpacity = 0.7, }) => {
+export const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', }) => {
     const { theme, client, enableAnalytics } = useSearchContext();
     const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
     const searchResultsTheme = customTheme || {};
@@ -53,6 +53,43 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             }
         }
     }, [activeIndex, enableKeyboardNavigation]);
+    // Global keyboard listener for seamless navigation from search box to results
+    useEffect(() => {
+        if (!enableKeyboardNavigation)
+            return;
+        const handleGlobalKeyDown = (e) => {
+            // Only handle if we have results and the container exists
+            if (!containerRef.current)
+                return;
+            const resultElements = containerRef.current.querySelectorAll('[data-result-index]');
+            const maxIndex = resultElements.length - 1;
+            if (maxIndex < 0)
+                return;
+            // Check if focus is on an input/textarea (search box)
+            const activeElement = document.activeElement;
+            const isInputFocused = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA';
+            if (e.key === 'ArrowDown') {
+                // If in search box or no result selected, select first result
+                if (isInputFocused || activeIndex === -1) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                    containerRef.current?.focus();
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                // If first result is selected, go back to search box
+                if (activeIndex === 0) {
+                    e.preventDefault();
+                    setActiveIndex(-1);
+                    // Find and focus the search input
+                    const searchInput = document.querySelector('input[type="text"], input[type="search"]');
+                    searchInput?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [enableKeyboardNavigation, activeIndex]);
     // Keyboard navigation handler
     const handleKeyDown = useCallback((e) => {
         if (!enableKeyboardNavigation)
@@ -262,11 +299,6 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             textAlign: 'center',
             color: theme.colors.text,
         } }, "No results found"));
-    const defaultRenderLoading = () => (React.createElement("div", { className: searchResultsTheme.loadingState, style: {
-            padding: theme.spacing.large,
-            textAlign: 'center',
-            color: theme.colors.text,
-        } }, "Loading results..."));
     const defaultRenderError = (err) => (React.createElement("div", { className: searchResultsTheme.errorState, style: {
             padding: theme.spacing.large,
             textAlign: 'center',
@@ -375,8 +407,6 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
     const containerStyle = {
         minHeight: `var(--seekora-results-min-height, ${minHeight})`,
         minWidth: `var(--seekora-results-min-width, ${minWidth})`,
-        transition: 'opacity 200ms ease-in-out',
-        opacity: loading && resultItems.length > 0 ? loadingOpacity : 1,
         ...style,
     };
     // Determine results list style based on view mode
@@ -400,12 +430,6 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
         hasError: !!error,
         isLoading: loading,
     });
-    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
-    if (loading && resultItems.length === 0 && showLoadingState) {
-        log.verbose('SearchResults: Rendering loading state');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderLoading ? renderLoading() : defaultRenderLoading()));
-    }
-    // When loading with previous results, fall through and render them (with opacity transition)
     if (error) {
         log.error('SearchResults: Rendering error state', {
             error: error.message,
@@ -428,30 +452,5 @@ export const SearchResults = ({ results: resultsProp, loading: loadingProp, erro
             results?.totalResults || results?.data?.total_results || 0,
             " result",
             (results?.totalResults || results?.data?.total_results || 0) !== 1 ? 's' : '')),
-        enableKeyboardNavigation && resultItems.length > 0 && (React.createElement("div", { style: {
-                fontSize: '12px',
-                color: theme.colors.text,
-                opacity: 0.6,
-                marginBottom: theme.spacing.small,
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center',
-            } },
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u2191\u2193 navigate"),
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u21B5 select"))),
         React.createElement("div", { className: searchResultsTheme.resultsList, style: resultsListStyle }, resultItems.map((result, index) => renderFn(result, index, index === activeIndex)))));
 };

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

@@ -1 +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"}
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B,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

@@ -6,6 +6,30 @@
  */
 import React from 'react';
 import { clsx } from 'clsx';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+const SHADOWS = {
+    sm: '0 1px 2px rgba(0,0,0,0.05)',
+    md: '0 2px 4px rgba(0,0,0,0.1)',
+    lg: '0 4px 6px rgba(0,0,0,0.1)',
+    xl: '0 10px 15px rgba(0,0,0,0.1)',
+};
 const DEFAULT_ICONS = {
     addToCart: '🛒',
     wishlist: '♡',
@@ -21,8 +45,8 @@ const DEFAULT_LABELS = {
     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' },
+    small: { width: 44, height: 44, fontSize: '0.75rem', iconSize: '1rem' },
+    medium: { width: 44, height: 44, 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, }) {
@@ -31,11 +55,11 @@ export function ActionButtons({ buttons, layout = 'horizontal', position = 'inli
     const containerStyle = {
         display: 'flex',
         flexDirection: layout === 'vertical' ? 'column' : 'row',
-        gap: 6,
+        gap: SPACING.sm,
         ...(isOverlay ? {
             position: 'absolute',
-            ...(position === 'top-right' ? { top: 8, right: 8 } : {}),
-            ...(position === 'bottom-center' ? { bottom: 8, left: '50%', transform: 'translateX(-50%)' } : {}),
+            ...(position === 'top-right' ? { top: SPACING.sm, right: SPACING.sm } : {}),
+            ...(position === 'bottom-center' ? { bottom: SPACING.sm, left: '50%', transform: 'translateX(-50%)' } : {}),
         } : {}),
         ...style,
     };
@@ -50,12 +74,12 @@ export function ActionButtons({ buttons, layout = 'horizontal', position = 'inli
         fontSize: sizeConfig.fontSize,
         fontWeight: 500,
         border: 'none',
-        borderRadius: 6,
-        backgroundColor: 'var(--seekora-bg-surface, #fff)',
-        color: 'var(--seekora-text, #111827)',
+        borderRadius: BORDER_RADIUS.md,
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text, inherit)',
         cursor: 'pointer',
-        transition: 'all 150ms ease',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        transition: `all ${TRANSITIONS.fast}`,
+        boxShadow: SHADOWS.md,
     };
     const handleClick = (btn, e) => {
         e.stopPropagation();

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

@@ -1 +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"}
+{"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;AAyB7D,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

@@ -3,19 +3,39 @@
  */
 import React from 'react';
 import { clsx } from 'clsx';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+// Z-index scale for consistent layering
+const Z_INDEX = {
+    dropdown: 100,
+    modal: 200,
+    overlay: 300,
+    tooltip: 50,
+};
 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 },
+    'top-left': { position: 'absolute', top: SPACING.sm, left: SPACING.sm },
+    'top-right': { position: 'absolute', top: SPACING.sm, right: SPACING.sm },
+    'bottom-left': { position: 'absolute', bottom: SPACING.sm, left: SPACING.sm },
+    'bottom-right': { position: 'absolute', bottom: SPACING.sm, right: SPACING.sm },
     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' },
+    sale: { bg: 'var(--seekora-badge-sale-bg, #ef4444)', text: 'var(--seekora-badge-sale-text, #fff)' },
+    new: { bg: 'var(--seekora-badge-new-bg, #3b82f6)', text: 'var(--seekora-badge-new-text, #fff)' },
+    soldOut: { bg: 'var(--seekora-badge-soldout-bg, #6b7280)', text: 'var(--seekora-badge-soldout-text, #fff)' },
+    limited: { bg: 'var(--seekora-badge-limited-bg, #f59e0b)', text: 'var(--seekora-badge-limited-text, #fff)' },
+    custom: { bg: 'var(--seekora-badge-custom-bg, #111827)', text: 'var(--seekora-badge-custom-text, #fff)' },
 };
 export function BadgeList({ badges, maxBadges, position = 'top-left', className, style, }) {
     if (!badges || badges.length === 0)
@@ -24,8 +44,8 @@ export function BadgeList({ badges, maxBadges, position = 'top-left', className,
     return (React.createElement("div", { className: clsx('seekora-badge-list', className), style: {
             display: 'flex',
             flexWrap: 'wrap',
-            gap: 4,
-            zIndex: 1,
+            gap: SPACING.xs,
+            zIndex: 2,
             ...positionStyles[position],
             ...style,
         } }, visible.map((badge, i) => {
@@ -33,10 +53,10 @@ export function BadgeList({ badges, maxBadges, position = 'top-left', className,
         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,
+                borderRadius: BORDER_RADIUS.sm,
                 fontSize: '0.6875rem',
                 fontWeight: 600,
-                lineHeight: 1.4,
+                lineHeight: 1.2,
                 backgroundColor: badge.color ?? colors.bg,
                 color: badge.textColor ?? colors.text,
                 whiteSpace: 'nowrap',

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,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"}
+{"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;AAGjD,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;AAaD,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,qBA8NnB"}

package/dist/components/primitives/ImageDisplay.js

@@ -7,18 +7,27 @@
 import React, { useState } from 'react';
 import { clsx } from 'clsx';
 import { ImageZoom } from './ImageZoom';
+import { useIsMobile, useTouchTargetSize, useResponsiveGap } from '../../utils/responsive';
 const imgBaseStyle = {
     width: '100%',
+    height: 'auto',
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    display: 'block',
+    overflow: 'hidden',
 };
 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) : [];
     const current = safeImages[index] ?? safeImages[0];
+    // Responsive values
+    const isMobile = useIsMobile();
+    const arrowSize = useTouchTargetSize(32); // 44px on mobile, 32px on desktop
+    const thumbSize = isMobile ? 56 : 48; // Larger thumbnails on mobile
+    const responsiveGap = useResponsiveGap(8);
     if (safeImages.length === 0) {
         return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
     }
@@ -55,26 +64,28 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
             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: (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"),
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u203A"),
                 showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
                         position: 'absolute',
-                        bottom: 8,
+                        bottom: isMobile ? 12 : 8,
                         left: '50%',
                         transform: 'translateX(-50%)',
                         display: 'flex',
-                        gap: 6,
-                        padding: '6px 12px',
-                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        gap: isMobile ? 8 : 6,
+                        padding: isMobile ? '8px 16px' : '6px 12px',
+                        backgroundColor: 'var(--seekora-carousel-dots-bg, 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,
+                    } }, 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(); e.preventDefault(); setIndex(i); }, style: {
+                        width: isMobile ? 10 : 8,
+                        height: isMobile ? 10 : 8,
+                        minWidth: isMobile ? 44 : 32, // Ensure touch target
+                        minHeight: isMobile ? 44 : 32,
                         borderRadius: '50%',
                         border: 'none',
                         padding: 0,
-                        backgroundColor: i === index ? '#fff' : 'rgba(255,255,255,0.5)',
+                        backgroundColor: i === index ? 'var(--seekora-carousel-dot-active, #fff)' : 'var(--seekora-carousel-dot, rgba(255,255,255,0.5))',
                         cursor: 'pointer',
                         transition: 'all 150ms ease',
                     } })))))))));
@@ -82,26 +93,28 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
     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 } },
+        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: responsiveGap, ...style } },
             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("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: isMobile ? 6 : 4, overflowX: 'auto', paddingBottom: isMobile ? 6 : 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: thumbSize, height: thumbSize, minWidth: thumbSize, minHeight: thumbSize, 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(); e.preventDefault(); } },
                 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" });
 }
-function arrowStyle(left) {
+function arrowStyle(left, size = 32) {
     return {
         position: 'absolute',
         top: '50%',
-        [left ? 'left' : 'right']: 8,
+        [left ? 'left' : 'right']: size >= 44 ? 4 : 8, // Less offset on mobile for larger buttons
         transform: 'translateY(-50%)',
-        width: 32,
-        height: 32,
+        width: size,
+        height: size,
+        minWidth: size,
+        minHeight: size,
         borderRadius: '50%',
         border: 'none',
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        color: '#111',
-        fontSize: '1.25rem',
+        backgroundColor: 'var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9))',
+        color: 'var(--seekora-carousel-btn-text, #111)',
+        fontSize: size >= 44 ? '1.5rem' : '1.25rem', // Larger font on mobile
         fontWeight: 'bold',
         cursor: 'pointer',
         display: 'flex',

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

@@ -1 +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"}
+{"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,qBAiiBhB"}

package/dist/components/primitives/ImageZoom.js

@@ -114,10 +114,66 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
         const rect = containerRef.current.getBoundingClientRect();
         const bgPosX = (cursorPos.x / rect.width) * 100;
         const bgPosY = (cursorPos.y / rect.height) * 100;
+        // Calculate available space in all directions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const gap = 16;
+        const mouseBuffer = 50; // Minimum distance from mouse cursor
+        // Calculate mouse position in viewport
+        const mouseX = rect.left + cursorPos.x;
+        const mouseY = rect.top + cursorPos.y;
+        // Calculate space available in each direction
+        const spaceRight = viewportWidth - rect.right - gap;
+        const spaceLeft = rect.left - gap;
+        // Determine optimal horizontal position
+        let left;
+        let top = rect.top;
+        // Try right side first (default Amazon-style)
+        if (spaceRight >= zoomPanelSize.width) {
+            left = rect.right + gap;
+        }
+        // Try left side
+        else if (spaceLeft >= zoomPanelSize.width) {
+            left = rect.left - zoomPanelSize.width - gap;
+        }
+        // Not enough space on either side - center on the side with more space
+        else if (spaceRight > spaceLeft) {
+            left = rect.right + gap;
+        }
+        else {
+            left = Math.max(gap, rect.left - zoomPanelSize.width - gap);
+        }
+        // Adjust vertical position to keep within viewport
+        // Try to align with image top by default
+        if (rect.top + zoomPanelSize.height > viewportHeight - gap) {
+            // Panel would overflow bottom - adjust upward
+            top = Math.max(gap, viewportHeight - zoomPanelSize.height - gap);
+        }
+        // Ensure panel doesn't overlap with mouse cursor
+        const panelRight = left + zoomPanelSize.width;
+        const panelBottom = top + zoomPanelSize.height;
+        // Check if mouse is inside the panel area
+        if (mouseX >= left - mouseBuffer &&
+            mouseX <= panelRight + mouseBuffer &&
+            mouseY >= top - mouseBuffer &&
+            mouseY <= panelBottom + mouseBuffer) {
+            // Mouse is too close - try to reposition
+            // If on right side and there's space on left, flip to left
+            if (left > rect.right && spaceLeft >= zoomPanelSize.width) {
+                left = rect.left - zoomPanelSize.width - gap;
+            }
+            // If on left side and there's space on right, flip to right
+            else if (left < rect.left && spaceRight >= zoomPanelSize.width) {
+                left = rect.right + gap;
+            }
+        }
+        // Clamp to viewport boundaries
+        left = Math.max(gap, Math.min(left, viewportWidth - zoomPanelSize.width - gap));
+        top = Math.max(gap, Math.min(top, viewportHeight - zoomPanelSize.height - gap));
         return {
-            position: 'fixed', // Changed from absolute to fixed for better positioning
-            top: rect.top,
-            left: rect.right + 16, // 16px gap from the image
+            position: 'fixed',
+            top,
+            left,
             width: zoomPanelSize.width,
             height: zoomPanelSize.height,
             backgroundImage: `url(${src})`,
@@ -126,8 +182,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
             backgroundRepeat: 'no-repeat',
             border: '2px solid var(--seekora-border-color, #e5e7eb)',
             borderRadius: 8,
-            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
-            backgroundColor: '#fff',
+            boxShadow: 'var(--seekora-zoom-panel-shadow, 0 8px 24px rgba(0,0,0,0.2))',
+            backgroundColor: 'var(--seekora-zoom-panel-bg, #fff)',
             pointerEvents: 'none',
             zIndex: 9998,
         };
@@ -142,9 +198,9 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
             height: lensSize,
             left: cursorPos.x - lensSize / 2,
             top: cursorPos.y - lensSize / 2,
-            border: '2px solid rgba(255,255,255,0.8)',
+            border: 'var(--seekora-lens-border, 2px solid rgba(255,255,255,0.8))',
             borderRadius: '50%',
-            boxShadow: '0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3)',
+            boxShadow: 'var(--seekora-lens-shadow, 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3))',
             pointerEvents: 'none',
             overflow: 'hidden',
             zIndex: 100,
@@ -154,7 +210,6 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
         if (!containerRef.current || !imageRef.current)
             return {};
         const rect = containerRef.current.getBoundingClientRect();
-        const imgRect = imageRef.current.getBoundingClientRect();
         return {
             position: 'absolute',
             width: rect.width * zoomLevel,
@@ -174,8 +229,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     width: 32,
                     height: 32,
                     borderRadius: '50%',
-                    backgroundColor: 'rgba(0,0,0,0.6)',
-                    color: '#fff',
+                    backgroundColor: 'var(--seekora-zoom-indicator-bg, rgba(0,0,0,0.6))',
+                    color: 'var(--seekora-zoom-indicator-text, #fff)',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -192,8 +247,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     top: cursorPos.y - 75,
                     width: 150,
                     height: 150,
-                    border: '2px solid rgba(0,0,0,0.3)',
-                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    border: 'var(--seekora-hover-area-border, 2px solid rgba(0,0,0,0.3))',
+                    backgroundColor: 'var(--seekora-hover-area-bg, rgba(255,255,255,0.1))',
                     pointerEvents: 'none',
                     zIndex: 50,
                 } })),
@@ -204,7 +259,7 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                 left: 0,
                 right: 0,
                 bottom: 0,
-                backgroundColor: 'rgba(0,0,0,0.95)',
+                backgroundColor: 'var(--seekora-lightbox-bg, rgba(0,0,0,0.95))',
                 zIndex: 9999,
                 display: 'flex',
                 alignItems: 'center',
@@ -220,8 +275,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     height: 44,
                     borderRadius: '50%',
                     border: 'none',
-                    backgroundColor: 'rgba(255,255,255,0.2)',
-                    color: '#fff',
+                    backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                    color: 'var(--seekora-lightbox-btn-text, #fff)',
                     fontSize: '1.5rem',
                     cursor: 'pointer',
                     display: 'flex',
@@ -233,9 +288,9 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     e.stopPropagation();
                     closeLightbox();
                 }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                 }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                 } }, "\u2715"),
             hasMultipleImages && (React.createElement(React.Fragment, null,
                 React.createElement("button", { type: "button", "aria-label": "Previous image", style: {
@@ -247,8 +302,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                         height: 56,
                         borderRadius: '50%',
                         border: 'none',
-                        backgroundColor: 'rgba(255,255,255,0.2)',
-                        color: '#fff',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
                         fontSize: '2rem',
                         fontWeight: 'bold',
                         cursor: 'pointer',
@@ -261,9 +316,9 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                         e.stopPropagation();
                         goToPrev();
                     }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                     }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                     } }, "\u2039"),
                 React.createElement("button", { type: "button", "aria-label": "Next image", style: {
                         position: 'absolute',
@@ -274,8 +329,8 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                         height: 56,
                         borderRadius: '50%',
                         border: 'none',
-                        backgroundColor: 'rgba(255,255,255,0.2)',
-                        color: '#fff',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
                         fontSize: '2rem',
                         fontWeight: 'bold',
                         cursor: 'pointer',
@@ -288,9 +343,9 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                         e.stopPropagation();
                         goToNext();
                     }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                     }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                     } }, "\u203A"))),
             React.createElement("img", { src: allImages[lightboxIndex], alt: alt, style: {
                     maxWidth: '90%',
@@ -316,7 +371,7 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                         width: 60,
                         height: 60,
                         padding: 0,
-                        border: i === lightboxIndex ? '3px solid #fff' : '2px solid rgba(255,255,255,0.3)',
+                        border: i === lightboxIndex ? 'var(--seekora-lightbox-thumb-border-active, 3px solid #fff)' : 'var(--seekora-lightbox-thumb-border, 2px solid rgba(255,255,255,0.3))',
                         borderRadius: 4,
                         overflow: 'hidden',
                         cursor: 'pointer',
@@ -332,10 +387,10 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     } },
                     React.createElement("img", { src: img, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } }))))),
                 React.createElement("div", { style: {
-                        color: 'rgba(255,255,255,0.9)',
+                        color: 'var(--seekora-lightbox-counter-text, rgba(255,255,255,0.9))',
                         fontSize: '0.875rem',
                         textAlign: 'center',
-                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        backgroundColor: 'var(--seekora-lightbox-counter-bg, rgba(0,0,0,0.5))',
                         padding: '4px 12px',
                         borderRadius: 12,
                     } },
@@ -347,10 +402,10 @@ export function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, class
                     top: 20,
                     left: '50%',
                     transform: 'translateX(-50%)',
-                    color: 'rgba(255,255,255,0.7)',
+                    color: 'var(--seekora-lightbox-instructions-text, rgba(255,255,255,0.7))',
                     fontSize: '0.875rem',
                     textAlign: 'center',
-                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    backgroundColor: 'var(--seekora-lightbox-instructions-bg, rgba(0,0,0,0.5))',
                     padding: '8px 16px',
                     borderRadius: 12,
                 } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')))));