@rovela-ai/sdk 0.4.1 → 0.4.2

package/dist/products/components/ProductGallery.d.ts

@@ -0,0 +1,30 @@
+export interface ProductGalleryProps {
+    /** Media URLs in display order. Mix images + videos freely. */
+    media: string[];
+    /** Alt text for images / aria label for videos */
+    alt: string;
+    /** Custom className */
+    className?: string;
+    /** Thumbnail position */
+    thumbnailPosition?: 'bottom' | 'left';
+    /** Main media aspect ratio */
+    aspectRatio?: 'square' | 'portrait' | 'landscape';
+    /** Enable zoom on click (image only — videos always show controls instead) */
+    enableZoom?: boolean;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+}
+/**
+ * ProductGallery component — images and videos in a unified strip.
+ *
+ * @example
+ * ```tsx
+ * <ProductGallery
+ *   media={[...product.images, ...product.videos]}
+ *   alt={product.name}
+ *   thumbnailPosition="left"
+ * />
+ * ```
+ */
+export declare function ProductGallery({ media, alt, className, thumbnailPosition, aspectRatio, enableZoom, showArrows, }: ProductGalleryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductGallery.d.ts.map

package/dist/products/components/ProductGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/products/components/ProductGallery.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,kDAAkD;IAClD,GAAG,EAAE,MAAM,CAAA;IACX,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACrC,8BAA8B;IAC9B,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IACjD,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,SAAS,EACT,iBAA4B,EAC5B,WAAsB,EACtB,UAAkB,EAClB,UAAiB,GAClB,EAAE,mBAAmB,2CA8OrB"}

package/dist/products/components/ProductGallery.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @rovela/sdk/products/components/ProductGallery
+ *
+ * Media gallery for product pages. Pass a single `media` URL list — image URLs
+ * render as `<Image>`, video URLs (`.mp4`/`.webm`/`.mov`) render as `<video>`.
+ * Detection is purely URL-extension based.
+ */
+import { useState, useCallback, useMemo } from 'react';
+import Image from 'next/image';
+import { ImageIcon, ChevronLeft, ChevronRight, X, Play } from 'lucide-react';
+import { cn } from '../../core/utils';
+import { isVideoUrl } from '../../media';
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProductGallery component — images and videos in a unified strip.
+ *
+ * @example
+ * ```tsx
+ * <ProductGallery
+ *   media={[...product.images, ...product.videos]}
+ *   alt={product.name}
+ *   thumbnailPosition="left"
+ * />
+ * ```
+ */
+export function ProductGallery({ media, alt, className, thumbnailPosition = 'bottom', aspectRatio = 'square', enableZoom = false, showArrows = true, }) {
+    const items = useMemo(() => media ?? [], [media]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [isZoomed, setIsZoomed] = useState(false);
+    const aspectClasses = {
+        square: 'aspect-square',
+        portrait: 'aspect-[3/4]',
+        landscape: 'aspect-[4/3]',
+    };
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowLeft') {
+            setActiveIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
+        }
+        else if (e.key === 'ArrowRight') {
+            setActiveIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
+        }
+    }, [items.length]);
+    const goToPrevious = useCallback(() => {
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
+    }, [items.length]);
+    const goToNext = useCallback(() => {
+        setActiveIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
+    }, [items.length]);
+    const handleThumbnailClick = useCallback((index) => {
+        setActiveIndex(index);
+    }, []);
+    // Zoom only applies to images. Clicking on a video tile does nothing —
+    // the inline `controls` UI takes over playback.
+    const handleMainImageClick = useCallback((currentIsVideo) => {
+        if (enableZoom && !currentIsVideo) {
+            setIsZoomed(!isZoomed);
+        }
+    }, [enableZoom, isZoomed]);
+    // Empty state
+    if (!items || items.length === 0) {
+        return (_jsx("div", { className: cn('relative overflow-hidden rounded-lg bg-muted', aspectClasses[aspectRatio], className), children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-muted-foreground", children: _jsx(ImageIcon, { className: "h-16 w-16", strokeWidth: 1 }) }) }));
+    }
+    const containerClasses = cn('flex gap-4', thumbnailPosition === 'left' ? 'flex-row' : 'flex-col', className);
+    const thumbnailContainerClasses = cn('flex gap-2', thumbnailPosition === 'left' ? 'flex-col' : 'flex-row', thumbnailPosition === 'left' ? 'order-first w-20' : 'order-last');
+    const activeUrl = items[activeIndex];
+    const activeIsVideo = isVideoUrl(activeUrl);
+    return (_jsxs("div", { className: containerClasses, onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("div", { className: cn('relative overflow-hidden rounded-lg bg-muted', aspectClasses[aspectRatio], enableZoom && !activeIsVideo && 'cursor-zoom-in'), onClick: () => handleMainImageClick(activeIsVideo), children: activeIsVideo ? (_jsx("video", { src: activeUrl, controls: true, preload: "metadata", playsInline: true, "aria-label": `${alt} - Video ${activeIndex + 1}`, className: "absolute inset-0 h-full w-full object-cover" }, activeUrl)) : (
+                        // object-contain so the whole product is visible — customer studies
+                        // the photo on the detail page and shouldn't see a cropped center.
+                        // Container at line 169-174 already has bg-muted, so the letterbox
+                        // reads as intentional. Hover/click zoom (scale transforms) still
+                        // works the same with contain. Same policy on admin
+                        // ImageGalleryUpload + ProductCard.
+                        _jsx(Image, { src: activeUrl, alt: `${alt} - Image ${activeIndex + 1}`, fill: true, sizes: "(max-width: 768px) 100vw, 50vw", className: cn('object-contain transition-transform duration-300', isZoomed && 'scale-150 cursor-zoom-out'), priority: activeIndex === 0 })) }), showArrows && items.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: goToPrevious, className: "absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 shadow-sm transition-colors hover:bg-background", "aria-label": "Previous media", children: _jsx(ChevronLeft, { className: "h-5 w-5" }) }), _jsx("button", { type: "button", onClick: goToNext, className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 shadow-sm transition-colors hover:bg-background", "aria-label": "Next media", children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] })), items.length > 1 && (_jsxs("div", { className: "absolute bottom-2 right-2 rounded-full bg-background/80 px-2 py-1 text-xs font-medium", children: [activeIndex + 1, " / ", items.length] }))] }), items.length > 1 && (_jsx("div", { className: thumbnailContainerClasses, children: items.map((url, index) => {
+                    const tileIsVideo = isVideoUrl(url);
+                    return (_jsx("button", { type: "button", onClick: () => handleThumbnailClick(index), className: cn('relative aspect-square overflow-hidden rounded-md transition-all bg-muted/30', thumbnailPosition === 'left' ? 'w-full' : 'w-16 sm:w-20', activeIndex === index
+                            ? 'ring-2 ring-primary ring-offset-2'
+                            : 'opacity-70 hover:opacity-100'), "aria-label": tileIsVideo
+                            ? `View video ${index + 1}`
+                            : `View image ${index + 1}`, "aria-current": activeIndex === index ? 'true' : 'false', children: tileIsVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { src: url, preload: "metadata", muted: true, playsInline: true, className: "absolute inset-0 h-full w-full object-cover" }), _jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/20", "aria-hidden": "true", children: _jsx(Play, { className: "h-5 w-5 fill-white text-white drop-shadow" }) })] })) : (
+                        // Match the main image policy — object-contain so the
+                        // thumbnail truthfully represents what the customer will
+                        // see when they click it (including aspect-ratio shape).
+                        _jsx(Image, { src: url, alt: `${alt} thumbnail ${index + 1}`, fill: true, sizes: "80px", className: "object-contain" })) }, url));
+                }) })), isZoomed && enableZoom && !activeIsVideo && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80", onClick: () => setIsZoomed(false), children: [_jsx("button", { className: "absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20", onClick: () => setIsZoomed(false), "aria-label": "Close zoom", children: _jsx(X, { className: "h-6 w-6" }) }), _jsx("div", { className: "relative h-[90vh] w-[90vw]", children: _jsx(Image, { src: activeUrl, alt: `${alt} - Zoomed`, fill: true, sizes: "90vw", className: "object-contain" }) })] }))] }));
+}
+//# sourceMappingURL=ProductGallery.js.map

