@geomak/ui 5.7.2 → 5.8.0

package/dist/index.cjs

@@ -2605,15 +2605,7 @@ function Dropdown({
     hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
-var SHIMMER = [
-  "relative overflow-hidden rounded-sm bg-surface-raised",
-  'before:absolute before:inset-0 before:content-[""]',
-  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
-  "before:animate-[shimmer_1.6s_linear_infinite]",
-  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
-  // a perfectly legible placeholder for users who have animations off.
-  "motion-reduce:before:hidden"
-].join(" ");
+var SHIMMER = "oxy-skeleton rounded-sm bg-surface-raised";
 function SkeletonBox({ width, height = 16, radius, className = "", style }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -6281,7 +6273,7 @@ function useForm(options = {}) {
     isValid: store.isValid,
     getValue: store.getValue,
     getValues: store.getValues,
-    setValue: (name, value) => store.setValue(name, value),
+    setValue: (name, value, opts) => store.setValue(name, value, opts),
     setValues: (patch) => store.setValues(patch),
     setError: store.setError,
     validateField: (name) => store.validateField(name),
@@ -6391,6 +6383,208 @@ function useFieldArray(name) {
   };
 }
 
+// src/components/forms/creditCard.ts
+var CARD_BRANDS = [
+  { id: "amex", label: "American Express", short: "AMEX", color: "#1F72CD", pattern: /^3[47]/, lengths: [15], cvv: 4, gaps: [4, 10] },
+  { id: "visa", label: "Visa", short: "VISA", color: "#1A1F71", pattern: /^4/, lengths: [16, 18, 19], cvv: 3, gaps: [4, 8, 12, 16] },
+  { id: "mastercard", label: "Mastercard", short: "MC", color: "#EB001B", pattern: /^(5[1-5]|2[2-7])/, lengths: [16], cvv: 3, gaps: [4, 8, 12] },
+  { id: "discover", label: "Discover", short: "DISC", color: "#FF6000", pattern: /^(6011|64[4-9]|65)/, lengths: [16, 19], cvv: 3, gaps: [4, 8, 12] },
+  { id: "diners", label: "Diners Club", short: "DINERS", color: "#0079BE", pattern: /^(36|38|30[0-5])/, lengths: [14, 16, 19], cvv: 3, gaps: [4, 10] },
+  { id: "jcb", label: "JCB", short: "JCB", color: "#0B4EA2", pattern: /^35/, lengths: [16, 17, 18, 19], cvv: 3, gaps: [4, 8, 12] }
+];
+var onlyDigits = (s) => (s || "").replace(/\D/g, "");
+function detectBrand(value) {
+  const d = onlyDigits(value);
+  if (!d) return null;
+  return CARD_BRANDS.find((b) => b.pattern.test(d)) ?? null;
+}
+function maxCardLength(value) {
+  const b = detectBrand(value);
+  return b ? Math.max(...b.lengths) : 19;
+}
+function luhnValid(value) {
+  const s = onlyDigits(value);
+  if (s.length < 12) return false;
+  let sum = 0;
+  let double = false;
+  for (let i = s.length - 1; i >= 0; i--) {
+    let n = s.charCodeAt(i) - 48;
+    if (double) {
+      n *= 2;
+      if (n > 9) n -= 9;
+    }
+    sum += n;
+    double = !double;
+  }
+  return sum % 10 === 0;
+}
+function formatCardNumber(value) {
+  const brand = detectBrand(value);
+  const digits = onlyDigits(value).slice(0, maxCardLength(value));
+  const gaps = brand?.gaps ?? [4, 8, 12, 16];
+  let out = "";
+  for (let i = 0; i < digits.length; i++) {
+    if (gaps.includes(i)) out += " ";
+    out += digits[i];
+  }
+  return out;
+}
+function cardNumberError(value) {
+  const d = onlyDigits(value);
+  if (!d) return "Card number is required";
+  const brand = detectBrand(d);
+  if (!brand) return "Unsupported card type";
+  if (!brand.lengths.includes(d.length)) return "Card number is incomplete";
+  if (!luhnValid(d)) return "Card number looks invalid";
+  return void 0;
+}
+function formatExpiry(value) {
+  let d = onlyDigits(value).slice(0, 4);
+  if (d.length === 1 && d > "1") d = "0" + d;
+  if (d.length <= 2) return d;
+  return `${d.slice(0, 2)}/${d.slice(2)}`;
+}
+function expiryError(value, now = /* @__PURE__ */ new Date()) {
+  if (!value) return "Expiry is required";
+  const m = value.match(/^(\d{2})\/(\d{2})$/);
+  if (!m) return "Use MM/YY";
+  const mm = Number(m[1]);
+  const yy = Number(m[2]);
+  if (mm < 1 || mm > 12) return "Invalid month";
+  const endOfMonth = new Date(2e3 + yy, mm, 0, 23, 59, 59, 999);
+  if (endOfMonth < now) return "Card has expired";
+  return void 0;
+}
+function cvvError(value, cardNumber) {
+  const need = detectBrand(cardNumber)?.cvv ?? 3;
+  const d = onlyDigits(value);
+  if (!d) return "CVV is required";
+  if (d.length !== need) return `CVV must be ${need} digits`;
+  return void 0;
+}
+var toCard = (vals) => {
+  const number = String(vals.number ?? "");
+  return {
+    number: onlyDigits(number),
+    name: String(vals.name ?? ""),
+    expiry: String(vals.expiry ?? ""),
+    cvv: onlyDigits(String(vals.cvv ?? "")),
+    brand: detectBrand(number)?.id ?? null
+  };
+};
+function BrandMark({ brand }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "28", height: "18", viewBox: "0 0 28 18", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "27", height: "17", rx: "3", fill: "var(--color-surface-raised)", stroke: "var(--color-border)" }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "3.75", width: "27", height: "3.5", fill: brand ? brand.color : "var(--color-border-strong)" })
+    ] }),
+    brand && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: brand.color }, children: brand.short }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: brand ? brand.label : "Unknown card type" })
+  ] });
+}
+function CreditCardForm({
+  onSubmit,
+  onChange,
+  defaultValue,
+  size = "md",
+  disabled,
+  requireName = true,
+  hideSubmit = false,
+  submitLabel = "Pay",
+  className = "",
+  style
+}) {
+  const initial = React8.useRef({
+    number: formatCardNumber(defaultValue?.number ?? ""),
+    name: defaultValue?.name ?? "",
+    expiry: formatExpiry(defaultValue?.expiry ?? ""),
+    cvv: onlyDigits(defaultValue?.cvv ?? "")
+  }).current;
+  const form = useForm({ initialValues: initial });
+  const numberStr = String(form.values.number ?? "");
+  const brand = detectBrand(numberStr);
+  React8.useEffect(() => {
+    onChange?.(toCard(form.values));
+  }, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
+  const numberBind = form.fieldNative("number", {
+    required: "Card number is required",
+    validate: (v) => cardNumberError(String(v))
+  });
+  const nameBind = form.fieldNative("name", requireName ? { required: "Cardholder name is required" } : void 0);
+  const expiryBind = form.fieldNative("expiry", {
+    required: "Expiry is required",
+    validate: (v) => expiryError(String(v))
+  });
+  const cvvBind = form.fieldNative("cvv", {
+    required: "CVV is required",
+    validate: (v) => cvvError(String(v), numberStr)
+  });
+  const cvvLen = brand?.cvv ?? 3;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Form,
+    {
+      form,
+      onFinish: (vals) => onSubmit?.(toCard(vals)),
+      className: `flex flex-col gap-4 ${className}`.trim(),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextInput,
+          {
+            ...numberBind,
+            label: "Card number",
+            placeholder: "1234 5678 9012 3456",
+            size,
+            disabled,
+            value: numberStr,
+            onChange: (e) => form.setValue("number", formatCardNumber(e.target.value), { touch: true }),
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextInput,
+          {
+            ...nameBind,
+            label: "Cardholder name",
+            placeholder: "Jane Appleseed",
+            size,
+            disabled,
+            value: String(form.values.name ?? ""),
+            onChange: (e) => form.setValue("name", e.target.value, { touch: true })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextInput,
+            {
+              ...expiryBind,
+              label: "Expiry",
+              placeholder: "MM/YY",
+              size,
+              disabled,
+              value: String(form.values.expiry ?? ""),
+              onChange: (e) => form.setValue("expiry", formatExpiry(e.target.value), { touch: true })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextInput,
+            {
+              ...cvvBind,
+              label: "CVV",
+              placeholder: cvvLen === 4 ? "1234" : "123",
+              size,
+              disabled,
+              value: String(form.values.cvv ?? ""),
+              onChange: (e) => form.setValue("cvv", onlyDigits(e.target.value).slice(0, cvvLen), { touch: true })
+            }
+          ) })
+        ] }),
+        !hideSubmit && /* @__PURE__ */ jsxRuntime.jsx(Button, { content: submitLabel, buttonType: "submit", variant: "primary", disabled })
+      ]
+    }
+  );
+}
+
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
   get: function () { return chunk255PCZIW_cjs.colors_default; }
