@geomak/ui 5.7.1 → 5.8.0

package/dist/index.js

@@ -2165,6 +2165,7 @@ function FieldLabel({
   required,
   helperText,
   horizontal = false,
+  align = "start",
   style,
   width,
   className = ""
@@ -2176,7 +2177,10 @@ function FieldLabel({
       style: { width: horizontal ? width : void 0, ...style },
       className: [
         "flex items-center gap-1",
-        horizontal ? "mt-2 flex-shrink-0 whitespace-nowrap" : "",
+        horizontal ? "flex-shrink-0 whitespace-nowrap" : "",
+        // Only the 'start' alignment needs the top nudge; 'center' relies
+        // on the row's items-center to line up with a short control.
+        horizontal && align === "start" ? "mt-2" : "",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -2197,6 +2201,7 @@ function Field({
   layout = "vertical",
   required,
   helperText,
+  labelAlign = "start",
   labelStyle,
   labelWidth,
   className = "",
@@ -2209,7 +2214,7 @@ function Field({
     {
       className: [
         "flex",
-        horizontal ? "flex-row items-start gap-3" : "flex-col gap-1.5",
+        horizontal ? `flex-row gap-3 ${labelAlign === "center" ? "items-center" : "items-start"}` : "flex-col gap-1.5",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -2221,6 +2226,7 @@ function Field({
             required,
             helperText,
             horizontal,
+            align: labelAlign,
             style: labelStyle,
             width: labelWidth
           }
@@ -2564,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",
@@ -3679,14 +3677,15 @@ function Checkbox({
   // legacy alias
   onChange,
   label,
+  description,
   name,
   htmlFor,
   errorMessage,
+  helperText,
   disabled = false,
+  required,
   layout = "horizontal",
-  labelPosition = "right",
-  helperText,
-  required
+  labelPosition = "right"
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3699,11 +3698,12 @@ function Checkbox({
       name,
       checked: isChecked,
       disabled,
+      required,
       onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
       className: [
-        "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+        "relative mt-0.5 flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
         "rounded-sm border transition-colors duration-150",
-        "border-border-strong bg-surface",
+        hasError ? "border-status-error" : "border-border-strong",
         "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
         // Focus halo matches the field tokens for a consistent look.
         "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
@@ -3715,33 +3715,60 @@ function Checkbox({
       children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
     }
   );
-  const labelEl = label && /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: [
-    label,
-    required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
-  ] });
+  const labelText = label != null && /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor,
+      className: ["block select-none text-sm text-foreground leading-snug", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"].join(" "),
+      children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
+      ]
+    }
+  );
+  const descriptionEl = description != null && /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor,
+      className: `block text-xs text-foreground-secondary mt-0.5 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+      children: description
+    }
+  );
+  let content;
+  if (layout === "vertical") {
+    content = /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1.5", children: [
+      labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        labelText,
+        box
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        box,
+        labelText
+      ] }),
+      descriptionEl
+    ] });
+  } else if (labelFirst) {
+    content = /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5", children: [
+        labelText,
+        box
+      ] }),
+      descriptionEl
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5", children: [
+      box,
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+        labelText,
+        descriptionEl
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        "label",
-        {
-          htmlFor,
-          className: [
-            "inline-flex",
-            layout === "vertical" ? "flex-col items-start gap-1.5" : "flex-row items-center gap-2.5",
-            disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-          ].join(" "),
-          children: labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            labelEl,
-            box
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            box,
-            labelEl
-          ] })
-        }
-      ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+      content,
       helperText != null && /* @__PURE__ */ jsx(FieldHelpIcon, { text: helperText })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx("span", { id: errorId, className: "text-xs text-status-error mt-0.5", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("span", { id: errorId, className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3893,6 +3920,7 @@ function Switch({
       layout,
       required,
       helperText,
+      labelAlign: "center",
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
         offLabel != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: stateLabel(!isOn), children: offLabel }),
         /* @__PURE__ */ jsx(
@@ -4182,19 +4210,17 @@ function TreeSelect({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
-      /* @__PURE__ */ jsx(
-        FieldLabel,
-        {
-          label,
-          htmlFor,
-          required,
-          helperText,
-          horizontal: layout === "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      helperText,
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
         /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
@@ -4258,10 +4284,9 @@ function TreeSelect({
             )
           }
         ) })
-      ] })
-    ] }),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
-  ] });
+      ] }) })
+    }
+  );
 }
 function TreeNodeRow({
   node,
@@ -6213,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),
@@ -6323,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