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

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;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;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,qBAsNnB"}

package/dist/components/primitives/ImageDisplay.js

@@ -9,10 +9,13 @@ import { clsx } from 'clsx';
 import { ImageZoom } from './ImageZoom';
 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);
@@ -55,8 +58,8 @@ 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), 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), 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,
@@ -65,16 +68,16 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
                         display: 'flex',
                         gap: 6,
                         padding: '6px 12px',
-                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        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: {
+                    } }, 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: 8,
                         height: 8,
                         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',
                     } })))))))));
@@ -84,7 +87,7 @@ export function ImageDisplay({ images, variant = 'single', alt = '', className,
         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 } },
             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: 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(); 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" });
@@ -99,8 +102,8 @@ function arrowStyle(left) {
         height: 32,
         borderRadius: '50%',
         border: 'none',
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        color: '#111',
+        backgroundColor: 'var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9))',
+        color: 'var(--seekora-carousel-btn-text, #111)',
         fontSize: '1.25rem',
         fontWeight: 'bold',
         cursor: 'pointer',

package/dist/components/primitives/ImageZoom.js

@@ -126,8 +126,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 +142,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,
@@ -174,8 +174,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 +192,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 +204,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 +220,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 +233,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 +247,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 +261,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 +274,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 +288,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 +316,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 +332,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 +347,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')))));

package/dist/components/primitives/VariantSelector.js

@@ -76,10 +76,10 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                     fontSize: '0.875rem',
                     fontWeight: 600,
                     marginBottom: 8,
-                    color: 'var(--seekora-text-primary, #111827)',
+                    color: 'var(--seekora-text-primary, inherit)',
                 } },
                 option.name,
-                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, #6b7280)' } }, selected))),
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, inherit)' } }, selected))),
             mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
                     e.stopPropagation();
                     onSelectionChange(option.name, e.target.value);
@@ -87,9 +87,9 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                     padding: '8px 12px',
                     fontSize: '0.875rem',
                     borderRadius: 6,
-                    border: '1px solid var(--seekora-border-color, #e5e7eb)',
-                    backgroundColor: 'var(--seekora-bg-surface, #fff)',
-                    color: 'var(--seekora-text-primary, #111827)',
+                    border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+                    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+                    color: 'var(--seekora-text-primary, inherit)',
                     cursor: 'pointer',
                     minWidth: 120,
                 } },
@@ -123,7 +123,7 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                             backgroundColor: color,
                             border: isActive
                                 ? '2px solid var(--seekora-primary, #111827)'
-                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                                : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                             outline: isActive ? '2px solid var(--seekora-primary, #111827)' : 'none',
                             outlineOffset: 2,
                             cursor: available ? 'pointer' : 'not-allowed',
@@ -144,13 +144,13 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                         borderRadius: 6,
                         border: isActive
                             ? '2px solid var(--seekora-primary, #111827)'
-                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                         backgroundColor: isActive
                             ? 'var(--seekora-primary, #111827)'
-                            : 'var(--seekora-bg-surface, #fff)',
+                            : 'var(--seekora-bg-surface, transparent)',
                         color: isActive
-                            ? '#fff'
-                            : 'var(--seekora-text-primary, #111827)',
+                            ? 'transparent'
+                            : 'var(--seekora-text-primary, inherit)',
                         cursor: available ? 'pointer' : 'not-allowed',
                         opacity: available ? 1 : 0.5,
                         textDecoration: !available ? 'line-through' : 'none',

package/dist/components/primitives/VariantSwatches.js

@@ -109,7 +109,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             outlineOffset: 2,
                             cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                             flexShrink: 0,
-                            boxShadow: isSelected ? '0 0 0 1px #fff' : 'none',
+                            boxShadow: isSelected ? 'var(--seekora-swatch-ring, 0 0 0 1px #fff)' : 'none',
                             opacity: isAvailable ? 1 : 0.3,
                             position: 'relative',
                         }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
@@ -126,7 +126,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             left: '-2px',
                             right: '-2px',
                             height: 1,
