@geomak/ui 5.7.2 → 5.8.0

package/dist/index.js

@@ -2570,15 +2570,7 @@ function Dropdown({
     hasError && /* @__PURE__ */ 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__ */ jsx(
     "span",
@@ -6246,7 +6238,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),
@@ -6356,6 +6348,208 @@ function useFieldArray(name) {
   };
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, isRequired, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+// 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__ */ jsxs("span", { className: "flex items-center gap-1.5", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("svg", { width: "28", height: "18", viewBox: "0 0 28 18", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "27", height: "17", rx: "3", fill: "var(--color-surface-raised)", stroke: "var(--color-border)" }),
+      /* @__PURE__ */ jsx("rect", { x: "0.5", y: "3.75", width: "27", height: "3.5", fill: brand ? brand.color : "var(--color-border-strong)" })
+    ] }),
+    brand && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: brand.color }, children: brand.short }),
+    /* @__PURE__ */ 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 = 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);
+  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__ */ jsxs(
+    Form,
+    {
+      form,
+      onFinish: (vals) => onSubmit?.(toCard(vals)),
+      className: `flex flex-col gap-4 ${className}`.trim(),
+      style,
+      children: [
+        /* @__PURE__ */ 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__ */ jsx(BrandMark, { brand })
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ 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__ */ jsx(Button, { content: submitLabel, buttonType: "submit", variant: "primary", disabled })
+      ]
+    }
+  );
+}
+
+export { AppShell, AutoComplete, Avatar, Box, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map