@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/SortBy.js

@@ -0,0 +1,183 @@
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results in multiple display variants:
+ * - dropdown (default) — native select element
+ * - button-group — horizontal row of toggle buttons
+ * - radio-group — vertical list of radio inputs
+ *
+ * Integrates with SearchStateManager for automatic state sync.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-sort-bg           — background color
+ * --seekora-sort-color        — text color
+ * --seekora-sort-border       — border color
+ * --seekora-sort-active-bg    — active item background
+ * --seekora-sort-active-color — active item text color
+ */
+import React, { useCallback, useEffect, useId } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+import { CustomSelect } from './primitives/CustomSelect';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Map a size token to theme fontSize and spacing values. */
+function sizeStyles(size, theme) {
+    switch (size) {
+        case 'small':
+            return { fontSize: theme.typography.fontSize.small, padding: theme.spacing.small };
+        case 'large':
+            return { fontSize: theme.typography.fontSize.large, padding: theme.spacing.medium };
+        case 'medium':
+        default:
+            return { fontSize: theme.typography.fontSize.medium, padding: theme.spacing.small };
+    }
+}
+function resolveBorderRadius(br) {
+    return typeof br === 'string' ? br : br.medium;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, variant = 'dropdown', label, showLabel, size = 'medium', }) => {
+    const { theme } = useSearchContext();
+    const { sortBy: stateManagerSortBy, setSortBy } = useSearchState();
+    const sortByTheme = customTheme || {};
+    const instanceId = useId();
+    // Determine whether the label should render.
+    const shouldShowLabel = showLabel !== undefined ? showLabel : !!label;
+    // ------ State ----------------------------------------------------------
+    const [internalValue, setInternalValue] = React.useState(defaultValue || options[0]?.value || '');
+    // Sync with StateManager on mount if defaultValue is set
+    useEffect(() => {
+        if (syncWithState && defaultValue && !stateManagerSortBy) {
+            setSortBy(defaultValue, false); // Don't trigger search on initial sync
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Determine the current value: controlled prop > StateManager > internal
+    const value = valueProp !== undefined
+        ? valueProp
+        : syncWithState && stateManagerSortBy
+            ? stateManagerSortBy
+            : internalValue;
+    // ------ Handlers -------------------------------------------------------
+    const handleChange = (e) => {
+        applyValue(e.target.value);
+    };
+    const applyValue = useCallback((newValue) => {
+        setInternalValue(newValue);
+        if (syncWithState) {
+            setSortBy(newValue);
+        }
+        if (onSortChange) {
+            onSortChange(newValue);
+        }
+    }, [syncWithState, setSortBy, onSortChange]);
+    // ------ Derived styles -------------------------------------------------
+    const { fontSize, padding } = sizeStyles(size, theme);
+    const borderRadius = resolveBorderRadius(theme.borderRadius);
+    const cssVarStyle = {
+        '--seekora-sort-bg': theme.colors.background,
+        '--seekora-sort-color': theme.colors.text,
+        '--seekora-sort-border': theme.colors.border,
+        '--seekora-sort-active-bg': theme.colors.primary,
+        '--seekora-sort-active-color': theme.colors.background,
+    };
+    // ------ Label ----------------------------------------------------------
+    const labelElement = shouldShowLabel && label ? (React.createElement("span", { className: clsx(sortByTheme.label), style: {
+            display: 'block',
+            marginBottom: theme.spacing.small,
+            fontSize,
+            color: 'var(--seekora-sort-color)',
+            fontWeight: 500,
+        } }, label)) : null;
+    // ------ Dropdown variant (original) ------------------------------------
+    if (variant === 'dropdown') {
+        if (renderSelect) {
+            return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+                labelElement,
+                renderSelect({
+                    value,
+                    onChange: handleChange,
+                    options,
+                })));
+        }
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement(CustomSelect, { value: value, onChange: applyValue, options: options, placeholder: placeholder, "aria-label": label || 'Sort results', className: clsx(sortByTheme.select), style: {
+                    width: '100%',
+                    '--seekora-select-font-size': fontSize,
+                    '--seekora-select-border': 'var(--seekora-sort-border)',
+                    '--seekora-select-radius': borderRadius,
+                    '--seekora-select-bg': 'var(--seekora-sort-bg)',
+                    '--seekora-select-color': 'var(--seekora-sort-color)',
+                } })));
+    }
+    // ------ Button group variant -------------------------------------------
+    if (variant === 'button-group') {
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "group", "aria-label": label || 'Sort results', className: clsx(sortByTheme.buttonGroup), style: {
+                    display: 'inline-flex',
+                    borderRadius,
+                    overflow: 'hidden',
+                    border: '1px solid var(--seekora-sort-border)',
+                } }, options.map((option, index) => {
+                const isActive = option.value === value;
+                return (React.createElement("button", { key: option.value, type: "button", role: "button", "aria-pressed": isActive, onClick: () => applyValue(option.value), className: clsx(sortByTheme.buttonGroupItem, isActive && sortByTheme.buttonGroupItemActive), style: {
+                        padding,
+                        fontSize,
+                        border: 'none',
+                        borderRight: index < options.length - 1
+                            ? '1px solid var(--seekora-sort-border)'
+                            : 'none',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'var(--seekora-sort-bg)',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        cursor: 'pointer',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                        outline: 'none',
+                    } }, option.label));
+            }))));
+    }
+    // ------ Radio group variant --------------------------------------------
+    if (variant === 'radio-group') {
+        const radioName = `seekora-sort-${instanceId}`;
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "radiogroup", "aria-label": label || 'Sort results', className: clsx(sortByTheme.radioGroup), style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: theme.spacing.small,
+                } }, options.map((option) => {
+                const isActive = option.value === value;
+                const radioId = `${radioName}-${option.value}`;
+                return (React.createElement("label", { key: option.value, htmlFor: radioId, className: clsx(sortByTheme.radioItem, isActive && sortByTheme.radioItemActive), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing.small,
+                        padding,
+                        borderRadius,
+                        cursor: 'pointer',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'transparent',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                    } },
+                    React.createElement("input", { type: "radio", id: radioId, name: radioName, value: option.value, checked: isActive, onChange: () => applyValue(option.value), style: { margin: 0 } }),
+                    React.createElement("span", { className: clsx(sortByTheme.radioLabel), style: { fontSize } }, option.label)));
+            }))));
+    }
+    // Fallback — should never reach here, but satisfies TS exhaustiveness
+    return null;
+};

