@seekora-ai/ui-sdk-vanilla 0.2.11 → 0.2.13

package/dist/components/rating-display.d.ts

@@ -0,0 +1,39 @@
+/**
+ * RatingDisplay - Vanilla JS
+ *
+ * Star rating display with review count and multiple variants
+ */
+export type RatingVariant = 'stars-only' | 'compact' | 'full' | 'inline';
+export type RatingSize = 'small' | 'medium' | 'large';
+export interface RatingDisplayOptions {
+    rating: number;
+    reviewCount?: number;
+    variant?: RatingVariant;
+    size?: RatingSize;
+    maxRating?: number;
+    showNumeric?: boolean;
+    showHalfStars?: boolean;
+    interactive?: boolean;
+    onRatingChange?: (rating: number) => void;
+    starColor?: string;
+    emptyStarColor?: string;
+    textColor?: string;
+    showReviewCount?: boolean;
+    reviewCountFormat?: (count: number) => string;
+    className?: string;
+}
+export declare class RatingDisplay {
+    private container;
+    private options;
+    private hoverRating;
+    constructor(containerOrSelector: string | HTMLElement, options: RatingDisplayOptions);
+    private defaultReviewCountFormat;
+    private createStarSVG;
+    private renderStars;
+    private render;
+    private attachEventListeners;
+    update(options: Partial<RatingDisplayOptions>): void;
+    destroy(): void;
+}
+export declare function createRatingDisplay(container: string | HTMLElement, options: RatingDisplayOptions): RatingDisplay;
+//# sourceMappingURL=rating-display.d.ts.map

package/dist/components/rating-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.d.ts","sourceRoot":"","sources":["../../src/components/rating-display.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,WAAW,CAAuB;gBAE9B,mBAAmB,EAAE,MAAM,GAAG,WAAW,EAAE,OAAO,EAAE,oBAAoB;IA6BpF,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,aAAa;IAmCrB,OAAO,CAAC,WAAW;IA6BnB,OAAO,CAAC,MAAM;IAyDd,OAAO,CAAC,oBAAoB;IAwBrB,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAKpD,OAAO,IAAI,IAAI;CAGvB;AAGD,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,GAAG,WAAW,EAC/B,OAAO,EAAE,oBAAoB,GAC5B,aAAa,CAEf"}

package/dist/components/rating-display.js

