4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T725b,'use client' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' import { Check, ChevronLeft, ChevronRight, ShoppingCart, Star } from 'lucide-react' import { useCallback, useState } from 'react' // Import types from shared types file to avoid circular dependencies import type { Product } from './types' // Re-export for backward compatibility export type { Product } from './types' import { demoProducts } from './demo/list' /** * ═══════════════════════════════════════════════════════════════════════════ * ProductListProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring a versatile product list component with list, grid, * carousel, and picker variants. */ export interface ProductListProps { data?: { /** Array of products to display in the list. */ products?: Product[] } actions?: { /** Called when a user selects a product from the list. */ onSelectProduct?: (product: Product) => void /** Called when products are added to cart (picker variant only). */ onAddToCart?: (products: Product[]) => void } appearance?: { /** * Layout variant for displaying products. * @default "list" */ variant?: 'list' | 'grid' | 'carousel' | 'picker' /** * Currency code for price formatting (e.g., "USD", "EUR"). * @default "EUR" */ currency?: string /** * Number of columns for grid variant. * @default 4 */ columns?: 3 | 4 /** * Custom label for the add to cart button (picker variant). * @default "Add to cart" */ buttonLabel?: string } control?: { /** Index of the currently selected product. */ selectedProductIndex?: number } } // Horizontal card for list variant function ProductHorizontalCard({ product, selected, onSelect, formatCurrency }: { product: Product selected: boolean onSelect: () => void formatCurrency: (value: number) => string }) { return ( ) } // List variant function ListVariant({ products, selected, onSelect, formatCurrency }: { products: Product[] selected: number | undefined onSelect: (product: Product, index: number) => void formatCurrency: (value: number) => string }) { return (

{products.slice(0, 4).map((product, index) => ( onSelect(product, index)} formatCurrency={formatCurrency} /> ))}

) } // Grid variant function GridVariant({ products, selected, onSelect, formatCurrency, columns }: { products: Product[] selected: number | undefined onSelect: (product: Product, index: number) => void formatCurrency: (value: number) => string columns: 3 | 4 }) { const displayProducts = products.slice(0, columns) return (

{displayProducts.map((product, index) => ( ))}

) } // Carousel variant function CarouselVariant({ products, selected, onSelect, formatCurrency }: { products: Product[] selected: number | undefined onSelect: (product: Product, index: number) => void formatCurrency: (value: number) => string }) { const [currentIndex, setCurrentIndex] = useState(0) const CARD_WIDTH = 160 const GAP = 12 const desktopTransform = currentIndex * (CARD_WIDTH + GAP) const tabletMaxIndex = Math.max(0, products.length - 2) const goLeft = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1) } } // Horizontal card for mobile/tablet const HorizontalCard = ({ product, index }: { product: Product; index: number }) => ( ) // Dots component const Dots = ({ count, active, onDotClick }: { count: number active: number onDotClick: (i: number) => void }) => (

