{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cart-line-item",
  "type": "registry:component",
  "title": "Cart line item",
  "description": "Cart row with thumb, variant chip, stepper, line price with compare-at and a hover-reveal remove.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "cart",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/price.json",
    "https://storekit-eight.vercel.app/r/product-image.json",
    "https://storekit-eight.vercel.app/r/stepper.json"
  ],
  "files": [
    {
      "path": "cart/cart-line-item.tsx",
      "content": "\"use client\"\n\nimport { X } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { Price } from \"@/components/storekit/ui/price\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\nimport { Stepper } from \"@/components/storekit/ui/stepper\"\n\n/* One cart row: thumb, title, variant chip, quantity stepper, line price with\n   compare-at, and a remove button. On pointer devices the remove button\n   reveals on hover or focus; on touch it is always visible. */\n\nexport function CartLineItem({\n  title = \"Daily Greens\",\n  variant = \"30 servings\",\n  image = \"/brands/morrow/greens.webp\",\n  price = 5900,\n  compareAt,\n  quantity = 1,\n  max = 10,\n  onQuantityChange,\n  onRemove,\n  className,\n}: {\n  title?: string\n  variant?: string\n  image?: string\n  /** Unit price in cents. */\n  price?: number\n  /** Unit compare-at in cents. */\n  compareAt?: number\n  quantity?: number\n  max?: number\n  onQuantityChange?: (next: number) => void\n  onRemove?: () => void\n  className?: string\n}) {\n  return (\n    <div data-sk-section=\"cart\" data-sk-variant=\"cart-line-item\" className={cn(\"group relative flex gap-3 py-4 sm:gap-4\", className)}>\n      <ProductImage src={image} alt={title} className=\"h-[72px] w-[72px] shrink-0 rounded-sk-card border border-sk-line sm:h-24 sm:w-24\" fit=\"cover\" zoomOnHover={false} />\n      <div className=\"flex min-w-0 flex-1 flex-col justify-between gap-3\">\n        <div className=\"flex items-start justify-between gap-3 pr-10\">\n          <div className=\"min-w-0\">\n            <p className=\"truncate text-[15px] font-medium text-sk-ink\">{title}</p>\n            {variant ? (\n              <span className=\"mt-1 inline-flex rounded-sk-chip border border-sk-line px-2 py-0.5 text-xs text-sk-muted\">{variant}</span>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-2\">\n          <Stepper label={`Quantity, ${title}`} value={quantity} onChange={(q) => onQuantityChange?.(q)} max={max} size=\"sm\" className=\"shrink-0\" />\n          <Price amount={price * quantity} compareAt={compareAt ? compareAt * quantity : undefined} size=\"sm\" className=\"ml-auto min-w-0 justify-end text-right\" />\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${title}`}\n        onClick={onRemove}\n        className={cn(\n          \"absolute right-0 top-2 grid h-11 w-11 place-items-center rounded-sk-btn text-sk-muted\",\n          \"transition-[opacity,transform,background-color,color] duration-200 ease-sk-out hover:bg-sk-ink/[0.05] hover:text-sk-ink active:scale-[0.97]\",\n          \"focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\",\n          \"[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 [@media(hover:hover)]:group-focus-within:opacity-100\"\n        )}\n      >\n        <X size={16} />\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/cart/cart-line-item.tsx"
    }
  ],
  "meta": {
    "section": "cart",
    "variant": "row",
    "niche": [
      "any"
    ],
    "commerce": [
      "cart",
      "quantity",
      "compare-at"
    ],
    "previewHeight": 320
  }
}