@geomak/ui 5.7.2 → 5.9.0

package/dist/index.cjs

@@ -642,7 +642,9 @@ function IconButton({
   disabled = false,
   size = "lg",
   loading = false,
-  loadingIcon
+  loadingIcon,
+  className = "",
+  style
 }) {
   const colorScheme = React8.useMemo(() => {
     if (type === "primary") {
@@ -659,7 +661,8 @@ function IconButton({
       type: buttonType,
       disabled: disabled || loading,
       onClick,
-      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      style,
+      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
       children: loading ? loadingIcon : icon
     }
   );
@@ -710,7 +713,8 @@ function Button({
   disabled,
   style,
   icon,
-  onClick
+  onClick,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -725,8 +729,9 @@ function Button({
         "outline-none transition-colors duration-150 select-none",
         "whitespace-nowrap",
         SIZE_CLASSES[size],
-        VARIANT_CLASSES[variant]
-      ].join(" "),
+        VARIANT_CLASSES[variant],
+        className
+      ].filter(Boolean).join(" "),
       children: [
         loading ? /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
@@ -761,7 +766,8 @@ function Modal({
   cancelText = "Cancel",
   hasFooter = true,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
   const maxWidth = width ?? size?.[0] ?? 600;
@@ -781,7 +787,7 @@ function Modal({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
-        className: "fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none",
+        className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
         style: {
           maxWidth,
           x: "-50%",
@@ -843,7 +849,8 @@ function Drawer({
   onOk,
   onCancel,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
   const isRight = placement === "right";
@@ -864,7 +871,7 @@ function Drawer({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
-        className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none`,
+        className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
         style: { width: `min(calc(100vw - 1rem), ${width}px)` },
         initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
         animate: { x: 0, opacity: 1 },
@@ -1531,9 +1538,11 @@ function List2({
   items,
   onItemClick,
   activeKey,
-  density = "comfortable"
+  density = "comfortable",
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", className: "flex flex-col", children: items.map((item) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", className: `flex flex-col ${className}`.trim(), style, children: items.map((item) => {
     const isActive = activeKey === item.key;
     const isDisabled = !!item.disabled;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1655,8 +1664,8 @@ function CollapseIcon() {
 function ExpandIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" }) });
 }
-function GridCard({ item, buttonText = "Open Application", onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-[200px] h-[250px] rounded-lg bg-ice dark:bg-independence items-center justify-between p-2 shadow-2xl", children: [
+function GridCard({ item, buttonText = "Open Application", onOpen, className = "", style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col w-[200px] h-[250px] rounded-lg bg-ice dark:bg-independence items-center justify-between p-2 shadow-2xl ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue dark:text-white text-lg font-bold text-center h-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: item.title }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.description }) }),
@@ -2275,8 +2284,8 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React8__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SearchInput = React8__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`,
@@ -2424,7 +2433,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const [open, setOpen] = React8.useState(false);
   const [selectedItems, setSelectedItems] = React8.useState([]);
@@ -2472,7 +2482,7 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2605,15 +2615,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",
@@ -2888,7 +2890,9 @@ function Table({
   footer = null,
   header = null,
   loading = false,
-  loadingRowCount = 8
+  loadingRowCount = 8,
+  className = "",
+  style
 }) {
   const searchRef = React8.useRef(null);
   const [searchTerm, setSearchTerm] = React8.useState("");
@@ -2948,7 +2952,7 @@ function Table({
     }
     setActivePage(newPage);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-max rounded-lg", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       hasSearch && /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput_default,
@@ -3125,7 +3129,8 @@ function Sidebar({
   onToggle,
   expandedWidth = 220,
   collapsedWidth = 52,
-  footer
+  footer,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.aside,
@@ -3133,7 +3138,7 @@ function Sidebar({
       initial: false,
       animate: { width: isExpanded ? expandedWidth : collapsedWidth },
       transition: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-      className: "relative flex h-full flex-col border-r border-border bg-surface overflow-hidden flex-shrink-0",
+      className: `relative flex h-full flex-col border-r border-border bg-surface overflow-hidden flex-shrink-0 ${className}`.trim(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [
           "flex h-14 flex-shrink-0 items-center border-b border-border",
@@ -3459,6 +3464,7 @@ function TextInput({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   prefix,
   suffix
@@ -3487,6 +3493,7 @@ function TextInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3521,6 +3528,7 @@ function NumberInput({
   size = "md",
   errorMessage,
   helperText,
+  className,
   required,
   inputStyle,
   labelStyle,
@@ -3565,6 +3573,7 @@ function NumberInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3656,6 +3665,7 @@ function Password({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   showIcon,
   hideIcon
@@ -3666,6 +3676,7 @@ function Password({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3728,7 +3739,8 @@ function Checkbox({
   disabled = false,
   required,
   layout = "horizontal",
-  labelPosition = "right"
+  labelPosition = "right",
+  className = ""
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3806,7 +3818,7 @@ function Checkbox({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`.trim(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [
       content,
       helperText != null && /* @__PURE__ */ jsxRuntime.jsx(FieldHelpIcon, { text: helperText })
@@ -3837,6 +3849,7 @@ function RadioGroup({
   disabled,
   required,
   helperText,
+  className,
   errorMessage
 }) {
   const errorId = React8.useId();
@@ -3846,6 +3859,7 @@ function RadioGroup({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -3931,6 +3945,7 @@ function Switch({
   label,
   layout = "horizontal",
   helperText,
+  className,
   offLabel,
   onLabel,
   name,
@@ -3956,6 +3971,7 @@ function Switch({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor: id,
       errorId,
@@ -4010,6 +4026,7 @@ function AutoComplete({
   icon,
   errorMessage,
   helperText,
+  className,
   required,
   htmlFor
 }) {
@@ -4064,6 +4081,7 @@ function AutoComplete({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4169,6 +4187,7 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   helperText,
+  className,
   required,
   errorMessage,
   style,
@@ -4256,6 +4275,7 @@ function TreeSelect({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4422,6 +4442,7 @@ function FileInput({
   maxSize,
   errorMessage,
   helperText,
+  className,
   disabled,
   required,
   icon
@@ -4464,6 +4485,7 @@ function FileInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4927,6 +4949,7 @@ function TextArea({
   resize,
   errorMessage,
   helperText,
+  className,
   required,
   style,
   inputStyle
@@ -4948,6 +4971,7 @@ function TextArea({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4996,6 +5020,7 @@ function SegmentedControl({
   label,
   layout = "vertical",
   helperText,
+  className,
   name,
   required,
   errorMessage,
@@ -5016,6 +5041,7 @@ function SegmentedControl({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -5094,6 +5120,7 @@ function Slider({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   name,
   htmlFor
@@ -5112,7 +5139,7 @@ function Slider({
     onChange?.(next);
   };
   const valueText = current.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label: void 0, errorId, errorMessage, children: [
     (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       label && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
@@ -5193,6 +5220,7 @@ function TagsInput({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   maxTags,
   dedupe = true,
@@ -5256,6 +5284,7 @@ function TagsInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -5330,6 +5359,7 @@ function OtpInput({
   required,
   layout = "vertical",
   helperText,
+  className,
   groupAfter
 }) {
   const errorId = React8.useId();
@@ -5383,7 +5413,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -5438,6 +5468,7 @@ function Rating({
   name,
   layout = "vertical",
   helperText,
+  className,
   required
 }) {
   const errorId = React8.useId();
@@ -5468,7 +5499,7 @@ function Rating({
       commit(count);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: interactive ? "slider" : "img",
@@ -5561,6 +5592,7 @@ function TimePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5593,7 +5625,7 @@ function TimePicker({
     },
     n
   )) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -5686,6 +5718,7 @@ function DateRangePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5758,7 +5791,7 @@ function DateRangePicker({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
     if (!disabled) {
       setOpen(o);
       if (!o) {
@@ -5867,6 +5900,7 @@ function ColorPicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   placeholder = "Pick a colour\u2026"
 }) {
@@ -5884,7 +5918,7 @@ function ColorPicker({
     setDraft(hex);
     if (HEX_RE.test(hex)) onChange?.(hex);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -6281,7 +6315,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 +6425,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 +6648,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 +6710,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;