50: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"] 51: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"] 52:T316a,"use client" import * as React from "react" import { cn } from "@/lib/utils" /* ------------------------------------------------------------------ * Context for sharing state between compound components * ------------------------------------------------------------------ */ type ProductCardVariant = "default" | "inner" type ProductCardSize = "sm" | "default" | "lg" interface ProductCardContextValue { variant: ProductCardVariant size: ProductCardSize animated: boolean } const ProductCardContext = React.createContext( null ) function useProductCardContext() { const context = React.useContext(ProductCardContext) if (!context) { throw new Error( "ProductCard compound components must be used within " ) } return context } /* ------------------------------------------------------------------ * Size tables * ------------------------------------------------------------------ * Only the values that cannot be derived. The card's TYPE size is set once * on the root and inherited by the title, subtitle and metric, so a single * `text-*` in the root's className resizes all of them together — where * three separate per-part tables meant a caller had to override each one and * keep them in step by hand. */ const cardWidth: Record = { sm: "max-w-[200px]", default: "max-w-[320px]", lg: "max-w-[460px]", } const cardText: Record = { sm: "text-xs", default: "text-sm", lg: "text-base", } const imagePadding: Record = { sm: "p-4", default: "p-8", lg: "p-12", } // The inner variant parks the title/metric row over the bottom of the same // square, so the object-contain subject has to clear it — otherwise the text // lands on the product. Extra bottom padding lifts the subject by roughly the // height of that row. const imagePaddingInner: Record = { sm: "pb-14", default: "pb-20", lg: "pb-24", } const contentPadding: Record = { sm: "px-0.5 py-2", default: "px-1 py-3", lg: "px-2 py-4", } const contentPaddingInner: Record = { sm: "p-2", default: "p-3", lg: "p-4", } const badgePosition: Record = { sm: "top-1.5 right-1.5 px-1.5 py-0.5", default: "top-2 right-2 px-2 py-1", lg: "top-3 right-3 px-3 py-1.5", } /* ------------------------------------------------------------------ * ProductCard (root) * ------------------------------------------------------------------ */ interface ProductCardProps extends React.ComponentProps<"div"> { /** `default` puts the content below the image, `inner` lays it over it. */ variant?: ProductCardVariant size?: ProductCardSize /** Lift the image on hover and press. Defaults to true. */ animated?: boolean } function ProductCard({ className, variant = "default", size = "default", animated = true, children, ...props }: ProductCardProps) { // A card is not a control. It only claims to be clickable when a handler // actually arrives, so a plain card no longer shows a pointer cursor it // cannot honour. A card that has to be keyboard-reachable should put a real // / ) } /* ------------------------------------------------------------------ * ProductCardContent (container for title, subtitle, metric) * ------------------------------------------------------------------ */ type ProductCardContentProps = React.ComponentProps<"div"> function ProductCardContent({ className, children, ...props }: ProductCardContentProps) { const { variant, size } = useProductCardContext() return (

) } /* ------------------------------------------------------------------ * ProductCardHeader (wrapper for title + subtitle) * ------------------------------------------------------------------ */ type ProductCardHeaderProps = React.ComponentProps<"div"> function ProductCardHeader({ className, children, ...props }: ProductCardHeaderProps) { return (

) } /* ------------------------------------------------------------------ * ProductCardTitle / Subtitle / Metric * ------------------------------------------------------------------ * None of the three sets a font size. They inherit the card's, so one * `text-*` on the root moves the whole block and a `text-*` on any one of * them still overrides just that line. */ type ProductCardTitleProps = React.ComponentProps<"h3"> function ProductCardTitle({ className, children, ...props }: ProductCardTitleProps) { return (

{children}

) } type ProductCardSubtitleProps = React.ComponentProps<"p"> function ProductCardSubtitle({ className, children, ...props }: ProductCardSubtitleProps) { return (

{children}

) } type ProductCardMetricProps = React.ComponentProps<"span"> function ProductCardMetric({ className, children, ...props }: ProductCardMetricProps) { return ( {children} ) } /* ------------------------------------------------------------------ * Exports * ------------------------------------------------------------------ */ export { ProductCard, ProductCardImage, ProductCardBadge, ProductCardContent, ProductCardHeader, ProductCardTitle, ProductCardSubtitle, ProductCardMetric, type ProductCardProps, type ProductCardImageProps, type ProductCardBadgeProps, type ProductCardContentProps, type ProductCardHeaderProps, type ProductCardTitleProps, type ProductCardSubtitleProps, type ProductCardMetricProps, type ProductCardSize, type ProductCardVariant, } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@delta","registryDependencies":["https://www.deltacomponents.dev/r/utils.json","https://www.deltacomponents.dev/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/product-card.tsx","content":"$52","type":"registry:ui","target":"components/ui/product-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]