{Array.from({ length: count }).map((_, i) => (

) const mobileProduct = products[currentIndex] const tabletProducts = [ products[Math.min(currentIndex, tabletMaxIndex)], products[Math.min(currentIndex, tabletMaxIndex) + 1] ].filter(Boolean) return (

{/* Mobile: 1 card + dots */}

{mobileProduct && }

setCurrentIndex(i)} />

{/* Tablet: 2 cards + dots */}

{tabletProducts.map((product, i) => { const productIndex = Math.min(currentIndex, tabletMaxIndex) + i return })}

setCurrentIndex(i)} />

{/* Desktop: multi-card carousel */} {(() => { const desktopMaxIndex = Math.max(0, products.length - 4) const isAtEnd = currentIndex >= desktopMaxIndex return (

{products.map((product, index) => ( ))}

) })()}

) } // Picker variant (multi-select with add to cart) function PickerVariant({ products, formatCurrency, onAddToCart, buttonLabel = 'Add to cart' }: { products: Product[] formatCurrency: (value: number) => string onAddToCart?: (products: Product[]) => void buttonLabel?: string }) { const [selectedIndexes, setSelectedIndexes] = useState>(new Set()) const handleSelect = useCallback((index: number, product: Product) => { if (!product.inStock) return setSelectedIndexes((prev) => { const newSet = new Set(prev) if (newSet.has(index)) { newSet.delete(index) } else { newSet.add(index) } return newSet }) }, []) const handleSelectAll = useCallback(() => { const availableIndexes = products .map((p, i) => (p.inStock ? i : -1)) .filter((i) => i !== -1) const allSelected = availableIndexes.every((i) => selectedIndexes.has(i)) if (allSelected) { setSelectedIndexes(new Set()) } else { setSelectedIndexes(new Set(availableIndexes)) } }, [products, selectedIndexes]) const handleAddToCart = useCallback(() => { const selectedProducts = products.filter((_, i) => selectedIndexes.has(i)) onAddToCart?.(selectedProducts) }, [products, selectedIndexes, onAddToCart]) const availableIndexes = products .map((p, i) => (p.inStock ? i : -1)) .filter((i) => i !== -1) const allSelected = availableIndexes.length > 0 && availableIndexes.every((i) => selectedIndexes.has(i)) const totalPrice = products .filter((_, i) => selectedIndexes.has(i)) .reduce((sum, p) => sum + (p.price ?? 0), 0) return (

{/* Mobile: Card view */}

{products.map((product, index) => ( ))}

{/* Desktop: Table view */}

{products.map((product, index) => ( handleSelect(index, product)} className={cn( 'border-b border-border last:border-0 transition-colors', product.inStock ? 'cursor-pointer hover:bg-muted/30' : 'opacity-50 cursor-not-allowed' )} > ))}

	Product	Price
{selectedIndexes.has(index) && ( )}	{product.image && ( )} {product.name && {product.name} } {product.description && ( {product.description} )} {!product.inStock && ( Out of stock )}	{product.price !== undefined && ( {formatCurrency(product.price)} )} {product.originalPrice && ( {formatCurrency(product.originalPrice)} )}

Product

Price

{selectedIndexes.has(index) && ( )}

{product.image && ( {product.name}

)}

{product.name &&

{product.name}

} {product.description && (

{product.description}

)} {!product.inStock && (

Out of stock

)}

{product.price !== undefined && (

{formatCurrency(product.price)}

)} {product.originalPrice && (

{formatCurrency(product.originalPrice)}

)}

{/* Add to cart button */}