@@ -0,0 +1,192 @@
+/**
+ * RatingDisplay - Vanilla JS
+ *
+ * Star rating display with review count and multiple variants
+ */
+const sizeMap = {
+    small: 14,
+    medium: 18,
+    large: 24,
+};
+const fontSizeMap = {
+    small: '0.75rem',
+    medium: '0.875rem',
+    large: '1rem',
+};
+export class RatingDisplay {
+    constructor(containerOrSelector, options) {
+        this.hoverRating = null;
+        this.container = typeof containerOrSelector === 'string'
+            ? document.querySelector(containerOrSelector)
+            : containerOrSelector;
+        if (!this.container) {
+            throw new Error('RatingDisplay: Container element not found');
+        }
+        this.options = {
+            variant: 'compact',
+            size: 'medium',
+            maxRating: 5,
+            showNumeric: false,
+            showHalfStars: true,
+            interactive: false,
+            starColor: '#f59e0b',
+            emptyStarColor: '#d1d5db',
+            textColor: 'var(--seekora-text-secondary, #6b7280)',
+            showReviewCount: true,
+            onRatingChange: () => { },
+            reviewCountFormat: this.defaultReviewCountFormat,
+            className: '',
+            ...options,
+        };
+        this.render();
+    }
+    defaultReviewCountFormat(count) {
+        if (count >= 1000000)
+            return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000)
+            return `${(count / 1000).toFixed(1)}K`;
+        return count.toString();
+    }
+    createStarSVG(filled, half, size) {
+        const { starColor, emptyStarColor } = this.options;
+        if (half) {
+            return `
+        <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="half-fill-${Math.random()}">
+              <stop offset="50%" stop-color="${starColor}" />
+              <stop offset="50%" stop-color="${emptyStarColor}" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+            fill="url(#half-fill-${Math.random()})"
+            stroke="${starColor}"
+            stroke-width="1"
+          />
+        </svg>
+      `;
+        }
+        return `
+      <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? starColor : 'none'}" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+          stroke="${filled ? starColor : emptyStarColor}"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    `;
+    }
+    renderStars() {
+        const { rating, maxRating, showHalfStars, interactive } = this.options;
+        const displayRating = interactive && this.hoverRating !== null ? this.hoverRating : rating;
+        const starSize = sizeMap[this.options.size];
+        let starsHTML = '';
+        for (let i = 1; i <= maxRating; i++) {
+            const filled = i <= Math.floor(displayRating);
+            const half = showHalfStars &&
+                i === Math.ceil(displayRating) &&
+                displayRating % 1 >= 0.25 &&
+                displayRating % 1 < 0.75;
+            const classes = `seekora-rating-star ${filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty'} ${interactive ? 'seekora-rating-star--interactive' : ''}`;
+            starsHTML += `
+        <span
+          class="${classes}"
+          data-rating="${i}"
+          style="display: inline-block; width: ${starSize}px; height: ${starSize}px; cursor: ${interactive ? 'pointer' : 'default'};"
+        >
+          ${this.createStarSVG(filled, half, starSize)}
+        </span>
+      `;
+        }
+        return `<div style="display: inline-flex; align-items: center; gap: 2px;">${starsHTML}</div>`;
+    }
+    render() {
+        const { variant, rating, reviewCount, showNumeric, showReviewCount, textColor, maxRating, className } = this.options;
+        const fontSize = fontSizeMap[this.options.size];
+        const clampedRating = Math.max(0, Math.min(maxRating, rating));
+        let html = '';
+        if (variant === 'stars-only') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--stars-only ${className}"
+             style="display: inline-flex; align-items: center; gap: 2px;">
+          ${this.renderStars()}
+        </div>
+      `;
+        }
+        else if (variant === 'compact') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--compact ${className}"
+             style="display: inline-flex; align-items: center; gap: 4px; font-size: ${fontSize};">
+          ${this.renderStars()}
+          ${showNumeric ? `<span class="seekora-rating-numeric" style="font-weight: 600; color: ${textColor};">${clampedRating.toFixed(1)}</span>` : ''}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'inline') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--inline ${className}"
+             style="display: inline-flex; align-items: center; gap: 6px; font-size: ${fontSize};">
+          <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+          ${this.renderStars()}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'full') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--full ${className}"
+             style="display: flex; flex-direction: column; gap: 4px; font-size: ${fontSize};">
+          <div style="display: flex; align-items: center; gap: 6px;">
+            ${this.renderStars()}
+            <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+            <span class="seekora-rating-max" style="color: ${textColor};">/ ${maxRating}</span>
+          </div>
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `
+            <span class="seekora-rating-review-text" style="font-size: 0.875em; color: ${textColor};">
+              Based on ${this.options.reviewCountFormat(reviewCount)} ${reviewCount === 1 ? 'review' : 'reviews'}
+            </span>
+          ` : ''}
+        </div>
+      `;
+        }
+        this.container.innerHTML = html;
+        if (this.options.interactive) {
+            this.attachEventListeners();
+        }
+    }
+    attachEventListeners() {
+        const stars = this.container.querySelectorAll('.seekora-rating-star');
+        stars.forEach((star) => {
+            star.addEventListener('mouseenter', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = rating;
+                this.render();
+            });
+            star.addEventListener('click', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = null;
+                this.options.onRatingChange(rating);
+                this.render();
+            });
+        });
+        this.container.addEventListener('mouseleave', () => {
+            this.hoverRating = null;
+            this.render();
+        });
+    }
+    update(options) {
+        this.options = { ...this.options, ...options };
+        this.render();
+    }
+    destroy() {
+        this.container.innerHTML = '';
+    }
+}
+// Factory function for easier usage
+export function createRatingDisplay(container, options) {
+    return new RatingDisplay(container, options);
+}

