@geomak/ui 5.7.2 → 5.9.0

package/dist/index.js

@@ -607,7 +607,9 @@ function IconButton({
   disabled = false,
   size = "lg",
   loading = false,
-  loadingIcon
+  loadingIcon,
+  className = "",
+  style
 }) {
   const colorScheme = useMemo(() => {
     if (type === "primary") {
@@ -624,7 +626,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
     }
   );
@@ -675,7 +678,8 @@ function Button({
   disabled,
   style,
   icon,
-  onClick
+  onClick,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -690,8 +694,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__ */ jsx(
           "svg",
@@ -726,7 +731,8 @@ function Modal({
   cancelText = "Cancel",
   hasFooter = true,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = useReducedMotion();
   const maxWidth = width ?? size?.[0] ?? 600;
@@ -746,7 +752,7 @@ function Modal({
     /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       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%",
@@ -808,7 +814,8 @@ function Drawer({
   onOk,
   onCancel,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = useReducedMotion();
   const isRight = placement === "right";
@@ -829,7 +836,7 @@ function Drawer({
     /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       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 },
@@ -1496,9 +1503,11 @@ function List2({
   items,
   onItemClick,
   activeKey,
-  density = "comfortable"
+  density = "comfortable",
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsx("div", { role: "listbox", className: "flex flex-col", children: items.map((item) => {
+  return /* @__PURE__ */ 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__ */ jsxs(
@@ -1620,8 +1629,8 @@ function CollapseIcon() {
 function ExpandIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" }) });
 }
-function GridCard({ item, buttonText = "Open Application", onOpen }) {
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-lg font-bold text-center h-1/4", children: /* @__PURE__ */ jsx("h2", { children: item.title }) }),
     /* @__PURE__ */ jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
     /* @__PURE__ */ jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsx("p", { children: item.description }) }),
@@ -2240,8 +2249,8 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ 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__ */ 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.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText }, ref) {
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
+var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`,
@@ -2389,7 +2398,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -2437,7 +2447,7 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: className || void 0, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2570,15 +2580,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",
@@ -2853,7 +2855,9 @@ function Table({
   footer = null,
   header = null,
   loading = false,
-  loadingRowCount = 8
+  loadingRowCount = 8,
+  className = "",
+  style
 }) {
   const searchRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -2913,7 +2917,7 @@ function Table({
     }
     setActivePage(newPage);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-max rounded-lg", children: [
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       hasSearch && /* @__PURE__ */ jsx(
         SearchInput_default,
@@ -3090,7 +3094,8 @@ function Sidebar({
   onToggle,
   expandedWidth = 220,
   collapsedWidth = 52,
-  footer
+  footer,
+  className = ""
 }) {
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
     motion.aside,
@@ -3098,7 +3103,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__ */ jsxs("div", { className: [
           "flex h-14 flex-shrink-0 items-center border-b border-border",
@@ -3424,6 +3429,7 @@ function TextInput({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   prefix,
   suffix
@@ -3452,6 +3458,7 @@ function TextInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3486,6 +3493,7 @@ function NumberInput({
   size = "md",
   errorMessage,
   helperText,
+  className,
   required,
   inputStyle,
   labelStyle,
@@ -3530,6 +3538,7 @@ function NumberInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3621,6 +3630,7 @@ function Password({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   showIcon,
   hideIcon
@@ -3631,6 +3641,7 @@ function Password({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3693,7 +3704,8 @@ function Checkbox({
   disabled = false,
   required,
   layout = "horizontal",
-  labelPosition = "right"
+  labelPosition = "right",
+  className = ""
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3771,7 +3783,7 @@ function Checkbox({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1 ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
       content,
       helperText != null && /* @__PURE__ */ jsx(FieldHelpIcon, { text: helperText })
@@ -3802,6 +3814,7 @@ function RadioGroup({
   disabled,
   required,
   helperText,
+  className,
   errorMessage
 }) {
   const errorId = useId();
@@ -3811,6 +3824,7 @@ function RadioGroup({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -3896,6 +3910,7 @@ function Switch({
   label,
   layout = "horizontal",
   helperText,
+  className,
   offLabel,
   onLabel,
   name,
@@ -3921,6 +3936,7 @@ function Switch({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: id,
       errorId,
@@ -3975,6 +3991,7 @@ function AutoComplete({
   icon,
   errorMessage,
   helperText,
+  className,
   required,
   htmlFor
 }) {
@@ -4029,6 +4046,7 @@ function AutoComplete({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4134,6 +4152,7 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   helperText,
+  className,
   required,
   errorMessage,
   style,
@@ -4221,6 +4240,7 @@ function TreeSelect({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4387,6 +4407,7 @@ function FileInput({
   maxSize,
   errorMessage,
   helperText,
+  className,
   disabled,
   required,
   icon
@@ -4429,6 +4450,7 @@ function FileInput({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4892,6 +4914,7 @@ function TextArea({
   resize,
   errorMessage,
   helperText,
+  className,
   required,
   style,
   inputStyle
@@ -4913,6 +4936,7 @@ function TextArea({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4961,6 +4985,7 @@ function SegmentedControl({
   label,
   layout = "vertical",
   helperText,
+  className,
   name,
   required,
   errorMessage,
@@ -4981,6 +5006,7 @@ function SegmentedControl({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -5059,6 +5085,7 @@ function Slider({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   name,
   htmlFor
@@ -5077,7 +5104,7 @@ function Slider({
     onChange?.(next);
   };
   const valueText = current.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label: void 0, errorId, errorMessage, children: [
     (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       label && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
@@ -5158,6 +5185,7 @@ function TagsInput({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   maxTags,
   dedupe = true,
@@ -5221,6 +5249,7 @@ function TagsInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -5295,6 +5324,7 @@ function OtpInput({
   required,
   layout = "vertical",
   helperText,
+  className,
   groupAfter
 }) {
   const errorId = useId();
@@ -5348,7 +5378,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ 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__ */ jsxs(React8.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ 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__ */ jsxs(React8.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -5403,6 +5433,7 @@ function Rating({
   name,
   layout = "vertical",
   helperText,
+  className,
   required
 }) {
   const errorId = useId();
@@ -5433,7 +5464,7 @@ function Rating({
       commit(count);
     }
   };
-  return /* @__PURE__ */ jsx(Field, { label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Field, { className, label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: interactive ? "slider" : "img",
@@ -5526,6 +5557,7 @@ function TimePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5558,7 +5590,7 @@ function TimePicker({
     },
     n
   )) });
-  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
@@ -5651,6 +5683,7 @@ function DateRangePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5723,7 +5756,7 @@ function DateRangePicker({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
     if (!disabled) {
       setOpen(o);
       if (!o) {
@@ -5832,6 +5865,7 @@ function ColorPicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   placeholder = "Pick a colour\u2026"
 }) {
@@ -5849,7 +5883,7 @@ function ColorPicker({
     setDraft(hex);
     if (HEX_RE.test(hex)) onChange?.(hex);
   };
-  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
@@ -6246,7 +6280,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 +6390,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