{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cart-donation",
  "type": "registry:component",
  "title": "Round-up donation",
  "description": "Opt-in round-up row that computes the cents to the next dollar and names the cause.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "cart",
    "any"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/sk-analytics.json"
  ],
  "files": [
    {
      "path": "cart/cart-donation.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { HeartHandshake } from \"lucide-react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Round-up donation row. Computes the cents needed to reach the next whole\n   dollar (a full dollar if the total is already round), names the cause,\n   and stays off until the shopper turns it on. */\n\nexport function CartDonation({\n  total = 14735,\n  cause = \"Open Science Fund\",\n  detail = \"Funds school garden programs near where we source. Every cent is passed on and listed on your receipt.\",\n  defaultOn = false,\n  onChange,\n  className,\n}: {\n  /** Order total in cents before the round-up. */\n  total?: number\n  cause?: string\n  detail?: string\n  defaultOn?: boolean\n  onChange?: (on: boolean, amount: number) => void\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"cart\", \"cart-donation\")\n  const [on, setOn] = React.useState(defaultOn)\n  const amount = total % 100 === 0 ? 100 : 100 - (total % 100)\n  const rounded = total + amount\n\n  return (\n    <div ref={sk.ref as React.Ref<HTMLDivElement>} {...sk.attrs} className={cn(\"w-full rounded-sk-card border border-sk-line bg-sk-card\", className)}>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={on}\n        onClick={() => {\n          setOn(!on)\n          onChange?.(!on, amount)\n          sk.emit(on ? \"interact\" : \"convert\", on ? \"donation_off\" : \"donation_on\", amount)\n        }}\n        className=\"flex min-h-[64px] w-full items-start gap-3 rounded-sk-card p-4 text-left transition-colors duration-200 hover:bg-sk-ink/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sk-accent active:scale-[0.99]\"\n      >\n        <span className={cn(\"grid h-9 w-9 shrink-0 place-items-center rounded-sk-chip transition-colors duration-200\", on ? \"bg-sk-accent/15 text-sk-accent\" : \"bg-sk-ink/[0.06] text-sk-muted\")}>\n          <HeartHandshake size={16} />\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block text-sm font-medium text-sk-ink\">\n            Round up to <span className=\"tabular-nums\">{money(rounded)}</span>\n          </span>\n          <span className=\"block text-[13px] text-sk-muted\">\n            <span className=\"tabular-nums\">{money(amount)}</span> to the {cause}\n          </span>\n          <span className=\"mt-1 block text-xs leading-[1.5] text-sk-muted\">{detail}</span>\n        </span>\n        <span aria-hidden className={cn(\"relative mt-1.5 flex h-6 w-10 shrink-0 items-center rounded-sk-chip p-0.5 transition-colors duration-200\", on ? \"bg-sk-accent\" : \"bg-sk-ink/20\")}>\n          <motion.span\n            initial={false}\n            animate={{ x: on ? 16 : 0 }}\n            transition={reduce ? { duration: 0 } : { type: \"spring\", stiffness: 600, damping: 34 }}\n            className={cn(\"h-5 w-5 rounded-sk-chip shadow-[0_1px_2px_rgb(0_0_0/0.25)]\", on ? \"bg-sk-accent-ink\" : \"bg-sk-paper\")}\n          />\n        </span>\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/cart/cart-donation.tsx"
    }
  ],
  "meta": {
    "section": "cart",
    "variant": "switch",
    "niche": [
      "any"
    ],
    "commerce": [
      "donation"
    ],
    "previewHeight": 220
  }
}