60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 63:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T43ba,"use client" import * as React from "react" import { Check, Heart, Plus, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Toggle } from "@/components/ui/toggle" import { PriceTag } from "@/components/ecomcn/price-tag" import { cn } from "@/lib/utils" const subscribeNothing = () => () => {} /** * Your locale, or the visitor's once hydrated. The server can't know the * visitor's locale, and its HTML must match the first client render — a * server in en-IN prints "1,24,000" where an en-US browser prints * "124,000" — so until hydration it formats in en-US. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } export interface ProductCardColor { name: string /** Any CSS colour, or a swatch image URL via `background`. */ hex: string /** Shown in the media frame while this colour is selected. */ image?: React.ReactNode } export interface ProductCardProduct { id: string name: string href: string brand?: string price: number compareAt?: number /** Already-rendered image element, so this block never assumes next/image. */ image?: React.ReactNode badge?: string colors?: ProductCardColor[] rating?: number reviewCount?: number } /* ─── context ────────────────────────────────────────────────────────────── * Compound component: holds the selected colour and the * quick-add state, and every part reads them through useProductCard(). That * is what lets a swatch change the image without either knowing the other. */ type QuickAddState = "idle" | "pending" | "added" export interface ProductCardContextValue { product: ProductCardProduct currency: string locale?: string density: "comfortable" | "compact" colorIndex: number setColorIndex: (index: number) => void /** The selected colour, if the product has any. */ color?: ProductCardColor /** The selected colour's image, falling back to the product image. */ image: React.ReactNode /** Undefined when the card was given no `onQuickAdd`. */ quickAdd?: () => void quickAddState: QuickAddState /** False when the product's colours are not worth showing — `showColors`. */ showColors: boolean /** On the shopper's wishlist — optimistically, while a change is in flight. */ wishlisted: boolean /** Undefined when the card was given no `onWishlistChange`. */ toggleWishlist?: () => void } const ProductCardContext = React.createContext(null) export function useProductCard() { const context = React.useContext(ProductCardContext) if (!context) { throw new Error("useProductCard must be used within .") } return context } /** Controlled when `value` is passed, uncontrolled from `defaultValue` otherwise. */ function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface ProductCardProps extends Omit, "onSelect"> { product: ProductCardProduct currency?: string locale?: string density?: "comfortable" | "compact" /** Return a promise to keep the button in its pending state until settled. */ onQuickAdd?: (product: ProductCardProduct, colorIndex: number) => void | Promise /** Controlled selected colour. */ colorIndex?: number defaultColorIndex?: number onColorChange?: (color: ProductCardColor, index: number) => void /** * Show the colour swatches. Turn off for products that do not come in * colours worth choosing between — a book, a print, one-colour stock. */ showColors?: boolean /** Controlled wishlist state. */ wishlisted?: boolean defaultWishlisted?: boolean /** * Shows the heart. Optimistic: it fills at once; reject to roll it back. */ onWishlistChange?: (wishlisted: boolean, product: ProductCardProduct) => void | Promise /** * Compose your own card from ProductCardMedia, ProductCardBody and their * parts. Leave empty for the default layout. */ children?: React.ReactNode } export function ProductCard({ product, currency = "USD", locale: localeProp, density = "comfortable", onQuickAdd, colorIndex: colorIndexProp, defaultColorIndex = 0, onColorChange, showColors = true, wishlisted: wishlistedProp, defaultWishlisted = false, onWishlistChange, className, children, ...props }: ProductCardProps) { const locale = useFormatLocale(localeProp) const colors = product.colors const handleColorChange = React.useCallback( (index: number) => { const color = colors?.[index] if (color) onColorChange?.(color, index) }, [colors, onColorChange] ) const [colorIndex, setColorIndex] = useControllableState( colorIndexProp, defaultColorIndex, handleColorChange ) const [quickAddState, setQuickAddState] = React.useState("idle") const resetTimer = React.useRef(undefined) React.useEffect(() => () => window.clearTimeout(resetTimer.current), []) const quickAdd = React.useMemo(() => { if (!onQuickAdd) return undefined return async () => { if (quickAddState === "pending") return setQuickAddState("pending") try { await onQuickAdd(product, colorIndex) setQuickAddState("added") window.clearTimeout(resetTimer.current) resetTimer.current = window.setTimeout(() => setQuickAddState("idle"), 2000) } catch { setQuickAddState("idle") } } }, [onQuickAdd, quickAddState, product, colorIndex]) // The heart's optimistic value while the shopper's change is in flight. const [savedState, setSaved] = useControllableState(wishlistedProp, defaultWishlisted) const [pendingSave, setPendingSave] = React.useState(null) const wishlisted = pendingSave ?? savedState const toggleWishlist = React.useMemo(() => { if (!onWishlistChange) return undefined return () => { if (pendingSave !== null) return const next = !savedState setPendingSave(next) Promise.resolve() .then(() => onWishlistChange(next, product)) .then( () => { setSaved(next) setPendingSave(null) }, // Rejected: the heart returns to what is true. () => setPendingSave(null) ) } }, [onWishlistChange, pendingSave, savedState, setSaved, product]) const color = product.colors?.[colorIndex] const context = React.useMemo( () => ({ product, currency, locale, density, colorIndex, setColorIndex, color, image: color?.image ?? product.image, quickAdd, quickAddState, showColors, wishlisted, toggleWishlist, }), [product, currency, locale, density, colorIndex, setColorIndex, color, quickAdd, quickAddState, showColors, wishlisted, toggleWishlist] ) return (

{children ?? ( <> )}

) } /* ─── media ────────────────────────────────────────────────────────────── */ /** * The 4:5 frame. Defaults to the image, the badge with the wishlist heart * under it, and quick-add; pass children to recompose. */ export function ProductCardMedia({ className, children, ...props }: React.HTMLAttributes) { useProductCard() return (

{children ?? ( <> )}

) } /** Fills the media frame with the selected colour's image. */ export function ProductCardImage({ className, ...props }: React.HTMLAttributes) { const { image } = useProductCard() return (

{image}

) } /** * The top-left corner: a column for the badge and the heart, so the heart * sits under the badge whatever the badge says — and at the top when there * is none. Above the card's link overlay. */ export function ProductCardCorner({ className, ...props }: React.HTMLAttributes) { return (

[data-slot=product-card-badge]]:static", className )} {...props} /> ) } export function ProductCardBadge({ className, ...props }: React.HTMLAttributes) { const { product } = useProductCard() if (!product.badge) return null return ( {product.badge} ) } /** * The heart, on your shadcn Toggle. Shown when the card has * `onWishlistChange`; fills at once and rolls back if the handler rejects. */ export function ProductCardWishlist({ className }: { className?: string }) { const { product, wishlisted, toggleWishlist } = useProductCard() if (!toggleWishlist) return null return ( toggleWishlist()} aria-label={`${wishlisted ? "Saved" : "Save"} ${product.name} to your wishlist`} className={cn( "relative z-10 ml-2 size-8 min-w-8 rounded-none first:mt-2 bg-background/90 p-0 text-foreground hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:bg-background/90 data-[state=on]:text-foreground", className )} > ) } export function ProductCardQuickAdd({ className }: { className?: string }) { const { quickAdd, quickAddState } = useProductCard() if (!quickAdd) return null return ( // focus-visible keeps this reachable without a pointer; the card link // sits behind it via the ::after overlay on the title anchor. ) } /* ─── body ─────────────────────────────────────────────────────────────── */ /** The text column. Defaults to brand, title, price and meta; pass children to recompose. */ export function ProductCardBody({ className, children, ...props }: React.HTMLAttributes) { const { density } = useProductCard() return (

{children ?? ( <> )}

) } export function ProductCardBrand({ className, ...props }: React.HTMLAttributes) { const { product } = useProductCard() if (!product.brand) return null return (

{product.brand}

) } export function ProductCardTitle({ className, ...props }: React.HTMLAttributes) { const { product } = useProductCard() return (

{/* One link target for the whole card via the ::after overlay — no nested anchors. Anything interactive on top needs `relative z-10`. */} {product.name}

) } export function ProductCardPrice({ className }: { className?: string }) { const { product, currency, locale } = useProductCard() return ( ) } /** Swatches and rating on one line. Hidden in the compact density. */ export function ProductCardMeta({ className, children, ...props }: React.HTMLAttributes) { const { product, density, showColors } = useProductCard() if (density === "compact") return null const colors = showColors && product.colors?.length if (!children && !colors && product.rating === undefined) return null return (

{children ?? ( <> )}

) } export function ProductCardSwatches({ className, ...props }: React.HTMLAttributes) { const { product, colorIndex, setColorIndex, showColors } = useProductCard() if (!showColors || !product.colors?.length) return return (

{product.colors.map((color, i) => (

) } export function ProductCardRating({ className, ...props }: React.HTMLAttributes) { const { product, locale } = useProductCard() if (product.rating === undefined) return null return ( Rated {new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format( product.rating )} {product.reviewCount ? ( ({new Intl.NumberFormat(locale).format(product.reviewCount)} reviews) ) : null} ) } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["button","toggle","@ecomcn/price-tag"]}]]}],["$","$L61",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","sale",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","sale",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 72% 42%"}]]}],["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"138 30% 34%"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","sale",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","sale",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"4 74% 58%"}]]}],["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"138 26% 52%"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null,null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"src/registry/ecomcn/product-card/product-card.tsx","content":"$65","type":"registry:component","target":"components/ecomcn/product-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]