@@ -6412,12 +6606,14 @@ exports.AutoComplete = AutoComplete;
 exports.Avatar = Avatar;
 exports.Box = Box;
 exports.Button = Button;
+exports.CARD_BRANDS = CARD_BRANDS;
 exports.Catalog = Catalog;
 exports.CatalogCarousel = CatalogCarousel;
 exports.CatalogGrid = CatalogGrid;
 exports.Checkbox = Checkbox;
 exports.ColorPicker = ColorPicker;
 exports.ContextMenu = ContextMenu;
+exports.CreditCardForm = CreditCardForm;
 exports.DateRangePicker = DateRangePicker;
 exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
@@ -6472,8 +6668,16 @@ exports.Tree = Tree;
 exports.TreeSelect = TreeSelect;
 exports.Typography = Typography;
 exports.Wizard = Wizard;
+exports.cardNumberError = cardNumberError;
+exports.cvvError = cvvError;
+exports.detectBrand = detectBrand;
+exports.expiryError = expiryError;
 exports.fieldShell = fieldShell;
+exports.formatCardNumber = formatCardNumber;
+exports.formatExpiry = formatExpiry;
 exports.isRequired = isRequired;
+exports.luhnValid = luhnValid;
+exports.onlyDigits = onlyDigits;
 exports.patterns = patterns;
 exports.runFieldRules = runFieldRules;
 exports.useFieldArray = useFieldArray;