"use client";

// src/components/ui/payment-card-fields.tsx
import * as React2 from "react";
import { CreditCard } from "lucide-react";
import { usePaymentInputs } from "react-payment-inputs";
import images from "react-payment-inputs/images";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/input.tsx
import * as React from "react";
import { jsx } from "react/jsx-runtime";
var Input = React.forwardRef(
  function Input2({ className, type, ...props }, ref) {
    return /* @__PURE__ */ jsx(
      "input",
      {
        ref,
        type,
        "data-slot": "input",
        className: cn(
          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
          className
        ),
        ...props
      }
    );
  }
);

// src/components/ui/payment-card-fields.tsx
import { usePaymentInputs as usePaymentInputs2 } from "react-payment-inputs";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function PaymentCardFieldsGroup({ className }) {
  const id = React2.useId();
  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();
  return /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-xs space-y-0", className), children: [
    /* @__PURE__ */ jsxs("div", { className: "relative focus-within:z-1", children: [
      /* @__PURE__ */ jsx2(
        Input,
        {
          ...getCardNumberProps(),
          id: `card-number-${id}`,
          className: "peer rounded-b-none pe-11 shadow-none"
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50", children: [
        meta.cardType ? /* @__PURE__ */ jsx2(
          "svg",
          {
            className: "w-6 overflow-hidden",
            ...getCardImageProps({
              images
            })
          }
        ) : /* @__PURE__ */ jsx2(CreditCard, { className: "size-4", "aria-hidden": true }),
        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Card network" })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "-mt-px flex", children: [
      /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1 focus-within:z-1", children: /* @__PURE__ */ jsx2(
        Input,
        {
          ...getExpiryDateProps(),
          id: `card-expiry-${id}`,
          className: "rounded-t-none rounded-e-none shadow-none"
        }
      ) }),
      /* @__PURE__ */ jsx2("div", { className: "-ms-px min-w-0 flex-1 focus-within:z-1", children: /* @__PURE__ */ jsx2(
        Input,
        {
          ...getCVCProps(),
          id: `card-cvc-${id}`,
          className: "rounded-t-none rounded-s-none shadow-none"
        }
      ) })
    ] })
  ] });
}
export {
  PaymentCardFieldsGroup,
  usePaymentInputs2 as usePaymentInputs
};
//# sourceMappingURL=payment-card-fields.js.map