{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog12",
  "title": "Alert dialog",
  "description": "Alert dialog built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/alert-dialog/12/index.tsx",
      "content": "\"use client\";\n\nimport { CreditCardIcon, StoreIcon } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport images, { type CardImages } from \"react-payment-inputs/images\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs();\n  const couponInputRef = useRef<HTMLInputElement>(null);\n  const [showCouponInput, setShowCouponInput] = useState(false);\n  const [couponCode, setCouponCode] = useState(\"\");\n\n  // Auto-focus the coupon input when it's shown\n  useEffect(() => {\n    if (showCouponInput && couponInputRef.current) {\n      couponInputRef.current.focus();\n    }\n  }, [showCouponInput]);\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Checkout</Button>\n      </DialogTrigger>\n      <DialogContent className=\"lg:max-w-md\">\n        <div className=\"mb-2 flex gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <StoreIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left font-normal\">\n              Confirm and pay\n            </DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pay securely and cancel any time.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <RadioGroup className=\"grid-cols-2\" defaultValue=\"yearly\">\n              {/* Monthly */}\n              <label className=\"border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative flex cursor-pointer flex-col gap-1 rounded-md border px-4 py-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]\">\n                <RadioGroupItem\n                  className=\"sr-only after:absolute after:inset-0\"\n                  id=\"radio-monthly\"\n                  value=\"monthly\"\n                />\n                <p className=\"text-foreground text-sm font-medium\">Monthly</p>\n                <p className=\"text-muted-foreground text-sm\">$32/month</p>\n              </label>\n              {/* Yearly */}\n              <label className=\"border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative flex cursor-pointer flex-col gap-1 rounded-md border px-4 py-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]\">\n                <RadioGroupItem\n                  className=\"sr-only after:absolute after:inset-0\"\n                  id=\"radio-yearly\"\n                  value=\"yearly\"\n                />\n                <div className=\"inline-flex items-start justify-between gap-2\">\n                  <p className=\"text-foreground text-sm font-medium\">Yearly</p>\n                  <Badge>Popular</Badge>\n                </div>\n                <p className=\"text-muted-foreground text-sm\">$320/month</p>\n              </label>\n            </RadioGroup>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\n              <Input id={`name-${id}`} required type=\"text\" />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <legend className=\"text-foreground text-sm font-medium\">\n                Card Details\n              </legend>\n              <div className=\"rounded-md shadow-xs\">\n                <div className=\"relative focus-within:z-10\">\n                  <Input\n                    className=\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\"\n                    {...getCardNumberProps()}\n                  />\n                  <div className=\"text-muted-foreground/80 pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50\">\n                    {meta.cardType ? (\n                      <svg\n                        className=\"overflow-hidden rounded-sm\"\n                        {...getCardImageProps({\n                          images: images as unknown as CardImages,\n                        })}\n                        width={20}\n                      />\n                    ) : (\n                      <CreditCardIcon aria-hidden=\"true\" size={16} />\n                    )}\n                  </div>\n                </div>\n                <div className=\"-mt-px flex\">\n                  <div className=\"min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getExpiryDateProps()}\n                    />\n                  </div>\n                  <div className=\"-ms-px min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getCVCProps()}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            {!showCouponInput ? (\n              <button\n                className=\"text-sm underline hover:no-underline\"\n                onClick={() => setShowCouponInput(true)}\n                type=\"button\"\n              >\n                + Add coupon\n              </button>\n            ) : (\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`coupon-${id}`}>Coupon code</Label>\n                <Input\n                  id={`coupon-${id}`}\n                  onChange={(e) => setCouponCode(e.target.value)}\n                  placeholder=\"Enter your code\"\n                  ref={couponInputRef}\n                  value={couponCode}\n                />\n              </div>\n            )}\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Subscribe\n          </Button>\n        </form>\n\n        <p className=\"text-muted-foreground text-center text-xs\">\n          Payments are non-refundable. Cancel anytime.\n        </p>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-dialog12.tsx"
    }
  ],
  "type": "registry:component"
}