{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment",
  "title": "Payment",
  "author": "AlgorizeTech",
  "description": "A card payment form with number, expiry month/year selects and a simulated submit state. Use it as the checkout step in a commerce flow.",
  "dependencies": [],
  "registryDependencies": [
    "https://avaraui.com/r/select.json",
    "https://avaraui.com/r/ui-base.json"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/PaymentBlock.tsx",
      "content": "\"use client\";\nimport { useState } from \"react\";\nimport { ComponentCard } from \"../ui/base\";\nimport { SelectBlock } from \"./SelectBlock\";\n\nconst MONTH_OPTIONS = [\n  { label: \"January\", value: \"January\" },\n  { label: \"February\", value: \"February\" },\n  { label: \"March\", value: \"March\" },\n];\n\nconst YEAR_OPTIONS = [\n  { label: \"2026\", value: \"2026\" },\n  { label: \"2027\", value: \"2027\" },\n  { label: \"2028\", value: \"2028\" },\n];\n\nexport function PaymentBlock() {\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [month, setMonth] = useState(\"January\");\n  const [year, setYear] = useState(\"2026\");\n\n  const handleSubmit = () => {\n    setIsSubmitting(true);\n    setTimeout(() => setIsSubmitting(false), 1500); // Simulate network request\n  };\n\n  return (\n    <ComponentCard>\n      <div className=\"flex flex-col space-y-1.5 p-6 pb-4\">\n        <h3 className=\"font-semibold leading-none tracking-tight\">Payment Method</h3>\n        <p className=\"text-sm text-muted-foreground\">All transactions are secure and encrypted.</p>\n      </div>\n      <div className=\"p-6 pt-0 space-y-4\">\n        <div className=\"space-y-2\">\n          <label className=\"text-sm font-medium\">Name on Card</label>\n          <input className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus:border-ring focus:outline-none cursor-text\" placeholder=\"John Doe\" />\n        </div>\n        <div className=\"grid grid-cols-3 gap-4\">\n          <div className=\"col-span-2 space-y-2\">\n            <label className=\"text-sm font-medium\">Card Number</label>\n            <input className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus:border-ring focus:outline-none cursor-text\" placeholder=\"1234 5678 9012 3456\" />\n          </div>\n          <div className=\"space-y-2\">\n            <label className=\"text-sm font-medium\">CVV</label>\n            <input className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus:border-ring focus:outline-none cursor-text\" placeholder=\"123\" />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div className=\"space-y-2\">\n            <label className=\"text-sm font-medium\">Month</label>\n            <SelectBlock\n              options={MONTH_OPTIONS}\n              value={month}\n              onChange={setMonth}\n              inputSize=\"sm\"\n              placeholder=\"Select month\"\n            />\n          </div>\n          <div className=\"space-y-2\">\n            <label className=\"text-sm font-medium\">Year</label>\n            <SelectBlock\n              options={YEAR_OPTIONS}\n              value={year}\n              onChange={setYear}\n              inputSize=\"sm\"\n              placeholder=\"Select year\"\n            />\n          </div>\n        </div>\n        <button onClick={handleSubmit} disabled={isSubmitting} className=\"mt-2 w-full inline-flex h-9 items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer\">\n          {isSubmitting ? (\n            <svg className=\"animate-spin -ml-1 mr-3 h-4 w-4 text-current\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n              <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n          ) : \"Save Payment Method\"}\n        </button>\n      </div>\n    </ComponentCard>\n  );\n}",
      "type": "registry:component",
      "target": "components/custom/blocks/PaymentBlock.tsx"
    }
  ],
  "docs": "Named export: PaymentBlock. A self-contained example with hardcoded month and year options and a mocked submit — adapt it rather than configuring through props. Depends on `select` and `ui-base`. No payment provider is wired in; never handle raw card numbers without a PCI-compliant processor such as Stripe Elements.",
  "categories": [
    "commerce",
    "forms"
  ],
  "type": "registry:component"
}