@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-RQBYBBMP.js

@@ -0,0 +1,309 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { CreditCard } from 'lucide-react';
+import { useRef, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/PaymentInput/card-utils.ts
+var STANDARD_CARD_FORMAT = "#### #### #### ####";
+var cardTypes = [
+  {
+    type: "visa",
+    name: "Visa",
+    patterns: [/^4/],
+    lengths: [13, 16, 19],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  },
+  {
+    type: "mastercard",
+    name: "Mastercard",
+    patterns: [/^5[1-5]/, /^2[2-7]/],
+    lengths: [16],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  },
+  {
+    type: "amex",
+    name: "American Express",
+    patterns: [/^3[47]/],
+    lengths: [15],
+    cvvLength: 4,
+    format: "#### ###### #####"
+  },
+  {
+    type: "discover",
+    name: "Discover",
+    patterns: [/^6(?:011|5)/, /^64[4-9]/, /^622/],
+    lengths: [16, 19],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  },
+  {
+    type: "diners",
+    name: "Diners Club",
+    patterns: [/^3(?:0[0-5]|[68])/, /^36/],
+    lengths: [14, 16, 19],
+    cvvLength: 3,
+    format: "#### ###### ####"
+  },
+  {
+    type: "jcb",
+    name: "JCB",
+    patterns: [/^35(?:2[89]|[3-8])/, /^2131/, /^1800/],
+    lengths: [16, 17, 18, 19],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  },
+  {
+    type: "elo",
+    name: "Elo",
+    patterns: [
+      /^4011(78|79)/,
+      /^43(1274|8935)/,
+      /^45(1416|7393|763(1|2))/,
+      /^50(4175|6699|67[0-6][0-9]|677[0-8]|9[0-8][0-9]{2}|99[0-8][0-9]|999[0-9])/,
+      /^627780/,
+      /^636297/,
+      /^636368/,
+      /^65003[1-3]/,
+      /^6500(3[5-9]|4[0-9]|5[0-1])/,
+      /^6504(0[5-9]|[1-3][0-9])/,
+      /^650(4[8-9][0-9]|5[0-2][0-9]|53[0-8])/,
+      /^6505(4[1-9]|[5-8][0-9]|9[0-8])/,
+      /^6507(0[0-9]|1[0-8])/,
+      /^65072[0-7]/,
+      /^6509(0[1-9]|1[0-9]|20)/,
+      /^6516(5[2-9]|[6-7][0-9])/,
+      /^6550([0-1][0-9]|2[1-9]|[3-4][0-9]|5[0-8])/
+    ],
+    lengths: [16],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  },
+  {
+    type: "hipercard",
+    name: "Hipercard",
+    patterns: [/^606282/, /^3841(0[0-9]|4[0-9]|80)/],
+    lengths: [16, 19],
+    cvvLength: 3,
+    format: STANDARD_CARD_FORMAT
+  }
+];
+function detectCardType(cardNumber) {
+  const digits = cardNumber.replaceAll(/\D/g, "");
+  for (const card of cardTypes) {
+    for (const pattern of card.patterns) {
+      if (pattern.test(digits)) {
+        return card.type;
+      }
+    }
+  }
+  return null;
+}
+function getCardConfig(cardType) {
+  return cardTypes.find((c) => c.type === cardType);
+}
+function formatCardNumber(value, cardType) {
+  const digits = value.replaceAll(/\D/g, "");
+  const config = cardType ? getCardConfig(cardType) : null;
+  const format = config?.format ?? STANDARD_CARD_FORMAT;
+  let result = "";
+  let digitIndex = 0;
+  for (const char of format) {
+    if (digitIndex >= digits.length) break;
+    if (char === "#") {
+      result += digits[digitIndex] ?? "";
+      digitIndex++;
+    } else {
+      result += char;
+    }
+  }
+  return result;
+}
+function getCardDigits(value) {
+  return value.replaceAll(/\D/g, "");
+}
+function validateCardNumber(cardNumber) {
+  const digits = cardNumber.replaceAll(/\D/g, "");
+  if (digits.length < 13 || digits.length > 19) {
+    return false;
+  }
+  let sum = 0;
+  let isEven = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    const char = digits[i];
+    if (!char) continue;
+    let digit = Number.parseInt(char, 10);
+    if (isEven) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+    sum += digit;
+    isEven = !isEven;
+  }
+  return sum % 10 === 0;
+}
+function getCardBrandName(cardType) {
+  if (!cardType) return "";
+  const config = getCardConfig(cardType);
+  return config?.name ?? "";
+}
+var paymentInputVariants = cva(
+  [
+    "flex items-center w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none",
+    "dark:bg-input/30",
+    "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+    "has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-sm gap-2",
+        md: "h-9 px-3 text-base md:text-sm gap-2.5",
+        lg: "h-10 px-3.5 text-base gap-3"
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var paymentInputInputVariants = cva(
+  [
+    "flex-1 min-w-0 bg-transparent outline-none font-mono",
+    "placeholder:text-muted-foreground placeholder:font-sans",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base md:text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var paymentInputIconVariants = cva(
+  "shrink-0 text-[color:var(--payment-input-icon-color)] transition-opacity",
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7"
+      },
+      hasCard: {
+        true: "opacity-100",
+        false: "opacity-40"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasCard: false
+    }
+  }
+);
+var CardIcons = {
+  visa: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9.5 14.25h-1.5l.94-5.5h1.5l-.94 5.5zm6.75-5.37c-.3-.11-.77-.23-1.35-.23-1.5 0-2.55.75-2.56 1.83-.01.8.76 1.24 1.34 1.5.59.27.79.45.79.69-.01.37-.47.54-.91.54-.61 0-.93-.08-1.43-.29l-.2-.09-.21 1.24c.36.15 1.02.29 1.7.29 1.59 0 2.62-.74 2.63-1.9.01-.63-.4-1.12-1.29-1.52-.54-.26-.87-.43-.87-.69 0-.23.28-.48.88-.48.51-.01.87.1 1.15.21l.14.06.21-1.16zm3.97-.13h-1.17c-.36 0-.64.1-.79.46l-2.26 5.04h1.59l.32-.83h1.95l.18.83h1.4l-1.22-5.5zm-1.65 3.57l.8-2.02.46 2.02h-1.26zm-11.82-3.57l-1.49 3.75-.16-.75-.52-2.48c-.09-.34-.35-.47-.68-.48h-2.42l-.03.14c.56.14 1.06.33 1.49.55l1.27 4.77h1.61l2.39-5.5h-1.46z" }) }),
+  mastercard: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M15.245 17.831c-1.458 1.093-3.256 1.744-5.207 1.744-4.786 0-8.669-3.855-8.669-8.613s3.883-8.613 8.669-8.613c1.951 0 3.749.651 5.207 1.744-2.06 1.655-3.383 4.177-3.383 7.019s1.323 5.364 3.383 7.019zm5.217-6.869c0-2.842-1.323-5.364-3.383-7.019-1.458 1.093-3.256 1.744-5.207 1.744-1.951 0-3.749-.651-5.207-1.744 2.06 1.655 3.383 4.177 3.383 7.019s-1.323 5.364-3.383 7.019c1.458-1.093 3.256-1.744 5.207-1.744 1.951 0 3.749.651 5.207 1.744-2.06-1.655-3.383-4.177-3.383-7.019z" }) }),
+  amex: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-10.65 2.5h1.3v-1.125h-1.3V12.5h1.3v-1h-2.35v4h2.35v-1h-1.3zm6.65-3h-3.85v4h1.05v-1.25h2.3v-1h-2.3v-.75h2.8v-1zm-9.25 0h-2.1l-1.4 1.65-1.4-1.65h-2.1v4h1.05v-2.8l1.45 1.75h.95l1.45-1.75v2.8h1.05v-4z" }) }),
+  discover: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" }) }),
+  diners: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55zm4 0v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55z" }) }),
+  jcb: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M17.5 3h-11C4.57 3 3 4.57 3 6.5v11c0 1.93 1.57 3.5 3.5 3.5h11c1.93 0 3.5-1.57 3.5-3.5v-11C21 4.57 19.43 3 17.5 3zm-7 12c0 .55-.45 1-1 1s-1-.45-1-1V9c0-.55.45-1 1-1s1 .45 1 1v6zm4.5 1c-1.38 0-2.5-1.12-2.5-2.5V9h2v4.5c0 .28.22.5.5.5s.5-.22.5-.5V9h2v4.5c0 1.38-1.12 2.5-2.5 2.5z" }) }),
+  elo: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 13l-4-4 1.41-1.41L10 12.17l6.59-6.59L18 7l-8 8z" }) }),
+  hipercard: ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L18 8v8l-6 3.5L6 16V8l6-3.5z" }) }),
+  unknown: CreditCard
+};
+function PaymentInput({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onCardTypeChange,
+  disabled,
+  size = "md",
+  variant,
+  invalid,
+  showCardIcon = true,
+  placeholder = "0000 0000 0000 0000",
+  className,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [cardType, setCardType] = useState(
+    () => detectCardType(defaultValue)
+  );
+  const isControlled = controlledValue !== void 0;
+  const cardValue = isControlled ? controlledValue : internalValue;
+  const displayValue = formatCardNumber(cardValue, cardType);
+  const prevCardTypeRef = useRef(cardType);
+  const handleInputChange = useCallback(
+    (e) => {
+      const rawValue = getCardDigits(e.target.value);
+      const limitedValue = rawValue.slice(0, 19);
+      const detectedType = detectCardType(limitedValue);
+      setCardType(detectedType);
+      if (!isControlled) {
+        setInternalValue(limitedValue);
+      }
+      onChange?.(limitedValue, detectedType);
+      if (prevCardTypeRef.current !== detectedType) {
+        onCardTypeChange?.(detectedType);
+        prevCardTypeRef.current = detectedType;
+      }
+    },
+    [isControlled, onChange, onCardTypeChange]
+  );
+  const CardIcon = cardType ? CardIcons[cardType] : CardIcons.unknown;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-invalid": invalid ?? void 0,
+      className: cn(paymentInputVariants({ size, variant }), className),
+      "data-slot": "payment-input",
+      children: [
+        showCardIcon && /* @__PURE__ */ jsx(
+          CardIcon,
+          {
+            className: paymentInputIconVariants({ size, hasCard: !!cardType })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            "aria-invalid": invalid ?? void 0,
+            autoComplete: "cc-number",
+            className: paymentInputInputVariants({ size }),
+            "data-slot": "payment-input-field",
+            disabled,
+            inputMode: "numeric",
+            placeholder,
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { PaymentInput, cardTypes, detectCardType, formatCardNumber, getCardBrandName, getCardConfig, getCardDigits, paymentInputIconVariants, paymentInputInputVariants, paymentInputVariants, validateCardNumber };
+//# sourceMappingURL=chunk-RQBYBBMP.js.map
+//# sourceMappingURL=chunk-RQBYBBMP.js.map

package/dist/chunk-RQBYBBMP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/PaymentInput/card-utils.ts","../src/components/forms/PaymentInput/PaymentInput.variants.ts","../src/components/forms/PaymentInput/PaymentInput.tsx"],"names":[],"mappings":";;;;;;;AAgCA,IAAM,oBAAA,GAAuB,qBAAA;AAKtB,IAAM,SAAA,GAA8B;AAAA,EACzC;AAAA,IACE,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,QAAA,EAAU,CAAC,IAAI,CAAA;AAAA,IACf,OAAA,EAAS,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA;AAAA,IACpB,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,YAAA;AAAA,IACN,IAAA,EAAM,YAAA;AAAA,IACN,QAAA,EAAU,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,IAC/B,OAAA,EAAS,CAAC,EAAE,CAAA;AAAA,IACZ,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,kBAAA;AAAA,IACN,QAAA,EAAU,CAAC,QAAQ,CAAA;AAAA,IACnB,OAAA,EAAS,CAAC,EAAE,CAAA;AAAA,IACZ,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,UAAA;AAAA,IACN,IAAA,EAAM,UAAA;AAAA,IACN,QAAA,EAAU,CAAC,aAAA,EAAe,UAAA,EAAY,MAAM,CAAA;AAAA,IAC5C,OAAA,EAAS,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,IAChB,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,QAAA;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,QAAA,EAAU,CAAC,mBAAA,EAAqB,KAAK,CAAA;AAAA,IACrC,OAAA,EAAS,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA;AAAA,IACpB,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,IAAA,EAAM,KAAA;AAAA,IACN,QAAA,EAAU,CAAC,oBAAA,EAAsB,OAAA,EAAS,OAAO,CAAA;AAAA,IACjD,OAAA,EAAS,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,IACxB,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,IAAA,EAAM,KAAA;AAAA,IACN,QAAA,EAAU;AAAA,MACR,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,yBAAA;AAAA,MACA,2EAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,6BAAA;AAAA,MACA,0BAAA;AAAA,MACA,uCAAA;AAAA,MACA,iCAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACA,yBAAA;AAAA,MACA,0BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,CAAC,EAAE,CAAA;AAAA,IACZ,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA,GACV;AAAA,EACA;AAAA,IACE,IAAA,EAAM,WAAA;AAAA,IACN,IAAA,EAAM,WAAA;AAAA,IACN,QAAA,EAAU,CAAC,SAAA,EAAW,yBAAyB,CAAA;AAAA,IAC/C,OAAA,EAAS,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,IAChB,SAAA,EAAW,CAAA;AAAA,IACX,MAAA,EAAQ;AAAA;AAEZ;AAKO,SAAS,eAAe,UAAA,EAAqC;AAClE,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,UAAA,CAAW,KAAA,EAAO,EAAE,CAAA;AAE9C,EAAA,KAAA,MAAW,QAAQ,SAAA,EAAW;AAC5B,IAAA,KAAA,MAAW,OAAA,IAAW,KAAK,QAAA,EAAU;AACnC,MAAA,IAAI,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAA,EAAG;AACxB,QAAA,OAAO,IAAA,CAAK,IAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO,IAAA;AACT;AAKO,SAAS,cAAc,QAAA,EAAgD;AAC5E,EAAA,OAAO,UAAU,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,QAAQ,CAAA;AAClD;AAKO,SAAS,gBAAA,CAAiB,OAAe,QAAA,EAAoC;AAClF,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,UAAA,CAAW,KAAA,EAAO,EAAE,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,QAAA,GAAW,aAAA,CAAc,QAAQ,CAAA,GAAI,IAAA;AACpD,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,oBAAA;AAEjC,EAAA,IAAI,MAAA,GAAS,EAAA;AACb,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,KAAA,MAAW,QAAQ,MAAA,EAAQ;AACzB,IAAA,IAAI,UAAA,IAAc,OAAO,MAAA,EAAQ;AAEjC,IAAA,IAAI,SAAS,GAAA,EAAK;AAChB,MAAA,MAAA,IAAU,MAAA,CAAO,UAAU,CAAA,IAAK,EAAA;AAChC,MAAA,UAAA,EAAA;AAAA,IACF,CAAA,MAAO;AACL,MAAA,MAAA,IAAU,IAAA;AAAA,IACZ;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAKO,SAAS,cAAc,KAAA,EAAuB;AACnD,EAAA,OAAO,KAAA,CAAM,UAAA,CAAW,KAAA,EAAO,EAAE,CAAA;AACnC;AAKO,SAAS,mBAAmB,UAAA,EAA6B;AAC9D,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,UAAA,CAAW,KAAA,EAAO,EAAE,CAAA;AAE9C,EAAA,IAAI,MAAA,CAAO,MAAA,GAAS,EAAA,IAAM,MAAA,CAAO,SAAS,EAAA,EAAI;AAC5C,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,GAAA,GAAM,CAAA;AACV,EAAA,IAAI,MAAA,GAAS,KAAA;AAEb,EAAA,KAAA,IAAS,IAAI,MAAA,CAAO,MAAA,GAAS,CAAA,EAAG,CAAA,IAAK,GAAG,CAAA,EAAA,EAAK;AAC3C,IAAA,MAAM,IAAA,GAAO,OAAO,CAAC,CAAA;AACrB,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,IAAI,KAAA,GAAQ,MAAA,CAAO,QAAA,CAAS,IAAA,EAAM,EAAE,CAAA;AAEpC,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,KAAA,IAAS,CAAA;AACT,MAAA,IAAI,QAAQ,CAAA,EAAG;AACb,QAAA,KAAA,IAAS,CAAA;AAAA,MACX;AAAA,IACF;AAEA,IAAA,GAAA,IAAO,KAAA;AACP,IAAA,MAAA,GAAS,CAAC,MAAA;AAAA,EACZ;AAEA,EAAA,OAAO,MAAM,EAAA,KAAO,CAAA;AACtB;AAKO,SAAS,iBAAiB,QAAA,EAAmC;AAClE,EAAA,IAAI,CAAC,UAAU,OAAO,EAAA;AACtB,EAAA,MAAM,MAAA,GAAS,cAAc,QAAQ,CAAA;AACrC,EAAA,OAAO,QAAQ,IAAA,IAAQ,EAAA;AACzB;ACrNO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC;AAAA,IACE,8GAAA;AAAA,IACA,kBAAA;AAAA,IACA,4EAAA;AAAA,IACA,0FAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,0BAAA;AAAA,QACJ,EAAA,EAAI,uCAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wBAAA;AAAA,QACT,MAAA,EAAQ,6BAAA;AAAA,QACR,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;AAKO,IAAM,yBAAA,GAA4B,GAAA;AAAA,EACvC;AAAA,IACE,sDAAA;AAAA,IACA,yDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC,0EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;ACtDA,IAAM,SAAA,GAA4E;AAAA,EAChF,MAAM,CAAC,EAAE,SAAA,EAAU,yBAChB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+lBAA8lB,CAAA,EACxmB,CAAA;AAAA,EAEF,YAAY,CAAC,EAAE,SAAA,EAAU,yBACtB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0dAAyd,CAAA,EACne,CAAA;AAAA,EAEF,MAAM,CAAC,EAAE,SAAA,EAAU,yBAChB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kRAAiR,CAAA,EAC3R,CAAA;AAAA,EAEF,UAAU,CAAC,EAAE,SAAA,EAAU,yBACpB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gIAA+H,CAAA,EACzI,CAAA;AAAA,EAEF,QAAQ,CAAC,EAAE,SAAA,EAAU,yBAClB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0MAAyM,CAAA,EACnN,CAAA;AAAA,EAEF,KAAK,CAAC,EAAE,SAAA,EAAU,yBACf,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uRAAsR,CAAA,EAChS,CAAA;AAAA,EAEF,KAAK,CAAC,EAAE,SAAA,EAAU,yBACf,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,yHAAwH,CAAA,EAClI,CAAA;AAAA,EAEF,WAAW,CAAC,EAAE,SAAA,EAAU,yBACrB,KAAA,EAAA,EAAI,SAAA,EAAsB,IAAA,EAAK,cAAA,EAAe,SAAQ,WAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kEAAiE,CAAA,EAC3E,CAAA;AAAA,EAEF,OAAA,EAAS;AACX,CAAA;AAqBA,SAAS,YAAA,CAAa;AAAA,EACpB,KAAA,EAAO,eAAA;AAAA,EACP,YAAA,GAAe,EAAA;AAAA,EACf,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,WAAA,GAAc,qBAAA;AAAA,EACd,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAG9C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,YAAY,CAAA;AAC/D,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA;AAAA,IAA0B,MACxD,eAAe,YAAY;AAAA,GAC7B;AAGA,EAAA,MAAM,eAAe,eAAA,KAAoB,MAAA;AACzC,EAAA,MAAM,SAAA,GAAY,eAAe,eAAA,GAAkB,aAAA;AAGnD,EAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,SAAA,EAAW,QAAQ,CAAA;AAGzD,EAAA,MAAM,eAAA,GAAkB,OAAwB,QAAQ,CAAA;AAExD,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,CAAC,CAAA,KAA2C;AAC1C,MAAA,MAAM,QAAA,GAAW,aAAA,CAAc,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAG7C,MAAA,MAAM,YAAA,GAAe,QAAA,CAAS,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AAGzC,MAAA,MAAM,YAAA,GAAe,eAAe,YAAY,CAAA;AAChD,MAAA,WAAA,CAAY,YAAY,CAAA;AAExB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,gBAAA,CAAiB,YAAY,CAAA;AAAA,MAC/B;AAEA,MAAA,QAAA,GAAW,cAAc,YAAY,CAAA;AAGrC,MAAA,IAAI,eAAA,CAAgB,YAAY,YAAA,EAAc;AAC5C,QAAA,gBAAA,GAAmB,YAAY,CAAA;AAC/B,QAAA,eAAA,CAAgB,OAAA,GAAU,YAAA;AAAA,MAC5B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAA,EAAc,QAAA,EAAU,gBAAgB;AAAA,GAC3C;AAGA,EAAA,MAAM,QAAA,GAAW,QAAA,GAAW,SAAA,CAAU,QAAQ,IAAI,SAAA,CAAU,OAAA;AAE5D,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,gBAAc,OAAA,IAAW,MAAA;AAAA,MACzB,SAAA,EAAW,GAAG,oBAAA,CAAqB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAChE,WAAA,EAAU,eAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,YAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,yBAAyB,EAAE,IAAA,EAAM,SAAS,CAAC,CAAC,UAAU;AAAA;AAAA,SACnE;AAAA,wBAEF,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,gBAAc,OAAA,IAAW,MAAA;AAAA,YACzB,YAAA,EAAa,WAAA;AAAA,YACb,SAAA,EAAW,yBAAA,CAA0B,EAAE,IAAA,EAAM,CAAA;AAAA,YAC7C,WAAA,EAAU,qBAAA;AAAA,YACV,QAAA;AAAA,YACA,SAAA,EAAU,SAAA;AAAA,YACV,WAAA;AAAA,YACA,IAAA,EAAK,MAAA;AAAA,YACL,KAAA,EAAO,YAAA;AAAA,YACP,QAAA,EAAU,iBAAA;AAAA,YACT,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,GACF;AAEJ","file":"chunk-RQBYBBMP.js","sourcesContent":["/**\n * Supported card types\n */\nexport type CardType =\n  | \"amex\"\n  | \"diners\"\n  | \"discover\"\n  | \"elo\"\n  | \"hipercard\"\n  | \"jcb\"\n  | \"mastercard\"\n  | \"visa\"\n\n/**\n * Card type configuration\n */\nexport interface CardTypeConfig {\n  /** CVV length */\n  cvvLength: number\n  /** Card number format (# = digit, space = separator) */\n  format: string\n  /** Card number length(s) */\n  lengths: number[]\n  name: string\n  /** Regex patterns to match card number prefixes */\n  patterns: RegExp[]\n  type: CardType\n}\n\n/**\n * Standard 16-digit card format\n */\nconst STANDARD_CARD_FORMAT = \"#### #### #### ####\"\n\n/**\n * Card type configurations\n */\nexport const cardTypes: CardTypeConfig[] = [\n  {\n    type: \"visa\",\n    name: \"Visa\",\n    patterns: [/^4/],\n    lengths: [13, 16, 19],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n  {\n    type: \"mastercard\",\n    name: \"Mastercard\",\n    patterns: [/^5[1-5]/, /^2[2-7]/],\n    lengths: [16],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n  {\n    type: \"amex\",\n    name: \"American Express\",\n    patterns: [/^3[47]/],\n    lengths: [15],\n    cvvLength: 4,\n    format: \"#### ###### #####\",\n  },\n  {\n    type: \"discover\",\n    name: \"Discover\",\n    patterns: [/^6(?:011|5)/, /^64[4-9]/, /^622/],\n    lengths: [16, 19],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n  {\n    type: \"diners\",\n    name: \"Diners Club\",\n    patterns: [/^3(?:0[0-5]|[68])/, /^36/],\n    lengths: [14, 16, 19],\n    cvvLength: 3,\n    format: \"#### ###### ####\",\n  },\n  {\n    type: \"jcb\",\n    name: \"JCB\",\n    patterns: [/^35(?:2[89]|[3-8])/, /^2131/, /^1800/],\n    lengths: [16, 17, 18, 19],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n  {\n    type: \"elo\",\n    name: \"Elo\",\n    patterns: [\n      /^4011(78|79)/,\n      /^43(1274|8935)/,\n      /^45(1416|7393|763(1|2))/,\n      /^50(4175|6699|67[0-6][0-9]|677[0-8]|9[0-8][0-9]{2}|99[0-8][0-9]|999[0-9])/,\n      /^627780/,\n      /^636297/,\n      /^636368/,\n      /^65003[1-3]/,\n      /^6500(3[5-9]|4[0-9]|5[0-1])/,\n      /^6504(0[5-9]|[1-3][0-9])/,\n      /^650(4[8-9][0-9]|5[0-2][0-9]|53[0-8])/,\n      /^6505(4[1-9]|[5-8][0-9]|9[0-8])/,\n      /^6507(0[0-9]|1[0-8])/,\n      /^65072[0-7]/,\n      /^6509(0[1-9]|1[0-9]|20)/,\n      /^6516(5[2-9]|[6-7][0-9])/,\n      /^6550([0-1][0-9]|2[1-9]|[3-4][0-9]|5[0-8])/,\n    ],\n    lengths: [16],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n  {\n    type: \"hipercard\",\n    name: \"Hipercard\",\n    patterns: [/^606282/, /^3841(0[0-9]|4[0-9]|80)/],\n    lengths: [16, 19],\n    cvvLength: 3,\n    format: STANDARD_CARD_FORMAT,\n  },\n]\n\n/**\n * Detect card type from card number\n */\nexport function detectCardType(cardNumber: string): CardType | null {\n  const digits = cardNumber.replaceAll(/\\D/g, \"\")\n\n  for (const card of cardTypes) {\n    for (const pattern of card.patterns) {\n      if (pattern.test(digits)) {\n        return card.type\n      }\n    }\n  }\n\n  return null\n}\n\n/**\n * Get card type configuration\n */\nexport function getCardConfig(cardType: CardType): CardTypeConfig | undefined {\n  return cardTypes.find((c) => c.type === cardType)\n}\n\n/**\n * Format card number with spaces\n */\nexport function formatCardNumber(value: string, cardType?: CardType | null): string {\n  const digits = value.replaceAll(/\\D/g, \"\")\n  const config = cardType ? getCardConfig(cardType) : null\n  const format = config?.format ?? STANDARD_CARD_FORMAT\n\n  let result = \"\"\n  let digitIndex = 0\n\n  for (const char of format) {\n    if (digitIndex >= digits.length) break\n\n    if (char === \"#\") {\n      result += digits[digitIndex] ?? \"\"\n      digitIndex++\n    } else {\n      result += char\n    }\n  }\n\n  return result\n}\n\n/**\n * Get raw digits from formatted card number\n */\nexport function getCardDigits(value: string): string {\n  return value.replaceAll(/\\D/g, \"\")\n}\n\n/**\n * Validate card number using Luhn algorithm\n */\nexport function validateCardNumber(cardNumber: string): boolean {\n  const digits = cardNumber.replaceAll(/\\D/g, \"\")\n\n  if (digits.length < 13 || digits.length > 19) {\n    return false\n  }\n\n  let sum = 0\n  let isEven = false\n\n  for (let i = digits.length - 1; i >= 0; i--) {\n    const char = digits[i]\n    if (!char) continue\n\n    let digit = Number.parseInt(char, 10)\n\n    if (isEven) {\n      digit *= 2\n      if (digit > 9) {\n        digit -= 9\n      }\n    }\n\n    sum += digit\n    isEven = !isEven\n  }\n\n  return sum % 10 === 0\n}\n\n/**\n * Get card brand display name\n */\nexport function getCardBrandName(cardType: CardType | null): string {\n  if (!cardType) return \"\"\n  const config = getCardConfig(cardType)\n  return config?.name ?? \"\"\n}\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * PaymentInput container variant styles using CVA\n */\nexport const paymentInputVariants = cva(\n  [\n    \"flex items-center w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none\",\n    \"dark:bg-input/30\",\n    \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n    \"has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-sm gap-2\",\n        md: \"h-9 px-3 text-base md:text-sm gap-2.5\",\n        lg: \"h-10 px-3.5 text-base gap-3\",\n      },\n      variant: {\n        default: \"border-input shadow-xs\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * PaymentInput inner input styles\n */\nexport const paymentInputInputVariants = cva(\n  [\n    \"flex-1 min-w-0 bg-transparent outline-none font-mono\",\n    \"placeholder:text-muted-foreground placeholder:font-sans\",\n    \"disabled:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-sm\",\n        md: \"text-base md:text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * PaymentInput card icon styles\n */\nexport const paymentInputIconVariants = cva(\n  \"shrink-0 text-[color:var(--payment-input-icon-color)] transition-opacity\",\n  {\n    variants: {\n      size: {\n        sm: \"size-5\",\n        md: \"size-6\",\n        lg: \"size-7\",\n      },\n      hasCard: {\n        true: \"opacity-100\",\n        false: \"opacity-40\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      hasCard: false,\n    },\n  }\n)\n\nexport type PaymentInputVariantProps = VariantProps<typeof paymentInputVariants>\n","\"use client\"\n\nimport type { PaymentInputProps } from \"./PaymentInput.types\"\n\nimport { CreditCard } from \"lucide-react\"\nimport * as React from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  type CardType,\n  detectCardType,\n  formatCardNumber,\n  getCardDigits,\n} from \"./card-utils\"\nimport {\n  paymentInputIconVariants,\n  paymentInputInputVariants,\n  paymentInputVariants,\n} from \"./PaymentInput.variants\"\n\n/**\n * Card brand icons as simple SVG components\n */\nconst CardIcons: Record<\"unknown\" | CardType, React.FC<{ className?: string }>> = {\n  visa: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M9.5 14.25h-1.5l.94-5.5h1.5l-.94 5.5zm6.75-5.37c-.3-.11-.77-.23-1.35-.23-1.5 0-2.55.75-2.56 1.83-.01.8.76 1.24 1.34 1.5.59.27.79.45.79.69-.01.37-.47.54-.91.54-.61 0-.93-.08-1.43-.29l-.2-.09-.21 1.24c.36.15 1.02.29 1.7.29 1.59 0 2.62-.74 2.63-1.9.01-.63-.4-1.12-1.29-1.52-.54-.26-.87-.43-.87-.69 0-.23.28-.48.88-.48.51-.01.87.1 1.15.21l.14.06.21-1.16zm3.97-.13h-1.17c-.36 0-.64.1-.79.46l-2.26 5.04h1.59l.32-.83h1.95l.18.83h1.4l-1.22-5.5zm-1.65 3.57l.8-2.02.46 2.02h-1.26zm-11.82-3.57l-1.49 3.75-.16-.75-.52-2.48c-.09-.34-.35-.47-.68-.48h-2.42l-.03.14c.56.14 1.06.33 1.49.55l1.27 4.77h1.61l2.39-5.5h-1.46z\" />\n    </svg>\n  ),\n  mastercard: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M15.245 17.831c-1.458 1.093-3.256 1.744-5.207 1.744-4.786 0-8.669-3.855-8.669-8.613s3.883-8.613 8.669-8.613c1.951 0 3.749.651 5.207 1.744-2.06 1.655-3.383 4.177-3.383 7.019s1.323 5.364 3.383 7.019zm5.217-6.869c0-2.842-1.323-5.364-3.383-7.019-1.458 1.093-3.256 1.744-5.207 1.744-1.951 0-3.749-.651-5.207-1.744 2.06 1.655 3.383 4.177 3.383 7.019s-1.323 5.364-3.383 7.019c1.458-1.093 3.256-1.744 5.207-1.744 1.951 0 3.749.651 5.207 1.744-2.06-1.655-3.383-4.177-3.383-7.019z\" />\n    </svg>\n  ),\n  amex: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-10.65 2.5h1.3v-1.125h-1.3V12.5h1.3v-1h-2.35v4h2.35v-1h-1.3zm6.65-3h-3.85v4h1.05v-1.25h2.3v-1h-2.3v-.75h2.8v-1zm-9.25 0h-2.1l-1.4 1.65-1.4-1.65h-2.1v4h1.05v-2.8l1.45 1.75h.95l1.45-1.75v2.8h1.05v-4z\" />\n    </svg>\n  ),\n  discover: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\" />\n    </svg>\n  ),\n  diners: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55zm4 0v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55z\" />\n    </svg>\n  ),\n  jcb: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M17.5 3h-11C4.57 3 3 4.57 3 6.5v11c0 1.93 1.57 3.5 3.5 3.5h11c1.93 0 3.5-1.57 3.5-3.5v-11C21 4.57 19.43 3 17.5 3zm-7 12c0 .55-.45 1-1 1s-1-.45-1-1V9c0-.55.45-1 1-1s1 .45 1 1v6zm4.5 1c-1.38 0-2.5-1.12-2.5-2.5V9h2v4.5c0 .28.22.5.5.5s.5-.22.5-.5V9h2v4.5c0 1.38-1.12 2.5-2.5 2.5z\" />\n    </svg>\n  ),\n  elo: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 13l-4-4 1.41-1.41L10 12.17l6.59-6.59L18 7l-8 8z\" />\n    </svg>\n  ),\n  hipercard: ({ className }) => (\n    <svg className={className} fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L18 8v8l-6 3.5L6 16V8l6-3.5z\" />\n    </svg>\n  ),\n  unknown: CreditCard,\n}\n\n/**\n * PaymentInput - A credit card number input with auto-formatting and brand detection\n *\n * @example\n * ```tsx\n * // Basic usage\n * <PaymentInput placeholder=\"Card number\" />\n *\n * // Controlled\n * const [cardNumber, setCardNumber] = useState(\"\")\n * <PaymentInput\n *   value={cardNumber}\n *   onChange={(value, cardType) => {\n *     setCardNumber(value)\n *     console.log(`Card type: ${cardType}`)\n *   }}\n * />\n * ```\n */\nfunction PaymentInput({\n  value: controlledValue,\n  defaultValue = \"\",\n  onChange,\n  onCardTypeChange,\n  disabled,\n  size = \"md\",\n  variant,\n  invalid,\n  showCardIcon = true,\n  placeholder = \"0000 0000 0000 0000\",\n  className,\n  ...props\n}: PaymentInputProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [cardType, setCardType] = useState<CardType | null>(() =>\n    detectCardType(defaultValue)\n  )\n\n  // Determine if controlled\n  const isControlled = controlledValue !== undefined\n  const cardValue = isControlled ? controlledValue : internalValue\n\n  // Format the display value\n  const displayValue = formatCardNumber(cardValue, cardType)\n\n  // Track previous card type for change detection\n  const prevCardTypeRef = useRef<CardType | null>(cardType)\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const rawValue = getCardDigits(e.target.value)\n\n      // Limit to 19 digits (max card length)\n      const limitedValue = rawValue.slice(0, 19)\n\n      // Detect card type\n      const detectedType = detectCardType(limitedValue)\n      setCardType(detectedType)\n\n      if (!isControlled) {\n        setInternalValue(limitedValue)\n      }\n\n      onChange?.(limitedValue, detectedType)\n\n      // Notify on card type changes directly in the event handler (avoids effect anti-pattern)\n      if (prevCardTypeRef.current !== detectedType) {\n        onCardTypeChange?.(detectedType)\n        prevCardTypeRef.current = detectedType\n      }\n    },\n    [isControlled, onChange, onCardTypeChange]\n  )\n\n  // Get the card icon component\n  const CardIcon = cardType ? CardIcons[cardType] : CardIcons.unknown\n\n  return (\n    <div\n      aria-invalid={invalid ?? undefined}\n      className={cn(paymentInputVariants({ size, variant }), className)}\n      data-slot=\"payment-input\"\n    >\n      {showCardIcon && (\n        <CardIcon\n          className={paymentInputIconVariants({ size, hasCard: !!cardType })}\n        />\n      )}\n      <input\n        ref={inputRef}\n        aria-invalid={invalid ?? undefined}\n        autoComplete=\"cc-number\"\n        className={paymentInputInputVariants({ size })}\n        data-slot=\"payment-input-field\"\n        disabled={disabled}\n        inputMode=\"numeric\"\n        placeholder={placeholder}\n        type=\"text\"\n        value={displayValue}\n        onChange={handleInputChange}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { PaymentInput }\n"]}

package/dist/chunk-RVAYDRMA.js

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var INTERACTIVE_TARGET_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[role='button']",
+  "[role='checkbox']",
+  "[role='menuitem']",
+  "[role='option']",
+  "[role='switch']",
+  "[contenteditable='true']",
+  "[data-region-click-exempt]"
+].join(", ");
+function isInteractiveTarget(target, region) {
+  if (!(target instanceof Element) || !(region instanceof Element)) return false;
+  const hit = target.closest(INTERACTIVE_TARGET_SELECTOR);
+  if (!hit) return false;
+  return hit !== region && region.contains(hit);
+}
+
+export { cn, isInteractiveTarget };
+//# sourceMappingURL=chunk-RVAYDRMA.js.map
+//# sourceMappingURL=chunk-RVAYDRMA.js.map

package/dist/chunk-RVAYDRMA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAMA,IAAM,2BAAA,GAA8B;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA;AAEJ,SAAS,mBAAA,CACd,QACA,MAAA,EACS;AACT,EAAA,IAAI,EAAE,MAAA,YAAkB,OAAA,CAAA,IAAY,EAAE,MAAA,YAAkB,UAAU,OAAO,KAAA;AACzE,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,OAAA,CAAQ,2BAA2B,CAAA;AACtD,EAAA,IAAI,CAAC,KAAK,OAAO,KAAA;AAIjB,EAAA,OAAO,GAAA,KAAQ,MAAA,IAAU,MAAA,CAAO,QAAA,CAAS,GAAG,CAAA;AAC9C","file":"chunk-RVAYDRMA.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n// Interactive descendants of a clickable region (table row, card, gallery item)\n// must swallow the region's click: selecting a row via its checkbox cannot also\n// fire onRowClick. Region handlers call this guard before acting; consumers can\n// opt extra elements out of region clicks with data-region-click-exempt.\nconst INTERACTIVE_TARGET_SELECTOR = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"[role='button']\",\n  \"[role='checkbox']\",\n  \"[role='menuitem']\",\n  \"[role='option']\",\n  \"[role='switch']\",\n  \"[contenteditable='true']\",\n  \"[data-region-click-exempt]\",\n].join(\", \")\n\nexport function isInteractiveTarget(\n  target: EventTarget | null,\n  region: EventTarget | null,\n): boolean {\n  if (!(target instanceof Element) || !(region instanceof Element)) return false\n  const hit = target.closest(INTERACTIVE_TARGET_SELECTOR)\n  if (!hit) return false\n  // The region itself may be interactive (a card with role=\"button\"); only a\n  // match STRICTLY inside the region swallows its click — never the region\n  // itself, never an ancestor outside it.\n  return hit !== region && region.contains(hit)\n}\n"]}

package/dist/chunk-S4P7JIQ2.js

@@ -0,0 +1,103 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var paragraphVariants = cva(
+  "font-[family-name:var(--paragraph-base-font-family)]",
+  {
+    variants: {
+      size: {
+        xs: "text-[length:var(--paragraph-size-xs-font-size)] leading-[var(--paragraph-size-xs-line-height)]",
+        sm: "text-[length:var(--paragraph-size-sm-font-size)] leading-[var(--paragraph-size-sm-line-height)]",
+        base: "text-[length:var(--paragraph-size-base-font-size)] leading-[var(--paragraph-size-base-line-height)]",
+        lg: "text-[length:var(--paragraph-size-lg-font-size)] leading-[var(--paragraph-size-lg-line-height)]",
+        xl: "text-[length:var(--paragraph-size-xl-font-size)] leading-[var(--paragraph-size-xl-line-height)]"
+      },
+      weight: {
+        normal: "font-[var(--paragraph-weight-normal)]",
+        medium: "font-[var(--paragraph-weight-medium)]",
+        semibold: "font-[var(--paragraph-weight-semibold)]",
+        bold: "font-[var(--paragraph-weight-bold)]"
+      },
+      color: {
+        default: "text-[color:var(--paragraph-color-default)]",
+        muted: "text-[color:var(--paragraph-color-muted)]",
+        primary: "text-[color:var(--paragraph-color-primary)]",
+        destructive: "text-[color:var(--paragraph-color-destructive)]",
+        success: "text-[color:var(--paragraph-color-success)]"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+        justify: "text-justify"
+      },
+      leading: {
+        tight: "leading-tight",
+        snug: "leading-snug",
+        normal: "leading-normal",
+        relaxed: "leading-relaxed",
+        loose: "leading-loose"
+      },
+      spacing: {
+        none: "mb-[var(--paragraph-spacing-none)]",
+        tight: "mb-[var(--paragraph-spacing-tight)]",
+        normal: "mb-[var(--paragraph-spacing-normal)]",
+        relaxed: "mb-[var(--paragraph-spacing-relaxed)]"
+      },
+      prose: {
+        true: "max-w-prose",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "base",
+      weight: "normal",
+      color: "default",
+      align: "left",
+      spacing: "normal",
+      prose: false
+    }
+  }
+);
+function Paragraph({
+  className,
+  size,
+  weight,
+  color,
+  align,
+  leading,
+  spacing,
+  prose,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        paragraphVariants({
+          size,
+          weight,
+          color,
+          align,
+          leading,
+          spacing,
+          prose
+        }),
+        className
+      ),
+      "data-prose": prose ? "" : void 0,
+      "data-slot": "paragraph",
+      ...props
+    }
+  );
+}
+
+export { Paragraph, paragraphVariants };
+//# sourceMappingURL=chunk-S4P7JIQ2.js.map
+//# sourceMappingURL=chunk-S4P7JIQ2.js.map

package/dist/chunk-S4P7JIQ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Paragraph/Paragraph.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB,sDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,iGAAA;AAAA,QACJ,EAAA,EAAI,iGAAA;AAAA,QACJ,IAAA,EAAM,qGAAA;AAAA,QACN,EAAA,EAAI,iGAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ,uCAAA;AAAA,QACR,MAAA,EAAQ,uCAAA;AAAA,QACR,QAAA,EAAU,yCAAA;AAAA,QACV,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,6CAAA;AAAA,QACT,KAAA,EAAO,2CAAA;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,WAAA,EAAa,iDAAA;AAAA,QACb,OAAA,EAAS;AAAA,OACX;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,WAAA;AAAA,QACN,MAAA,EAAQ,aAAA;AAAA,QACR,KAAA,EAAO,YAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,eAAA;AAAA,QACP,IAAA,EAAM,cAAA;AAAA,QACN,MAAA,EAAQ,gBAAA;AAAA,QACR,OAAA,EAAS,iBAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,oCAAA;AAAA,QACN,KAAA,EAAO,qCAAA;AAAA,QACP,MAAA,EAAQ,sCAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACX;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,MAAA;AAAA,MACN,MAAA,EAAQ,QAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,KAAA,EAAO,MAAA;AAAA,MACP,OAAA,EAAS,QAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ;AAiBA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,GAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,iBAAA,CAAkB;AAAA,UAChB,IAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,YAAA,EAAY,QAAQ,EAAA,GAAK,MAAA;AAAA,MACzB,WAAA,EAAU,WAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-S4P7JIQ2.js","sourcesContent":["import type { ParagraphProps } from \"./Paragraph.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst paragraphVariants = cva(\n  \"font-[family-name:var(--paragraph-base-font-family)]\",\n  {\n    variants: {\n      size: {\n        xs: \"text-[length:var(--paragraph-size-xs-font-size)] leading-[var(--paragraph-size-xs-line-height)]\",\n        sm: \"text-[length:var(--paragraph-size-sm-font-size)] leading-[var(--paragraph-size-sm-line-height)]\",\n        base: \"text-[length:var(--paragraph-size-base-font-size)] leading-[var(--paragraph-size-base-line-height)]\",\n        lg: \"text-[length:var(--paragraph-size-lg-font-size)] leading-[var(--paragraph-size-lg-line-height)]\",\n        xl: \"text-[length:var(--paragraph-size-xl-font-size)] leading-[var(--paragraph-size-xl-line-height)]\",\n      },\n      weight: {\n        normal: \"font-[var(--paragraph-weight-normal)]\",\n        medium: \"font-[var(--paragraph-weight-medium)]\",\n        semibold: \"font-[var(--paragraph-weight-semibold)]\",\n        bold: \"font-[var(--paragraph-weight-bold)]\",\n      },\n      color: {\n        default: \"text-[color:var(--paragraph-color-default)]\",\n        muted: \"text-[color:var(--paragraph-color-muted)]\",\n        primary: \"text-[color:var(--paragraph-color-primary)]\",\n        destructive: \"text-[color:var(--paragraph-color-destructive)]\",\n        success: \"text-[color:var(--paragraph-color-success)]\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n        justify: \"text-justify\",\n      },\n      leading: {\n        tight: \"leading-tight\",\n        snug: \"leading-snug\",\n        normal: \"leading-normal\",\n        relaxed: \"leading-relaxed\",\n        loose: \"leading-loose\",\n      },\n      spacing: {\n        none: \"mb-[var(--paragraph-spacing-none)]\",\n        tight: \"mb-[var(--paragraph-spacing-tight)]\",\n        normal: \"mb-[var(--paragraph-spacing-normal)]\",\n        relaxed: \"mb-[var(--paragraph-spacing-relaxed)]\",\n      },\n      prose: {\n        true: \"max-w-prose\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n      weight: \"normal\",\n      color: \"default\",\n      align: \"left\",\n      spacing: \"normal\",\n      prose: false,\n    },\n  }\n)\n\n/**\n * Paragraph - Componente de paragrafo para blocos de texto.\n *\n * Suporta diferentes tamanhos, pesos, cores, alinhamentos e espacamentos.\n *\n * @example\n * // Paragrafo basico\n * <Paragraph>Texto do paragrafo</Paragraph>\n *\n * @example\n * // Paragrafo com estilo personalizado\n * <Paragraph size=\"lg\" weight=\"medium\" color=\"muted\">\n *   Texto destacado\n * </Paragraph>\n */\nfunction Paragraph({\n  className,\n  size,\n  weight,\n  color,\n  align,\n  leading,\n  spacing,\n  prose,\n  asChild = false,\n  ref,\n  ...props\n}: ParagraphProps) {\n  const Comp = asChild ? Slot : \"p\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        paragraphVariants({\n          size,\n          weight,\n          color,\n          align,\n          leading,\n          spacing,\n          prose,\n        }),\n        className\n      )}\n      data-prose={prose ? \"\" : undefined}\n      data-slot=\"paragraph\"\n      {...props}\n    />\n  )\n}\n\nexport { Paragraph, paragraphVariants }\n"]}