{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-express",
  "type": "registry:component",
  "title": "Express checkout",
  "description": "Three wallet buttons as mono text marks, an or divider and a short trust row.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "checkout",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/sk-analytics.json"
  ],
  "files": [
    {
      "path": "checkout/checkout-express.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RotateCcw, ShieldCheck, Truck } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Express pay row. The first wallet is the filled primary, the rest are\n   bordered text marks (swap in each provider's official button in\n   production), then an \"or\" divider and a three-up trust row. */\n\ntype Wallet = { id: string; label: string }\n\nconst WALLETS: Wallet[] = [\n  { id: \"express\", label: \"Express pay\" },\n  { id: \"shop\", label: \"Shop Pay\" },\n  { id: \"paypal\", label: \"PayPal\" },\n]\n\nconst TRUST = [\n  { icon: ShieldCheck, label: \"Encrypted checkout\" },\n  { icon: Truck, label: \"Ships in 24 hours\" },\n  { icon: RotateCcw, label: \"30-day returns\" },\n]\n\nexport function CheckoutExpress({\n  wallets = WALLETS,\n  onSelect,\n  className,\n}: {\n  wallets?: Wallet[]\n  onSelect?: (id: string) => void\n  className?: string\n}) {\n  const sk = useSkBlock(\"checkout\", \"checkout-express\")\n  const [pending, setPending] = React.useState<string | null>(null)\n  const pick = (id: string) => {\n    sk.emit(\"convert\", `express_${id}`)\n    setPending(id)\n    window.setTimeout(() => {\n      setPending(null)\n      onSelect?.(id)\n    }, 900)\n  }\n  return (\n    <div ref={sk.ref as React.Ref<HTMLDivElement>} {...sk.attrs} className={cn(\"w-full\", className)}>\n      <p className=\"text-center font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">Express checkout</p>\n      <div className=\"mt-3 grid gap-2 sm:grid-cols-3\">\n        {wallets.map((w, i) => (\n          <button\n            key={w.id}\n            type=\"button\"\n            onClick={() => pick(w.id)}\n            disabled={pending !== null}\n            aria-busy={pending === w.id || undefined}\n            className={cn(\n              \"relative h-12 rounded-sk-btn border text-sm font-semibold tracking-[-0.01em]\",\n              \"transition-[transform,background-color,opacity] duration-200 active:scale-[0.97] disabled:opacity-60\",\n              i === 0 ? \"border-sk-ink bg-sk-ink text-sk-paper hover:bg-sk-ink/90\" : \"border-sk-line bg-sk-card text-sk-ink hover:bg-sk-ink/[0.04]\",\n              \"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            )}\n          >\n            <span className={cn(pending === w.id && \"opacity-0\")}>{w.label}</span>\n            {pending === w.id ? (\n              <span className=\"absolute inset-0 grid place-items-center\">\n                <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n              </span>\n            ) : null}\n          </button>\n        ))}\n      </div>\n\n      <div className=\"my-6 flex items-center gap-4\" role=\"separator\" aria-label=\"or\">\n        <span className=\"h-px flex-1 bg-sk-line\" />\n        <span className=\"text-[13px] text-sk-muted\">or</span>\n        <span className=\"h-px flex-1 bg-sk-line\" />\n      </div>\n\n      <ul className=\"grid grid-cols-3 gap-2\">\n        {TRUST.map(({ icon: Icon, label }) => (\n          <li key={label} className=\"flex flex-col items-center gap-1.5 text-center text-xs text-sk-muted sm:flex-row sm:justify-center sm:text-left\">\n            <Icon size={16} className=\"shrink-0 text-sk-ink\" strokeWidth={1.75} />\n            {label}\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/checkout/checkout-express.tsx"
    }
  ],
  "docs": "Text marks are placeholders. Use each provider's official button in production.",
  "meta": {
    "section": "checkout",
    "variant": "express",
    "niche": [
      "any"
    ],
    "commerce": [
      "checkout",
      "express-pay",
      "trust"
    ],
    "previewHeight": 280
  }
}