package/dist/products/components/ProductGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.js","sourceRoot":"","sources":["../../../src/products/components/ProductGallery.tsx"],"names":[],"mappings":"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"}

package/dist/products/components/ProductGrid.d.ts

@@ -0,0 +1,50 @@
+import { type ProductCardProps } from './ProductCard';
+import type { Product } from '../../core/types';
+export interface ProductGridProps {
+    /** Products to display */
+    products: Product[];
+    /** Number of columns on different screen sizes */
+    columns?: {
+        sm?: 1 | 2;
+        md?: 2 | 3 | 4;
+        lg?: 3 | 4 | 5 | 6;
+    };
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Custom className */
+    className?: string;
+    /** Props to pass to each ProductCard */
+    cardProps?: Omit<ProductCardProps, 'product'>;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Number of skeleton cards to show while loading */
+    skeletonCount?: number;
+}
+/**
+ * ProductGrid component for displaying products in a responsive grid.
+ *
+ * @example
+ * ```tsx
+ * import { ProductGrid } from '@rovela/sdk/products'
+ *
+ * function ProductListing() {
+ *   const { products, isLoading } = useProducts()
+ *
+ *   return (
+ *     <ProductGrid
+ *       products={products}
+ *       isLoading={isLoading}
+ *       columns={{ sm: 2, md: 3, lg: 4 }}
+ *       cardProps={{
+ *         showQuickAdd: true,
+ *         onQuickAdd: handleQuickAdd,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function ProductGrid({ products, columns, gap, className, cardProps, emptyState, isLoading, skeletonCount, }: ProductGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductGrid.d.ts.map

package/dist/products/components/ProductGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.d.ts","sourceRoot":"","sources":["../../../src/products/components/ProductGrid.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAM/C,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;QACV,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACd,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;KACnB,CAAA;IACD,wBAAwB;IACxB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;IAC7C,0BAA0B;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAiC,EACjC,GAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAiB,EACjB,aAAiB,GAClB,EAAE,gBAAgB,2CAqElB"}

package/dist/products/components/ProductGrid.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @rovela/sdk/products/components/ProductGrid
+ *
+ * Responsive grid layout for product cards.
+ */
+import { Package } from 'lucide-react';
+import { cn } from '../../core/utils';
+import { ProductCard } from './ProductCard';
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProductGrid component for displaying products in a responsive grid.
+ *
+ * @example
+ * ```tsx
+ * import { ProductGrid } from '@rovela/sdk/products'
+ *
+ * function ProductListing() {
+ *   const { products, isLoading } = useProducts()
+ *
+ *   return (
+ *     <ProductGrid
+ *       products={products}
+ *       isLoading={isLoading}
+ *       columns={{ sm: 2, md: 3, lg: 4 }}
+ *       cardProps={{
+ *         showQuickAdd: true,
+ *         onQuickAdd: handleQuickAdd,
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function ProductGrid({ products, columns = { sm: 2, md: 3, lg: 4 }, gap = 'md', className, cardProps, emptyState, isLoading = false, skeletonCount = 8, }) {
+    const columnClasses = {
+        sm: {
+            1: 'grid-cols-1',
+            2: 'grid-cols-2',
+        },
+        md: {
+            2: 'md:grid-cols-2',
+            3: 'md:grid-cols-3',
+            4: 'md:grid-cols-4',
+        },
+        lg: {
+            3: 'lg:grid-cols-3',
+            4: 'lg:grid-cols-4',
+            5: 'lg:grid-cols-5',
+            6: 'lg:grid-cols-6',
+        },
+    };
+    const gapClasses = {
+        sm: 'gap-3',
+        md: 'gap-4 md:gap-6',
+        lg: 'gap-6 md:gap-8',
+    };
+    const gridClassName = cn('grid', columnClasses.sm[columns.sm || 2], columnClasses.md[columns.md || 3], columnClasses.lg[columns.lg || 4], gapClasses[gap], className);
+    // Loading state with skeletons
+    if (isLoading) {
+        return (_jsx("div", { className: gridClassName, children: Array.from({ length: skeletonCount }).map((_, i) => (_jsx(ProductCardSkeleton, {}, i))) }));
+    }
+    // Empty state
+    if (products.length === 0) {
+        if (emptyState) {
+            return _jsx(_Fragment, { children: emptyState });
+        }
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Package, { className: "mb-4 h-12 w-12 text-muted-foreground", strokeWidth: 1 }), _jsx("h3", { className: "text-lg font-medium text-foreground", children: "No products found" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Try adjusting your filters or search terms." })] }));
+    }
+    return (_jsx("div", { className: gridClassName, children: products.map((product) => (_jsx(ProductCard, { product: product, ...cardProps }, product.id))) }));
+}
+// =============================================================================
+// Skeleton Component
+// =============================================================================
+function ProductCardSkeleton() {
+    return (_jsxs("div", { className: "animate-pulse overflow-hidden rounded-lg border bg-card", children: [_jsx("div", { className: "aspect-square w-full bg-muted" }), _jsxs("div", { className: "p-4", children: [_jsx("div", { className: "h-4 w-3/4 rounded bg-muted" }), _jsx("div", { className: "mt-2 h-4 w-1/2 rounded bg-muted" }), _jsx("div", { className: "mt-3 h-5 w-1/3 rounded bg-muted" })] })] }));
+}
+//# sourceMappingURL=ProductGrid.js.map

package/dist/products/components/ProductGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.js","sourceRoot":"","sources":["../../../src/products/components/ProductGrid.tsx"],"names":[],"mappings":"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"}

package/dist/products/components/ProductSearch.d.ts

@@ -0,0 +1,43 @@
+export interface ProductSearchProps {
+    /** Current search value */
+    value?: string;
+    /** Callback when search changes */
+    onSearch: (query: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Custom className */
+    className?: string;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Auto focus on mount */
+    autoFocus?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show search icon */
+    showIcon?: boolean;
+}
+/**
+ * ProductSearch component for searching products.
+ *
+ * @example
+ * ```tsx
+ * import { ProductSearch } from '@rovela/sdk/products'
+ *
+ * function ProductToolbar() {
+ *   const [search, setSearch] = useState('')
+ *
+ *   return (
+ *     <ProductSearch
+ *       value={search}
+ *       onSearch={setSearch}
+ *       placeholder="Search products..."
+ *       debounceMs={300}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function ProductSearch({ value, onSearch, placeholder, className, debounceMs, showClear, autoFocus, size, showIcon, }: ProductSearchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductSearch.d.ts.map

package/dist/products/components/ProductSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSearch.d.ts","sourceRoot":"","sources":["../../../src/products/components/ProductSearch.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,QAAQ,EACR,WAAkC,EAClC,SAAS,EACT,UAAgB,EAChB,SAAgB,EAChB,SAAiB,EACjB,IAAW,EACX,QAAe,GAChB,EAAE,kBAAkB,2CAiHpB"}

package/dist/products/components/ProductSearch.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @rovela/sdk/products/components/ProductSearch
+ *
+ * Search input component for product discovery.
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Search, X } from 'lucide-react';
+import { cn } from '../../core/utils';
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProductSearch component for searching products.
+ *
+ * @example
+ * ```tsx
+ * import { ProductSearch } from '@rovela/sdk/products'
+ *
+ * function ProductToolbar() {
+ *   const [search, setSearch] = useState('')
+ *
+ *   return (
+ *     <ProductSearch
+ *       value={search}
+ *       onSearch={setSearch}
+ *       placeholder="Search products..."
+ *       debounceMs={300}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function ProductSearch({ value = '', onSearch, placeholder = 'Search products...', className, debounceMs = 300, showClear = true, autoFocus = false, size = 'md', showIcon = true, }) {
+    const [localValue, setLocalValue] = useState(value);
+    const debounceRef = useRef(undefined);
+    const inputRef = useRef(null);
+    // Sync local value with controlled value
+    useEffect(() => {
+        setLocalValue(value);
+    }, [value]);
+    // Auto focus
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Handle input change with debounce
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setLocalValue(newValue);
+        // Clear existing timeout
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        // Set new timeout
+        debounceRef.current = setTimeout(() => {
+            onSearch(newValue);
+        }, debounceMs);
+    }, [onSearch, debounceMs]);
+    // Handle clear
+    const handleClear = useCallback(() => {
+        setLocalValue('');
+        onSearch('');
+        inputRef.current?.focus();
+    }, [onSearch]);
+    // Handle form submit (prevent page reload)
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        // Clear timeout and trigger search immediately
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        onSearch(localValue);
+    }, [localValue, onSearch]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
+    const sizeClasses = {
+        sm: 'h-8 text-sm',
+        md: 'h-10 text-sm',
+        lg: 'h-12 text-base',
+    };
+    const iconSizeClasses = {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-5 w-5',
+    };
+    return (_jsxs("form", { onSubmit: handleSubmit, className: cn('relative', className), children: [showIcon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: _jsx(Search, { className: cn('text-muted-foreground', iconSizeClasses[size]) }) })), _jsx("input", { ref: inputRef, type: "search", value: localValue, onChange: handleChange, placeholder: placeholder, className: cn('w-full rounded-md border border-border bg-background transition-colors', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary', 'placeholder:text-muted-foreground', sizeClasses[size], showIcon ? 'pl-10' : 'pl-4', showClear && localValue ? 'pr-10' : 'pr-4', '[&::-webkit-search-cancel-button]:hidden') }), showClear && localValue && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground", children: _jsx(X, { className: iconSizeClasses[size] }) }))] }));
+}
+//# sourceMappingURL=ProductSearch.js.map

package/dist/products/components/ProductSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSearch.js","sourceRoot":"","sources":["../../../src/products/components/ProductSearch.tsx"],"names":[],"mappings":"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"}

package/dist/products/components/ProductSort.d.ts

@@ -0,0 +1,43 @@
+export type SortOption = 'newest' | 'price-asc' | 'price-desc' | 'name';
+export interface SortOptionConfig {
+    value: SortOption;
+    label: string;
+}
+export interface ProductSortProps {
+    /** Current sort value */
+    value: SortOption;
+    /** Callback when sort changes */
+    onChange: (value: SortOption) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom options */
+    options?: SortOptionConfig[];
+    /** Label text */
+    label?: string;
+    /** Show label */
+    showLabel?: boolean;
+    /** Variant style */
+    variant?: 'select' | 'buttons';
+}
+/**
+ * ProductSort component for sorting product listings.
+ *
+ * @example
+ * ```tsx
+ * import { ProductSort } from '@rovela/sdk/products'
+ *
+ * function ProductToolbar() {
+ *   const [sort, setSort] = useState('newest')
+ *
+ *   return (
+ *     <ProductSort
+ *       value={sort}
+ *       onChange={setSort}
+ *       showLabel
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function ProductSort({ value, onChange, className, options, label, showLabel, variant, }: ProductSortProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductSort.d.ts.map

package/dist/products/components/ProductSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSort.d.ts","sourceRoot":"","sources":["../../../src/products/components/ProductSort.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAA;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,KAAK,EAAE,UAAU,CAAA;IACjB,iCAAiC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAC/B;AAiBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAwB,EACxB,KAAiB,EACjB,SAAiB,EACjB,OAAkB,GACnB,EAAE,gBAAgB,2CAqFlB"}

package/dist/products/components/ProductSort.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @rovela/sdk/products/components/ProductSort
+ *
+ * Sort dropdown component for product listings.
+ */
+import { useState, useCallback } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../core/utils';
+// =============================================================================
+// Default Options
+// =============================================================================
+const defaultOptions = [
+    { value: 'newest', label: 'Newest' },
+    { value: 'price-asc', label: 'Price: Low to High' },
+    { value: 'price-desc', label: 'Price: High to Low' },
+    { value: 'name', label: 'Name: A to Z' },
+];
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProductSort component for sorting product listings.
+ *
+ * @example
+ * ```tsx
+ * import { ProductSort } from '@rovela/sdk/products'
+ *
+ * function ProductToolbar() {
+ *   const [sort, setSort] = useState('newest')
+ *
+ *   return (
+ *     <ProductSort
+ *       value={sort}
+ *       onChange={setSort}
+ *       showLabel
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function ProductSort({ value, onChange, className, options = defaultOptions, label = 'Sort by', showLabel = false, variant = 'select', }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const selectedOption = options.find((opt) => opt.value === value) || options[0];
+    const handleSelect = useCallback((newValue) => {
+        onChange(newValue);
+        setIsOpen(false);
+    }, [onChange]);
+    if (variant === 'buttons') {
+        return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [showLabel && (_jsxs("span", { className: "text-sm text-muted-foreground", children: [label, ":"] })), _jsx("div", { className: "flex gap-1", children: options.map((option) => (_jsx("button", { onClick: () => handleSelect(option.value), className: cn('rounded-md px-3 py-1.5 text-sm transition-colors', value === option.value
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground'), children: option.label }, option.value))) })] }));
+    }
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [showLabel && (_jsxs("label", { className: "text-sm text-muted-foreground", children: [label, ":"] })), _jsxs("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm transition-colors hover:bg-muted", children: [_jsx("span", { children: selectedOption.label }), _jsx(ChevronDown, { className: cn('h-4 w-4 text-muted-foreground transition-transform', isOpen && 'rotate-180') })] })] }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }), _jsx("div", { className: "absolute right-0 z-20 mt-1 min-w-[180px] rounded-md border border-border bg-background py-1 shadow-lg", children: options.map((option) => (_jsx("button", { onClick: () => handleSelect(option.value), className: cn('block w-full px-4 py-2 text-left text-sm transition-colors', value === option.value
+                                ? 'bg-primary/10 text-primary'
+                                : 'text-foreground hover:bg-muted'), children: option.label }, option.value))) })] }))] }));
+}
+//# sourceMappingURL=ProductSort.js.map

package/dist/products/components/ProductSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSort.js","sourceRoot":"","sources":["../../../src/products/components/ProductSort.tsx"],"names":[],"mappings":"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"}

package/dist/products/components/VariantSelector.d.ts

@@ -0,0 +1,43 @@
+import type { ProductVariant } from '../../core/types';
+export interface VariantSelectorProps {
+    /** Product variants */
+    variants: ProductVariant[];
+    /** Currently selected variant */
+    selected?: ProductVariant | null;
+    /** Callback when variant selection changes */
+    onSelect: (variant: ProductVariant | null) => void;
+    /** Custom className */
+    className?: string;
+    /** Show inventory count */
+    showInventory?: boolean;
+    /** Disable out of stock variants */
+    disableOutOfStock?: boolean;
+    /** Custom attribute labels */
+    labels?: Record<string, string>;
+    /** Render as buttons or dropdown */
+    display?: 'buttons' | 'dropdown';
+}
+/**
+ * VariantSelector component for selecting product variants.
+ *
+ * @example
+ * ```tsx
+ * import { VariantSelector } from '@rovela/sdk/products'
+ *
+ * function ProductVariants({ variants }) {
+ *   const [selected, setSelected] = useState(null)
+ *
+ *   return (
+ *     <VariantSelector
+ *       variants={variants}
+ *       selected={selected}
+ *       onSelect={setSelected}
+ *       showInventory
+ *       disableOutOfStock
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function VariantSelector({ variants, selected, onSelect, className, showInventory, disableOutOfStock, labels, display, }: VariantSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=VariantSelector.d.ts.map

package/dist/products/components/VariantSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantSelector.d.ts","sourceRoot":"","sources":["../../../src/products/components/VariantSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMtD,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,oCAAoC;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACjC;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAqB,EACrB,iBAAwB,EACxB,MAAW,EACX,OAAmB,GACpB,EAAE,oBAAoB,kDAsLtB"}