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

package/dist/components/Stats.js

@@ -2,13 +2,48 @@
  * Stats Component
  *
  * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
  */
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const Stats = ({ results, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' • ', }) => {
+/** CSS class name used for the animated count fade transition */
+const ANIMATE_CLASS = 'seekora-stats-animate';
+/** Inline <style> for the count-change animation and CSS custom properties */
+const statsStyleId = 'seekora-stats-styles';
+function ensureStatsStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(statsStyleId))
+        return;
+    const style = document.createElement('style');
+    style.id = statsStyleId;
+    style.textContent = `
+    .seekora-stats-root {
+      --seekora-stats-color: inherit;
+      --seekora-stats-bg: transparent;
+      --seekora-stats-font-size: inherit;
+      --seekora-stats-badge-bg: inherit;
+      --seekora-stats-badge-color: inherit;
+    }
+    .${ANIMATE_CLASS} {
+      opacity: 0;
+      transition: opacity 250ms ease-in-out;
+    }
+  `;
+    document.head.appendChild(style);
+}
+export const Stats = ({ results: resultsProp, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' \u2022 ', variant = 'inline', showResultCount = true, formatNumber, }) => {
     const { theme } = useSearchContext();
+    const { results: stateResults } = useSearchState();
     const statsTheme = customTheme || {};
+    // Use results from prop if provided, otherwise from state manager
+    const results = resultsProp || stateResults;
+    // Inject keyframe / transition styles once
+    useEffect(() => {
+        ensureStatsStyles();
+    }, []);
     // Extract stats from results
     const res = results;
     const totalResults = res?.totalResults
@@ -19,34 +54,148 @@ export const Stats = ({ results, renderStats, className, style, theme: customThe
         || res?.data?.processingTimeMS
         || res?.data?.data?.processingTimeMS;
     const query = (res?.query ?? '');
-    const defaultRenderStats = () => {
-        const parts = [];
-        if (totalResults > 0) {
-            parts.push(`${totalResults.toLocaleString()} result${totalResults !== 1 ? 's' : ''}`);
+    // Number formatter
+    const fmt = formatNumber || ((n) => n.toLocaleString());
+    // Animated count change — toggle a CSS class briefly on totalResults change
+    const countRef = useRef(null);
+    const prevTotalRef = useRef(totalResults);
+    const [animating, setAnimating] = useState(false);
+    useEffect(() => {
+        if (prevTotalRef.current !== totalResults) {
+            prevTotalRef.current = totalResults;
+            setAnimating(true);
+            // After a frame, remove the class so the transition plays (opacity 0 -> 1)
+            const raf = requestAnimationFrame(() => {
+                setAnimating(false);
+            });
+            return () => cancelAnimationFrame(raf);
         }
-        else {
-            parts.push('No results');
+    }, [totalResults]);
+    // Helper: border radius value from theme
+    const borderRadiusSmall = typeof theme.borderRadius === 'string'
+        ? theme.borderRadius
+        : theme.borderRadius.small;
+    // ─── Custom render ────────────────────────────────────────
+    if (renderStats) {
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: style }, renderStats({
+            totalResults,
+            processingTime,
+            query,
+        })));
+    }
+    // ─── Inline variant (original behaviour) ──────────────────
+    if (variant === 'inline') {
+        const parts = [];
+        if (showResultCount) {
+            if (totalResults > 0) {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text },
+                    React.createElement("span", { ref: countRef, className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults)),
+                    ` result${totalResults !== 1 ? 's' : ''}`));
+            }
+            else {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text }, "No results"));
+            }
         }
         if (showProcessingTime && processingTime !== undefined) {
-            parts.push(`${processingTime}ms`);
+            parts.push(React.createElement("span", { key: "time", className: statsTheme.text },
+                fmt(processingTime),
+                "ms"));
         }
         if (showQuery && query) {
-            parts.push(`for "${query}"`);
+            parts.push(React.createElement("span", { key: "query", className: statsTheme.text },
+                "for \"",
+                query,
+                "\""));
         }
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: {
-                fontSize: theme.typography.fontSize.medium,
-                color: theme.colors.text,
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
                 ...style,
             } }, parts.map((part, index) => (React.createElement("span", { key: index },
-            index > 0 && React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator),
-            React.createElement("span", { className: statsTheme.text }, part))))));
-    };
-    if (renderStats) {
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: style }, renderStats({
-            totalResults,
-            processingTime,
-            query,
-        })));
+            index > 0 && (React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator)),
+            part)))));
+    }
+    // ─── Badge variant ────────────────────────────────────────
+    if (variant === 'badge') {
+        const badges = [];
+        const badgeStyle = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: theme.spacing.small,
+            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+            borderRadius: borderRadiusSmall,
+            backgroundColor: `var(--seekora-stats-badge-bg, ${theme.colors.primary}1A)`, // 10 % opacity hex
+            color: `var(--seekora-stats-badge-color, ${theme.colors.primary})`,
+            fontSize: theme.typography.fontSize.small,
+            fontWeight: 500,
+        };
+        if (showResultCount) {
+            badges.push(React.createElement("span", { key: "count", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Results"),
+                React.createElement("span", { className: clsx(statsTheme.badgeValue, animating && ANIMATE_CLASS), style: { fontWeight: 600, transition: 'opacity 250ms ease-in-out' } }, totalResults > 0 ? fmt(totalResults) : '0')));
+        }
+        if (showQuery && query) {
+            badges.push(React.createElement("span", { key: "query", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Query"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } }, query)));
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            badges.push(React.createElement("span", { key: "time", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Time"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } },
+                    fmt(processingTime),
+                    "ms")));
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.small + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, badges));
+    }
+    // ─── Detailed variant ─────────────────────────────────────
+    if (variant === 'detailed') {
+        const rows = [];
+        if (showResultCount) {
+            rows.push({
+                label: 'Total Results',
+                value: (React.createElement("span", { className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults))),
+            });
+        }
+        if (showQuery && query) {
+            rows.push({ label: 'Query', value: query });
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            rows.push({ label: 'Time', value: `${fmt(processingTime)}ms` });
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.detailed, statsTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, rows.map((row, index) => (React.createElement("div", { key: index, className: statsTheme.detailedRow, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+            } },
+            React.createElement("span", { className: statsTheme.detailedLabel, style: {
+                    color: theme.colors.textSecondary,
+                    fontWeight: 500,
+                } },
+                row.label,
+                ":"),
+            React.createElement("span", { className: statsTheme.detailedValue, style: {
+                    color: theme.colors.text,
+                    fontWeight: 600,
+                } }, row.value))))));
     }
-    return defaultRenderStats();
+    // Fallback (should not be reached)
+    return null;
 };

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;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')))));