-                            backgroundColor: '#ef4444',
+                            backgroundColor: 'var(--seekora-unavailable-line, #ef4444)',
                             transform: 'translateY(-50%) rotate(-45deg)',
                         } }))));
                 }
@@ -142,7 +142,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             ? 'var(--seekora-primary, #111827)'
                             : 'transparent',
                         color: isSelected
-                            ? '#fff'
+                            ? 'var(--seekora-primary-text, #fff)'
                             : 'var(--seekora-text-secondary, #6b7280)',
                         cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                         whiteSpace: 'nowrap',

package/dist/components/product-page/ProductGallery.d.ts

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { type ImageDisplayVariant } from '../primitives/ImageDisplay';
+import type { ImageZoomMode } from '../primitives/ImageZoom';
 export interface ProductGalleryProps {
     images: string[];
     variant?: ImageDisplayVariant;
@@ -14,6 +15,12 @@ export interface ProductGalleryProps {
     style?: React.CSSProperties;
     carouselAutoplay?: boolean;
     carouselIntervalMs?: number;
+    /** Enable zoom functionality on product images */
+    enableZoom?: boolean;
+    /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' */
+    zoomMode?: ImageZoomMode;
+    /** Zoom magnification level (2 = 200%, 3 = 300%) */
+    zoomLevel?: number;
 }
-export declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, }: ProductGalleryProps): React.JSX.Element;
+export declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }: ProductGalleryProps): React.JSX.Element;
 //# sourceMappingURL=ProductGallery.d.ts.map

package/dist/components/product-page/ProductGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductGallery.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC,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;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAsB,EACtB,GAAe,EACf,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,mBAAmB,qBAYrB"}
+{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductGallery.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,mBAAmB;IAClC,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,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAsB,EACtB,GAAe,EACf,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,qBAerB"}

package/dist/components/product-page/ProductGallery.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
-export function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, }) {
+export function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }) {
     return (React.createElement("div", { className: clsx('seekora-product-gallery', className), style: style },
-        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs })));
+        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
 }

package/dist/components/section-primitives/SectionSearchProvider.d.ts

@@ -18,6 +18,8 @@ export interface SectionSearchProviderProps {
     sortBy?: string;
     enabled?: boolean;
     sectionId?: string;
+    /** Additional search options merged into the request (e.g. { widget_mode: false }). */
+    searchOptions?: Record<string, unknown>;
 }
-export declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, }: SectionSearchProviderProps): React.JSX.Element;
+export declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, searchOptions, }: SectionSearchProviderProps): React.JSX.Element;
 //# sourceMappingURL=SectionSearchProvider.d.ts.map

package/dist/components/section-primitives/SectionSearchProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionSearchProvider.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionSearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,QAAa,EACb,MAAM,EACN,OAAc,EACd,SAAS,GACV,EAAE,0BAA0B,qBAgF5B"}
+{"version":3,"file":"SectionSearchProvider.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionSearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAsBD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,QAAa,EACb,MAAM,EACN,OAAc,EACd,SAAS,EACT,aAAa,GACd,EAAE,0BAA0B,qBAiF5B"}

package/dist/components/section-primitives/SectionSearchProvider.js

@@ -35,7 +35,7 @@ function extractTotal(response) {
         return Number(data.data.total_results);
     return 0;
 }
-export function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, }) {
+export function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, searchOptions, }) {
     const { client } = useSearchContext();
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -53,6 +53,7 @@ export function SectionSearchProvider({ children, query, refinements = [], maxIt
         setLoading(true);
         setError(null);
         const options = {
+            ...searchOptions,
             per_page: maxItems,
             page: 1,
         };
@@ -80,7 +81,7 @@ export function SectionSearchProvider({ children, query, refinements = [], maxIt
         return () => {
             cancelled = true;
         };
-    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    }, [client, enabled, query, maxItems, sortBy, refinements, searchOptions]);
     const trackClick = useCallback((item, position) => {
         if (!client?.trackEvent)
             return;