{selectedIndexes.size > 0 ? ( {selectedIndexes.size} item{selectedIndexes.size !== 1 ? 's' : ''}{' '} selected {' · '} {formatCurrency(totalPrice)} ) : ( Select products to add to cart )}

) } /** * A versatile product list component with list, grid, carousel, and picker variants. * Supports product selection, badges, ratings, and add to cart functionality. * * Features: * - Multiple layout variants (list, grid, carousel, picker) * - Product cards with images, badges, and pricing * - Original price strikethrough for discounts * - Star ratings display * - Out of stock indication * - Single product selection (list/grid/carousel) * - Multi-select with cart total (picker) * - Responsive layouts for all screen sizes * - Animated carousel navigation * * @component * @example * ```tsx * console.log("Selected:", product), * onAddToCart: (products) => console.log("Cart:", products) * }} * appearance={{ * variant: "grid", * currency: "USD", * columns: 4 * }} * /> * ``` */ export function ProductList({ data, actions, appearance, control }: ProductListProps) { const resolved: NonNullable = data ?? { products: demoProducts } const products = resolved.products ?? [] const onSelectProduct = actions?.onSelectProduct const onAddToCart = actions?.onAddToCart const variant = appearance?.variant ?? 'list' const currency = appearance?.currency ?? 'EUR' const columns = appearance?.columns ?? 4 const buttonLabel = appearance?.buttonLabel const selectedProductIndex = control?.selectedProductIndex const [selected, setSelected] = useState(selectedProductIndex) const formatCurrency = (value: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: 0 }).format(value) } const handleSelect = (product: Product, index: number) => { setSelected(index) onSelectProduct?.(product) } if (variant === 'grid') { return ( ) } if (variant === 'carousel') { return ( ) } if (variant === 'picker') { return ( ) } return ( ) } 52:Td20,// Demo data for List category components // This file contains sample data used for component previews and documentation import type { Product } from '../types' // Default products for ProductList export const demoProducts: Product[] = [ { name: "Air Force 1 '07", description: 'Nike', price: 119, image: 'https://ui.manifest.build/demo/shoe-1.png', rating: 4.9, badge: 'New', inStock: true }, { name: 'Air Max 90', description: 'Nike', price: 140, image: 'https://ui.manifest.build/demo/shoe-2.png', rating: 4.8, inStock: true }, { name: 'Air Max Plus', description: 'Nike', price: 170, originalPrice: 190, image: 'https://ui.manifest.build/demo/shoe-4.png', rating: 4.7, badge: '-10%', inStock: true }, { name: 'Dunk Low', description: 'Nike', price: 115, image: 'https://ui.manifest.build/demo/shoe-3.png', rating: 4.6, inStock: true }, { name: 'Jordan 1 Low', description: 'Nike', price: 135, image: 'https://ui.manifest.build/demo/shoe-1.png', rating: 4.8, inStock: true }, { name: 'Blazer Mid', description: 'Nike', price: 105, image: 'https://ui.manifest.build/demo/shoe-2.png', rating: 4.5, inStock: true }, ] // Table columns export const demoTableColumns = [ { header: 'Name', accessor: 'name' }, { header: 'Email', accessor: 'email' }, { header: 'Status', accessor: 'status' }, ] // Table rows export const demoTableRows = [ { name: 'John Doe', email: 'john@example.com', status: 'Active' }, { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' }, { name: 'Bob Johnson', email: 'bob@example.com', status: 'Active' }, ] // Table variant: API Usage (default) export const demoApiUsageColumns = [ { header: 'Model', accessor: 'model', sortable: true }, { header: 'Total Tokens', accessor: 'totalTokens', sortable: true, align: 'right' as const }, ] export const demoApiUsageRows = [ { model: 'gpt-5', totalTokens: 2267482 }, { model: 'claude-3.5-sonnet', totalTokens: 647528 }, { model: 'gemini-pro', totalTokens: 428190 }, { model: 'llama-3', totalTokens: 312475 }, ] // Table variant: Models (single select) export const demoModelsColumns = [ { header: 'Model', accessor: 'model', sortable: true }, { header: 'Provider', accessor: 'provider', sortable: true }, { header: 'Context Window', accessor: 'contextWindow', sortable: true, align: 'right' as const }, ] export const demoModelsRows = [ { model: 'GPT-5', provider: 'OpenAI', contextWindow: '128K' }, { model: 'Claude 3.5 Sonnet', provider: 'Anthropic', contextWindow: '200K' }, { model: 'Gemini Pro', provider: 'Google', contextWindow: '1M' }, { model: 'Llama 3', provider: 'Meta', contextWindow: '128K' }, ] // Table variant: Export Data (multi select) export const demoExportColumns = [ { header: 'Date', accessor: 'date', sortable: true }, { header: 'Event', accessor: 'event', sortable: true }, { header: 'Users', accessor: 'users', sortable: true, align: 'right' as const }, ] export const demoExportRows = [ { date: '2025-01-15', event: 'Page View', users: 1243 }, { date: '2025-01-15', event: 'Sign Up', users: 87 }, { date: '2025-01-14', event: 'Page View', users: 1105 }, { date: '2025-01-14', event: 'Purchase', users: 42 }, ] 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@manifest","registryDependencies":["button","https://ui.manifest.build/r/manifest-types.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/list/product-list.tsx","content":"$51","type":"registry:block","target":"components/ui/product-list.tsx"},{"path":"registry/list/demo/list.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/list.ts"}],"className":"h-[70svh] min-h-80"}]]}]