package/dist/index.d.ts

@@ -5,6 +5,45 @@ import * as _seekora_ai_ui_sdk_types from '@seekora-ai/ui-sdk-types';
 import { Theme, ThemeConfig, ViewMode, FieldMapping, ResultItem } from '@seekora-ai/ui-sdk-types';
 export { FieldMapping, ResultItem, SuggestionItem, Theme, ThemeConfig, ViewMode } from '@seekora-ai/ui-sdk-types';
 
+/**
+ * RatingDisplay - Vanilla JS
+ *
+ * Star rating display with review count and multiple variants
+ */
+type RatingVariant = 'stars-only' | 'compact' | 'full' | 'inline';
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingDisplayOptions {
+    rating: number;
+    reviewCount?: number;
+    variant?: RatingVariant;
+    size?: RatingSize;
+    maxRating?: number;
+    showNumeric?: boolean;
+    showHalfStars?: boolean;
+    interactive?: boolean;
+    onRatingChange?: (rating: number) => void;
+    starColor?: string;
+    emptyStarColor?: string;
+    textColor?: string;
+    showReviewCount?: boolean;
+    reviewCountFormat?: (count: number) => string;
+    className?: string;
+}
+declare class RatingDisplay {
+    private container;
+    private options;
+    private hoverRating;
+    constructor(containerOrSelector: string | HTMLElement, options: RatingDisplayOptions);
+    private defaultReviewCountFormat;
+    private createStarSVG;
+    private renderStars;
+    private render;
+    private attachEventListeners;
+    update(options: Partial<RatingDisplayOptions>): void;
+    destroy(): void;
+}
+declare function createRatingDisplay(container: string | HTMLElement, options: RatingDisplayOptions): RatingDisplay;
+
 /**
  * SearchProvider
  *
@@ -669,5 +708,5 @@ declare const minimalTheme: Theme;
 
 declare const createTheme: (config: ThemeConfig) => _seekora_ai_ui_sdk_types.Theme;
 
-export { ClearRefinements, CurrentRefinements, Facets, HitsPerPage, InfiniteHits, Pagination, QuerySuggestions, RangeInput, SearchBar, SearchLayout, SearchManager, SearchProvider, SearchResults, SortBy, Stats, createTheme, darkTheme, defaultTheme, minimalTheme };
-export type { ClearRefinementsOptions, CurrentRefinementsOptions, Facet, FacetItem, FacetsOptions, HitsPerPageItem, HitsPerPageOptions, InfiniteHitsOptions, PaginationOptions, QuerySuggestionsOptions, RangeInputOptions, Refinement, SearchBarOptions, SearchLayoutOptions, SearchManagerConfig, SearchProviderConfig, SearchResultsOptions, SearchState, SortByOptions, SortOption, StatsOptions };
+export { ClearRefinements, CurrentRefinements, Facets, HitsPerPage, InfiniteHits, Pagination, QuerySuggestions, RangeInput, RatingDisplay, SearchBar, SearchLayout, SearchManager, SearchProvider, SearchResults, SortBy, Stats, createRatingDisplay, createTheme, darkTheme, defaultTheme, minimalTheme };
+export type { ClearRefinementsOptions, CurrentRefinementsOptions, Facet, FacetItem, FacetsOptions, HitsPerPageItem, HitsPerPageOptions, InfiniteHitsOptions, PaginationOptions, QuerySuggestionsOptions, RangeInputOptions, RatingDisplayOptions, RatingSize, RatingVariant, Refinement, SearchBarOptions, SearchLayoutOptions, SearchManagerConfig, SearchProviderConfig, SearchResultsOptions, SearchState, SortByOptions, SortOption, StatsOptions };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,YAAY,EACV,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,aAAa,EACb,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,aAAa,EACb,KAAK,EACL,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,UAAU,GACX,MAAM,kCAAkC,CAAC;AAC1C,YAAY,EACV,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,kBAAkB,EAClB,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAGhC,YAAY,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,GACf,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,YAAY,EACV,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,aAAa,EACb,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,aAAa,EACb,KAAK,EACL,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,UAAU,GACX,MAAM,kCAAkC,CAAC;AAC1C,YAAY,EACV,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,kBAAkB,EAClB,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAGhC,YAAY,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,GACf,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.esm.js

@@ -1,6 +1,199 @@
 import { createTheme as createTheme$1, log, SearchStateManager, extractField, formatPrice } from '@seekora-ai/ui-sdk-core';
 export { getHighlightedValue, getSnippetedValue, highlightQuery, mergeThemes, parseHighlightedParts, parseQueryHighlightParts, stripHighlightTags } from '@seekora-ai/ui-sdk-core';
 
+/**
+ * RatingDisplay - Vanilla JS
+ *
+ * Star rating display with review count and multiple variants
+ */
+const sizeMap = {
+    small: 14,
+    medium: 18,
+    large: 24,
+};
+const fontSizeMap = {
+    small: '0.75rem',
+    medium: '0.875rem',
+    large: '1rem',
+};
+class RatingDisplay {
+    constructor(containerOrSelector, options) {
+        this.hoverRating = null;
+        this.container = typeof containerOrSelector === 'string'
+            ? document.querySelector(containerOrSelector)
+            : containerOrSelector;
+        if (!this.container) {
+            throw new Error('RatingDisplay: Container element not found');
+        }
+        this.options = {
+            variant: 'compact',
+            size: 'medium',
+            maxRating: 5,
+            showNumeric: false,
+            showHalfStars: true,
+            interactive: false,
+            starColor: '#f59e0b',
+            emptyStarColor: '#d1d5db',
+            textColor: 'var(--seekora-text-secondary, #6b7280)',
+            showReviewCount: true,
+            onRatingChange: () => { },
+            reviewCountFormat: this.defaultReviewCountFormat,
+            className: '',
+            ...options,
+        };
+        this.render();
+    }
+    defaultReviewCountFormat(count) {
+        if (count >= 1000000)
+            return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000)
+            return `${(count / 1000).toFixed(1)}K`;
+        return count.toString();
+    }
+    createStarSVG(filled, half, size) {
+        const { starColor, emptyStarColor } = this.options;
+        if (half) {
+            return `
+        <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="half-fill-${Math.random()}">
+              <stop offset="50%" stop-color="${starColor}" />
+              <stop offset="50%" stop-color="${emptyStarColor}" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+            fill="url(#half-fill-${Math.random()})"
+            stroke="${starColor}"
+            stroke-width="1"
+          />
+        </svg>
+      `;
+        }
+        return `
+      <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? starColor : 'none'}" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+          stroke="${filled ? starColor : emptyStarColor}"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    `;
+    }
+    renderStars() {
+        const { rating, maxRating, showHalfStars, interactive } = this.options;
+        const displayRating = interactive && this.hoverRating !== null ? this.hoverRating : rating;
+        const starSize = sizeMap[this.options.size];
+        let starsHTML = '';
+        for (let i = 1; i <= maxRating; i++) {
+            const filled = i <= Math.floor(displayRating);
+            const half = showHalfStars &&
+                i === Math.ceil(displayRating) &&
+                displayRating % 1 >= 0.25 &&
+                displayRating % 1 < 0.75;
+            const classes = `seekora-rating-star ${filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty'} ${interactive ? 'seekora-rating-star--interactive' : ''}`;
+            starsHTML += `
+        <span
+          class="${classes}"
+          data-rating="${i}"
+          style="display: inline-block; width: ${starSize}px; height: ${starSize}px; cursor: ${interactive ? 'pointer' : 'default'};"
+        >
+          ${this.createStarSVG(filled, half, starSize)}
+        </span>
+      `;
+        }
+        return `<div style="display: inline-flex; align-items: center; gap: 2px;">${starsHTML}</div>`;
+    }
+    render() {
+        const { variant, rating, reviewCount, showNumeric, showReviewCount, textColor, maxRating, className } = this.options;
+        const fontSize = fontSizeMap[this.options.size];
+        const clampedRating = Math.max(0, Math.min(maxRating, rating));
+        let html = '';
+        if (variant === 'stars-only') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--stars-only ${className}"
+             style="display: inline-flex; align-items: center; gap: 2px;">
+          ${this.renderStars()}
+        </div>
+      `;
+        }
+        else if (variant === 'compact') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--compact ${className}"
+             style="display: inline-flex; align-items: center; gap: 4px; font-size: ${fontSize};">
+          ${this.renderStars()}
+          ${showNumeric ? `<span class="seekora-rating-numeric" style="font-weight: 600; color: ${textColor};">${clampedRating.toFixed(1)}</span>` : ''}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'inline') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--inline ${className}"
+             style="display: inline-flex; align-items: center; gap: 6px; font-size: ${fontSize};">
+          <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+          ${this.renderStars()}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'full') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--full ${className}"
+             style="display: flex; flex-direction: column; gap: 4px; font-size: ${fontSize};">
+          <div style="display: flex; align-items: center; gap: 6px;">
+            ${this.renderStars()}
+            <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+            <span class="seekora-rating-max" style="color: ${textColor};">/ ${maxRating}</span>
+          </div>
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `
+            <span class="seekora-rating-review-text" style="font-size: 0.875em; color: ${textColor};">
+              Based on ${this.options.reviewCountFormat(reviewCount)} ${reviewCount === 1 ? 'review' : 'reviews'}
+            </span>
+          ` : ''}
+        </div>
+      `;
+        }
+        this.container.innerHTML = html;
+        if (this.options.interactive) {
+            this.attachEventListeners();
+        }
+    }
+    attachEventListeners() {
+        const stars = this.container.querySelectorAll('.seekora-rating-star');
+        stars.forEach((star) => {
+            star.addEventListener('mouseenter', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = rating;
+                this.render();
+            });
+            star.addEventListener('click', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = null;
+                this.options.onRatingChange(rating);
+                this.render();
+            });
+        });
+        this.container.addEventListener('mouseleave', () => {
+            this.hoverRating = null;
+            this.render();
+        });
+    }
+    update(options) {
+        this.options = { ...this.options, ...options };
+        this.render();
+    }
+    destroy() {
+        this.container.innerHTML = '';
+    }
+}
+// Factory function for easier usage
+function createRatingDisplay(container, options) {
+    return new RatingDisplay(container, options);
+}
+
 /**
  * Default Theme
  */
@@ -4032,5 +4225,5 @@ const minimalTheme = {
     },
 };
 
-export { ClearRefinements, CurrentRefinements, Facets, HitsPerPage, InfiniteHits, Pagination, QuerySuggestions, RangeInput, SearchBar, SearchLayout, SearchManager, SearchProvider, SearchResults, SortBy, Stats, createTheme, darkTheme, defaultTheme, minimalTheme };
+export { ClearRefinements, CurrentRefinements, Facets, HitsPerPage, InfiniteHits, Pagination, QuerySuggestions, RangeInput, RatingDisplay, SearchBar, SearchLayout, SearchManager, SearchProvider, SearchResults, SortBy, Stats, createRatingDisplay, createTheme, darkTheme, defaultTheme, minimalTheme };
 //# sourceMappingURL=index.esm.js.map