package/dist/components/Stats.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Stats Component
+ *
+ * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
+ */
+import React from 'react';
+import type { SearchResponse } from '@seekora-ai/search-sdk';
+export interface StatsTheme {
+    container?: string;
+    text?: string;
+    highlight?: string;
+    separator?: string;
+    badge?: string;
+    badgeLabel?: string;
+    badgeValue?: string;
+    detailed?: string;
+    detailedRow?: string;
+    detailedLabel?: string;
+    detailedValue?: string;
+}
+export interface StatsProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Custom render function */
+    renderStats?: (stats: {
+        totalResults: number;
+        processingTime?: number;
+        query?: string;
+    }) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: StatsTheme;
+    /** Show processing time */
+    showProcessingTime?: boolean;
+    /** Show query */
+    showQuery?: boolean;
+    /** Custom separator between stats */
+    separator?: string;
+    /** Display variant */
+    variant?: 'inline' | 'badge' | 'detailed';
+    /** Show result count (default: true) */
+    showResultCount?: boolean;
+    /** Custom number formatter (default: toLocaleString) */
+    formatNumber?: (n: number) => string;
+}
+export declare const Stats: React.FC<StatsProps>;
+//# sourceMappingURL=Stats.d.ts.map

package/dist/components/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/components/Stats.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C,wCAAwC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC;AA8BD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsTtC,CAAC"}

