{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card",
  "files": [
    {
      "path": "components/ui/product-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------\n * Context for sharing state between compound components\n * ------------------------------------------------------------------ */\n\ntype ProductCardVariant = \"default\" | \"inner\"\ntype ProductCardSize = \"default\" | \"sm\" | \"small\" | \"lg\" | \"large\"\n\ninterface ProductCardContextValue {\n  variant: ProductCardVariant\n  size: ProductCardSize\n  animated: boolean\n}\n\nconst ProductCardContext = React.createContext<ProductCardContextValue | null>(\n  null\n)\n\nfunction useProductCardContext() {\n  const context = React.useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      \"ProductCard compound components must be used within <ProductCard>\"\n    )\n  }\n  return context\n}\n\nfunction normalizeSize(size: ProductCardSize): \"default\" | \"sm\" | \"lg\" {\n  if (size === \"small\") return \"sm\"\n  if (size === \"large\") return \"lg\"\n  return size as \"default\" | \"sm\" | \"lg\"\n}\n\n/* ------------------------------------------------------------------\n * ProductCard (root)\n * ------------------------------------------------------------------ */\n\ninterface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Card variant - \"default\" shows content below image, \"inner\" shows content inside */\n  variant?: ProductCardVariant\n  /** Card size - \"sm\" | \"small\", \"default\", or \"lg\" | \"large\" */\n  size?: ProductCardSize\n  /** Enable hover/active animation on image - defaults to true */\n  animated?: boolean\n  /** Callback when the card is clicked */\n  onCardClick?: () => void\n}\n\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"default\",\n      animated = true,\n      onCardClick,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <ProductCardContext.Provider value={{ variant, size, animated }}>\n        <div\n          ref={ref}\n          className={cn(\"cursor-pointer overflow-hidden rounded-lg\", className)}\n          onClick={onCardClick}\n          {...props}\n        >\n          {children}\n        </div>\n      </ProductCardContext.Provider>\n    )\n  }\n)\nProductCard.displayName = \"ProductCard\"\n\n/* ------------------------------------------------------------------\n * ProductCardImage\n * ------------------------------------------------------------------ */\n\ninterface ProductCardImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Image source URL */\n  src: string\n  /** Image alt text for accessibility */\n  alt: string\n  /** Custom class for the image element itself */\n  imageClassName?: string\n}\n\nconst ProductCardImage = React.forwardRef<\n  HTMLDivElement,\n  ProductCardImageProps\n>(({ className, src, alt, imageClassName, children, ...props }, ref) => {\n  const { size, animated } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative aspect-square w-full overflow-hidden rounded-lg transition-colors duration-300\",\n        \"bg-muted\",\n        \"[&:hover]:bg-muted/80 [&:active]:bg-muted/80\",\n        animated &&\n          \"[&:active>img]:-translate-y-2 [&:hover>img]:-translate-y-2\",\n        className\n      )}\n      {...props}\n    >\n      <img\n        src={src || \"/placeholder.svg\"}\n        alt={alt}\n        className={cn(\n          \"absolute inset-0 h-full w-full object-contain\",\n          animated && \"transition-transform duration-300 ease-in-out\",\n          normalizedSize === \"sm\" && \"p-4\",\n          normalizedSize === \"default\" && \"p-8\",\n          normalizedSize === \"lg\" && \"p-12\",\n          imageClassName\n        )}\n      />\n      {children}\n    </div>\n  )\n})\nProductCardImage.displayName = \"ProductCardImage\"\n\n/* ------------------------------------------------------------------\n * ProductCardBadge\n * ------------------------------------------------------------------ */\n\ninterface ProductCardBadgeProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the badge is in active/selected state */\n  isActive?: boolean\n  /** Icon to display before label */\n  icon?: React.ReactNode\n}\n\nconst ProductCardBadge = React.forwardRef<\n  HTMLButtonElement,\n  ProductCardBadgeProps\n>(({ className, isActive = false, icon, children, onClick, ...props }, ref) => {\n  const { size } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation()\n        onClick?.(e)\n      }}\n      className={cn(\n        \"absolute flex items-center gap-1 rounded font-medium transition-colors\",\n        normalizedSize === \"sm\" &&\n          \"top-1.5 right-1.5 px-1.5 py-0.5 text-[10px]\",\n        normalizedSize === \"default\" && \"top-2 right-2 px-2 py-1 text-xs\",\n        normalizedSize === \"lg\" && \"top-3 right-3 px-3 py-1.5 text-sm\",\n        isActive\n          ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n          : \"bg-popover text-popover-foreground hover:bg-accent\",\n        \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\",\n        className\n      )}\n      {...props}\n    >\n      {icon && <span aria-hidden=\"true\">{icon}</span>}\n      {children}\n    </button>\n  )\n})\nProductCardBadge.displayName = \"ProductCardBadge\"\n\n/* ------------------------------------------------------------------\n * ProductCardContent (container for title, subtitle, metric)\n * ------------------------------------------------------------------ */\n\ninterface ProductCardContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ProductCardContent = React.forwardRef<\n  HTMLDivElement,\n  ProductCardContentProps\n>(({ className, children, ...props }, ref) => {\n  const { variant, size } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-start justify-between gap-2\",\n        variant === \"default\" && normalizedSize === \"sm\" && \"px-0.5 py-2\",\n        variant === \"default\" && normalizedSize === \"default\" && \"px-1 py-3\",\n        variant === \"default\" && normalizedSize === \"lg\" && \"px-2 py-4\",\n        variant === \"inner\" &&\n          normalizedSize === \"sm\" &&\n          \"absolute inset-x-0 bottom-0 items-end p-2\",\n        variant === \"inner\" &&\n          normalizedSize === \"default\" &&\n          \"absolute inset-x-0 bottom-0 items-end p-3\",\n        variant === \"inner\" &&\n          normalizedSize === \"lg\" &&\n          \"absolute inset-x-0 bottom-0 items-end p-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\nProductCardContent.displayName = \"ProductCardContent\"\n\n/* ------------------------------------------------------------------\n * ProductCardHeader (wrapper for title + subtitle)\n * ------------------------------------------------------------------ */\n\ninterface ProductCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ProductCardHeader = React.forwardRef<\n  HTMLDivElement,\n  ProductCardHeaderProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn(\"min-w-0 flex-1\", className)} {...props}>\n      {children}\n    </div>\n  )\n})\nProductCardHeader.displayName = \"ProductCardHeader\"\n\n/* ------------------------------------------------------------------\n * ProductCardTitle\n * ------------------------------------------------------------------ */\n\ninterface ProductCardTitleProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nconst ProductCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  ProductCardTitleProps\n>(({ className, children, ...props }, ref) => {\n  const { size } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <h3\n      ref={ref}\n      className={cn(\n        \"text-foreground truncate font-medium\",\n        normalizedSize === \"sm\" && \"text-xs\",\n        normalizedSize === \"default\" && \"text-sm\",\n        normalizedSize === \"lg\" && \"text-base\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n})\nProductCardTitle.displayName = \"ProductCardTitle\"\n\n/* ------------------------------------------------------------------\n * ProductCardSubtitle\n * ------------------------------------------------------------------ */\n\ninterface ProductCardSubtitleProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst ProductCardSubtitle = React.forwardRef<\n  HTMLParagraphElement,\n  ProductCardSubtitleProps\n>(({ className, children, ...props }, ref) => {\n  const { size } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <p\n      ref={ref}\n      className={cn(\n        \"text-muted-foreground\",\n        normalizedSize === \"sm\" && \"text-[10px]\",\n        normalizedSize === \"default\" && \"text-sm\",\n        normalizedSize === \"lg\" && \"text-base\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nProductCardSubtitle.displayName = \"ProductCardSubtitle\"\n\n/* ------------------------------------------------------------------\n * ProductCardMetric\n * ------------------------------------------------------------------ */\n\ninterface ProductCardMetricProps\n  extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst ProductCardMetric = React.forwardRef<\n  HTMLSpanElement,\n  ProductCardMetricProps\n>(({ className, children, ...props }, ref) => {\n  const { size } = useProductCardContext()\n  const normalizedSize = normalizeSize(size)\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"text-foreground shrink-0 font-medium\",\n        normalizedSize === \"sm\" && \"text-xs\",\n        normalizedSize === \"default\" && \"text-sm\",\n        normalizedSize === \"lg\" && \"text-base\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n})\nProductCardMetric.displayName = \"ProductCardMetric\"\n\n/* ------------------------------------------------------------------\n * Exports\n * ------------------------------------------------------------------ */\n\nexport {\n  ProductCard,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardContent,\n  ProductCardHeader,\n  ProductCardTitle,\n  ProductCardSubtitle,\n  ProductCardMetric,\n  type ProductCardProps,\n  type ProductCardImageProps,\n  type ProductCardBadgeProps,\n  type ProductCardContentProps,\n  type ProductCardHeaderProps,\n  type ProductCardTitleProps,\n  type ProductCardSubtitleProps,\n  type ProductCardMetricProps,\n  type ProductCardSize,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}