{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cart-line-item",
  "title": "Cart Line Item",
  "description": "A single cart line with image, variant, quantity stepper, and line total.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json",
    "https://lumo-www.vercel.app/r/price-display.json",
    "https://lumo-www.vercel.app/r/quantity-stepper.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/cart-line-item.tsx",
      "content": "import * as React from \"react\"\r\nimport { X } from \"lucide-react\"\r\nimport type { CartLine } from \"@/lib/lumo/types\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { PriceDisplay } from \"@/components/lumo/price-display\"\r\nimport { QuantityStepper } from \"@/components/lumo/quantity-stepper\"\r\n\r\nexport interface CartLineItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  line: CartLine\r\n  onQuantityChange?: (lineId: string, quantity: number) => void\r\n  onRemove?: (lineId: string) => void\r\n  locale?: string\r\n}\r\n\r\nfunction variantLabel(line: CartLine): string | undefined {\r\n  if (line.variant.title) return line.variant.title\r\n  if (line.variant.selectedOptions.length > 0) {\r\n    return line.variant.selectedOptions.map((option) => option.value).join(\" / \")\r\n  }\r\n  return undefined\r\n}\r\n\r\nconst CartLineItem = React.forwardRef<HTMLDivElement, CartLineItemProps>(\r\n  ({ className, line, onQuantityChange, onRemove, locale, ...props }, ref) => {\r\n    const image = line.product.images[0] ?? line.variant.image\r\n    const label = variantLabel(line)\r\n\r\n    return (\r\n      <div ref={ref} className={cn(\"flex gap-3 py-4\", className)} {...props}>\r\n        <div className=\"h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted/20\">\r\n          {image && (\r\n            <img\r\n              src={image.url}\r\n              alt={image.alt ?? line.product.title}\r\n              className=\"h-full w-full object-cover\"\r\n            />\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"flex flex-1 flex-col gap-1\">\r\n          <div className=\"flex items-start justify-between gap-2\">\r\n            <div className=\"min-w-0\">\r\n              <p className=\"truncate text-sm font-medium\">{line.product.title}</p>\r\n              {label && <p className=\"text-xs text-muted-foreground\">{label}</p>}\r\n            </div>\r\n            {onRemove && (\r\n              <button\r\n                type=\"button\"\r\n                onClick={() => onRemove(line.id)}\r\n                className=\"shrink-0 rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] hover:bg-accent hover:text-foreground active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\r\n                aria-label={`Remove ${line.product.title} from cart`}\r\n              >\r\n                <X className=\"h-4 w-4\" />\r\n              </button>\r\n            )}\r\n          </div>\r\n\r\n          <div className=\"mt-auto flex items-center justify-between gap-2\">\r\n            <QuantityStepper\r\n              size=\"sm\"\r\n              value={line.quantity}\r\n              min={1}\r\n              onValueChange={(quantity) => onQuantityChange?.(line.id, quantity)}\r\n              label={`Quantity of ${line.product.title}`}\r\n            />\r\n            <PriceDisplay price={line.lineTotal} locale={locale} size=\"sm\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n)\r\nCartLineItem.displayName = \"CartLineItem\"\r\n\r\nexport { CartLineItem }\r\n",
      "type": "registry:ui",
      "target": "components/lumo/cart-line-item.tsx"
    }
  ],
  "type": "registry:ui"
}