@dmsi/wedgekit-react 0.0.536 → 0.0.538

package/dist/components/Password.cjs

@@ -611,7 +611,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -696,6 +696,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -714,9 +715,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -725,6 +742,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/Password.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-MDB26F6T.js";
 import {
   InputBase
-} from "../chunk-PMNNRB6S.js";
+} from "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Search.cjs

@@ -611,7 +611,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -696,6 +696,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -714,9 +715,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -725,6 +742,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/Search.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Search
-} from "../chunk-UV53RKAQ.js";
-import "../chunk-PMNNRB6S.js";
+} from "../chunk-BKBJOF4J.js";
+import "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Select.cjs

@@ -611,7 +611,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -696,6 +696,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -714,9 +715,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -725,6 +742,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/Select.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Select
-} from "../chunk-U6W5E3XW.js";
-import "../chunk-PMNNRB6S.js";
+} from "../chunk-I5BV7UPG.js";
+import "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Stepper.cjs

@@ -751,7 +751,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -836,6 +836,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -854,9 +855,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -865,6 +882,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/Stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-PMNNRB6S.js";
+} from "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Time.cjs

@@ -610,7 +610,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -695,6 +695,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -713,9 +714,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -724,6 +741,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/Time.js

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "../chunk-PMNNRB6S.js";
+} from "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import {
   findDocumentRoot

package/dist/components/index.cjs

@@ -1895,7 +1895,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -1980,6 +1980,7 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
+    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -1998,9 +1999,25 @@ var Input = (_a) => {
       const parts = raw.split(".");
       const currentDecimals = decimals != null ? decimals : 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = __spreadProps(__spreadValues({}, e), {
           target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
@@ -2009,6 +2026,31 @@ var Input = (_a) => {
       }
       return;
     }
+    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals != null ? decimals : 0
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+        if (typeof onChange === "function") {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
     setInternalValue(rawValue);
     setDisplayValue(rawValue);
     if (typeof onChange === "function") {

package/dist/components/index.js

@@ -2,7 +2,7 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-UFGH5V7K.js";
+} from "../chunk-RB7F6QWD.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-ZIPJMN2E.js";
 import "../chunk-FJFZBIRG.js";
@@ -41,7 +41,7 @@ import {
 } from "../chunk-MDB26F6T.js";
 import {
   Select
-} from "../chunk-U6W5E3XW.js";
+} from "../chunk-I5BV7UPG.js";
 import "../chunk-JADOJNBI.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-WVVEOCEH.js";
@@ -58,7 +58,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-YHFOOBE2.js";
+} from "../chunk-Y3EFHKAG.js";
 import {
   Menu
 } from "../chunk-HGLOO52X.js";
@@ -68,10 +68,10 @@ import {
 } from "../chunk-EZ4KZYKG.js";
 import {
   Search
-} from "../chunk-UV53RKAQ.js";
+} from "../chunk-BKBJOF4J.js";
 import {
   Input
-} from "../chunk-PMNNRB6S.js";
+} from "../chunk-NWTVBVBC.js";
 import {
   Label
 } from "../chunk-HXGJVYGQ.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.536",
+  "version": "0.0.538",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Input.tsx

@@ -285,7 +285,9 @@ export const Input = ({
 
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [variant, propValue, decimals]);
+    // Intentionally not adding dependencies to avoid formatting on every change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const getInputProps = () => {
     const baseProps = {
@@ -409,6 +411,10 @@ export const Input = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const rawValue = e.target.value;
+    const maxNumber =
+      props.max != null
+        ? Number(String(props.max).replace(/,/g, ""))
+        : undefined;
 
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, ""); // Remove commas for processing
@@ -420,7 +426,7 @@ export const Input = ({
           const syntheticEvent = {
             ...e,
             target: { ...e.target, value: "" },
-          };
+          } as React.ChangeEvent<HTMLInputElement>;
           onChange(syntheticEvent);
         }
         return;
@@ -433,20 +439,72 @@ export const Input = ({
       const currentDecimals = decimals ?? 2;
       if (parts.length === 2 && parts[1].length > currentDecimals) return;
 
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
+        // Clamp to max
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          currentDecimals,
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formatCurrencyDisplay(formattedClamped));
+        if (onChange) {
+          const syntheticEvent = {
+            ...e,
+            target: { ...e.target, value: clamped.toString() },
+          } as React.ChangeEvent<HTMLInputElement>;
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+
       setInternalValue(raw);
       setDisplayValue(formatCurrencyDisplay(raw));
 
-      const asNumber = Number(raw);
       if (!isNaN(asNumber) && onChange) {
         const syntheticEvent = {
           ...e,
           target: { ...e.target, value: asNumber.toString() },
-        };
+        } as React.ChangeEvent<HTMLInputElement>;
         onChange(syntheticEvent);
       }
       return;
     }
 
+    // Handle numeric variants (percentage / uom) wrt max prop
+    if (
+      (variant === "percentage" || variant === "uom") &&
+      e.target.type === "number"
+    ) {
+      const numeric = Number(rawValue);
+      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
+        const clamped = maxNumber;
+        const formattedClamped = formatDecimalValue(
+          clamped.toString(),
+          decimals ?? 0,
+        );
+        setInternalValue(formattedClamped);
+        setDisplayValue(formattedClamped);
+
+        if (typeof onChange === "function") {
+          const syntheticEvent = {
+            ...e,
+            target: { ...e.target, value: clamped.toString() },
+          } as React.ChangeEvent<HTMLInputElement>;
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+
     // Default behavior for other variants
     setInternalValue(rawValue);
     setDisplayValue(rawValue);