package/dist/components/Stats.js

@@ -0,0 +1,201 @@
+/**
+ * Stats Component
+ *
+ * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { clsx } from 'clsx';
+/** 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
+        || res?.data?.total_results
+        || res?.data?.data?.total_results
+        || 0;
+    const processingTime = res?.processingTimeMS
+        || res?.data?.processingTimeMS
+        || res?.data?.data?.processingTimeMS;
+    const query = (res?.query ?? '');
+    // 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);
+        }
+    }, [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(React.createElement("span", { key: "time", className: statsTheme.text },
+                fmt(processingTime),
+                "ms"));
+        }
+        if (showQuery && query) {
+            parts.push(React.createElement("span", { key: "query", className: statsTheme.text },
+                "for \"",
+                query,
+                "\""));
+        }
+        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)),
+            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))))));
+    }
+    // Fallback (should not be reached)
+    return null;
+};

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

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

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

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

@@ -0,0 +1,102 @@
+/**
+ * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
+ *
+ * Renders a set of action buttons for product cards. Can be positioned absolutely
+ * over the image (on hover) or inline below the card content.
+ */
+import React from 'react';
+import { clsx } from 'clsx';
+const 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: '♡',
+    buyNow: '⚡',
+    quickView: '👁',
+    compare: '⚖',
+};
+const DEFAULT_LABELS = {
+    addToCart: 'Add to Cart',
+    wishlist: 'Wishlist',
+    buyNow: 'Buy Now',
+    quickView: 'Quick View',
+    compare: 'Compare',
+};
+const BUTTON_SIZES = {
+    small: { width: 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, }) {
+    const sizeConfig = BUTTON_SIZES[size];
+    const isOverlay = position !== 'inline';
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        gap: SPACING.sm,
+        ...(isOverlay ? {
+            position: 'absolute',
+            ...(position === 'top-right' ? { top: SPACING.sm, right: SPACING.sm } : {}),
+            ...(position === 'bottom-center' ? { bottom: SPACING.sm, left: '50%', transform: 'translateX(-50%)' } : {}),
+        } : {}),
+        ...style,
+    };
+    const buttonBaseStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        padding: showLabels ? '0 12px' : 0,
+        width: showLabels ? 'auto' : sizeConfig.width,
+        height: sizeConfig.height,
+        fontSize: sizeConfig.fontSize,
+        fontWeight: 500,
+        border: 'none',
+        borderRadius: BORDER_RADIUS.md,
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text, inherit)',
+        cursor: 'pointer',
+        transition: `all ${TRANSITIONS.fast}`,
+        boxShadow: SHADOWS.md,
+    };
+    const handleClick = (btn, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (btn.onClick && !btn.disabled && !btn.loading) {
+            btn.onClick(e);
+        }
+    };
+    return (React.createElement("div", { className: clsx('seekora-action-buttons', `seekora-action-buttons--${layout}`, className), style: containerStyle }, buttons.map((btn, i) => {
+        const icon = btn.icon ?? DEFAULT_ICONS[btn.type];
+        const label = btn.label ?? DEFAULT_LABELS[btn.type];
+        return (React.createElement("button", { key: i, type: "button", className: clsx('seekora-action-button', `seekora-action-button--${btn.type}`, btn.disabled && 'seekora-action-button--disabled', btn.loading && 'seekora-action-button--loading'), style: {
+                ...buttonBaseStyle,
+                opacity: btn.disabled ? 0.5 : 1,
+                cursor: btn.disabled ? 'not-allowed' : 'pointer',
+            }, onClick: (e) => handleClick(btn, e), disabled: btn.disabled, "aria-label": label, title: label }, btn.loading ? (React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, "\u23F3")) : (React.createElement(React.Fragment, null,
+            React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, icon),
+            showLabels && React.createElement("span", null, label)))));
+    })));
+}

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

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

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

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