@sustaina/shared-ui 1.54.1 → 1.54.2

package/dist/index.d.mts

@@ -1721,6 +1721,14 @@ type InputProps = Omit<InputPrimitiveProps, "size" | "prefix"> & VariantProps<ty
     validationIcon?: React$1.ReactNode;
     validationMessageProps?: React$1.HTMLAttributes<HTMLParagraphElement>;
     onValueChange?: (value: string) => void;
+    showPrefixDivider?: boolean;
+    showSuffixDivider?: boolean;
+    prefixWidth?: number | string;
+    suffixWidth?: number | string;
+    prefixMinWidth?: number | string;
+    suffixMinWidth?: number | string;
+    prefixMaxWidth?: number | string;
+    suffixMaxWidth?: number | string;
 };
 
 type InputCustomInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "onValueChange" | "prefix" | "suffix"> & {
@@ -1735,9 +1743,12 @@ type InputNumberProps = NumericFormatProps<InputProps> & {
     min?: number;
     max?: number;
     onStepChange?: (value: number) => void;
-    autoFormatDecimal?: boolean;
+    fillDecimalOnBlur?: boolean;
+    truncateDecimalOnBlur?: boolean;
+    maxIntegerDigits?: number;
+    invalid?: boolean;
 };
-declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, autoFormatDecimal, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
+declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, fillDecimalOnBlur, truncateDecimalOnBlur, maxIntegerDigits, invalid, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
 
 type PermissionAction = "CREATE" | "READ" | "EDIT" | "DELETE" | "NOTIFY" | "CREATE_DRAFT" | "REQUIRE_SITE";
 type PermissionString = `${string}.${PermissionAction}`;

package/dist/index.d.ts

@@ -1721,6 +1721,14 @@ type InputProps = Omit<InputPrimitiveProps, "size" | "prefix"> & VariantProps<ty
     validationIcon?: React$1.ReactNode;
     validationMessageProps?: React$1.HTMLAttributes<HTMLParagraphElement>;
     onValueChange?: (value: string) => void;
+    showPrefixDivider?: boolean;
+    showSuffixDivider?: boolean;
+    prefixWidth?: number | string;
+    suffixWidth?: number | string;
+    prefixMinWidth?: number | string;
+    suffixMinWidth?: number | string;
+    prefixMaxWidth?: number | string;
+    suffixMaxWidth?: number | string;
 };
 
 type InputCustomInputProps = Omit<InputProps, "type" | "value" | "defaultValue" | "onValueChange" | "prefix" | "suffix"> & {
@@ -1735,9 +1743,12 @@ type InputNumberProps = NumericFormatProps<InputProps> & {
     min?: number;
     max?: number;
     onStepChange?: (value: number) => void;
-    autoFormatDecimal?: boolean;
+    fillDecimalOnBlur?: boolean;
+    truncateDecimalOnBlur?: boolean;
+    maxIntegerDigits?: number;
+    invalid?: boolean;
 };
-declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, autoFormatDecimal, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
+declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, fillDecimalOnBlur, truncateDecimalOnBlur, maxIntegerDigits, invalid, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
 
 type PermissionAction = "CREATE" | "READ" | "EDIT" | "DELETE" | "NOTIFY" | "CREATE_DRAFT" | "REQUIRE_SITE";
 type PermissionString = `${string}.${PermissionAction}`;

package/dist/index.js

@@ -15695,6 +15695,63 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
+
+// src/components/inputNumber/helper.ts
+var createSourceInfo = (event) => ({
+  event,
+  source: event ? "event" : "prop"
+});
+var parseToNumber = (val) => {
+  if (typeof val === "number") return val;
+  if (typeof val === "string" && val !== "") {
+    const parsed = parseFloat(val);
+    if (!isNaN(parsed)) return parsed;
+  }
+  return void 0;
+};
+var truncateToFixed = (num, scale) => {
+  if (scale === 0) return Math.trunc(num).toString();
+  const sign = num < 0 ? "-" : "";
+  const abs = Math.abs(num);
+  const str = abs.toString();
+  const dotIndex = str.indexOf(".");
+  let intPart;
+  let fracPart;
+  if (dotIndex === -1) {
+    intPart = str;
+    fracPart = "";
+  } else {
+    intPart = str.slice(0, dotIndex);
+    fracPart = str.slice(dotIndex + 1, dotIndex + 1 + scale);
+  }
+  fracPart = fracPart.padEnd(scale, "0");
+  return `${sign}${intPart}.${fracPart}`;
+};
+var truncateStringToFixed = (str, scale) => {
+  const trimmed = str.trim();
+  if (trimmed === "" || trimmed === "-") return "0" + (scale > 0 ? "." + "0".repeat(scale) : "");
+  const negative = trimmed.startsWith("-");
+  const unsigned = negative ? trimmed.slice(1) : trimmed;
+  const dotIndex = unsigned.indexOf(".");
+  let intPart;
+  let fracPart;
+  if (dotIndex === -1) {
+    intPart = unsigned || "0";
+    fracPart = "";
+  } else {
+    intPart = unsigned.slice(0, dotIndex) || "0";
+    fracPart = unsigned.slice(dotIndex + 1, dotIndex + 1 + scale);
+  }
+  if (scale === 0) return (negative ? "-" : "") + intPart;
+  fracPart = fracPart.padEnd(scale, "0");
+  return (negative ? "-" : "") + intPart + "." + fracPart;
+};
+var clamp = (value, min, max) => {
+  if (max !== void 0 && value > max) return max;
+  if (min !== void 0 && value < min) return min;
+  return value;
+};
+var resolveCssSize = (value) => value !== void 0 ? typeof value === "number" ? `${value}px` : value : void 0;
 var InputPrimitive2 = React__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15703,7 +15760,7 @@ var InputPrimitive2 = React__namespace.forwardRef(
         ref,
         type,
         className: cn(
-          "placeholder:text-neutral-400 text-neutral-900 flex h-10 w-full min-w-0 items-center rounded-lg border bg-white px-4 text-sm transition-colors outline-none file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:px-2 file:text-sm file:font-medium hover:border-neutral-500 focus-visible:border-neutral-900 focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 aria-invalid:border-destructive",
+          "placeholder:text-neutral-400 text-neutral-900 flex h-10 w-full min-w-0 items-center rounded-lg border bg-white px-4 text-sm transition-colors outline-none file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:px-2 file:text-sm file:font-medium hover:border-neutral-500 focus-visible:border-neutral-900 focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:border-destructive",
           className
         ),
         ...props
@@ -15734,6 +15791,26 @@ var inputVariants2 = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
+var wrapperBorderVariants = classVarianceAuthority.cva(
+  "flex items-center overflow-hidden border bg-white transition-colors",
+  {
+    variants: {
+      controlSize: {
+        sm: "h-9 rounded-md text-sm",
+        md: "h-10 rounded-lg text-sm",
+        lg: "h-12 rounded-xl text-base"
+      },
+      appearance: {
+        filled: "border-neutral-200 hover:border-neutral-500 focus-within:border-neutral-900",
+        unfilled: "border-neutral-300 hover:border-neutral-500 focus-within:border-neutral-900"
+      }
+    },
+    defaultVariants: {
+      controlSize: "sm",
+      appearance: "filled"
+    }
+  }
+);
 var Input2 = React__namespace.forwardRef(
   ({
     className,
@@ -15754,6 +15831,14 @@ var Input2 = React__namespace.forwardRef(
     validationIcon,
     validationMessageProps,
     onValueChange,
+    showPrefixDivider,
+    showSuffixDivider,
+    prefixWidth,
+    suffixWidth,
+    prefixMinWidth,
+    suffixMinWidth,
+    prefixMaxWidth,
+    suffixMaxWidth,
     type = "text",
     ...rest
   }, ref) => {
@@ -15777,11 +15862,14 @@ var Input2 = React__namespace.forwardRef(
     );
     const resolvedAriaInvalid = typeof ariaInvalid === "string" ? ariaInvalid : ariaInvalid ? true : void 0;
     const describedBy = validationMessage ? [ariaDescribedByProp, messageId].filter(Boolean).join(" ") : ariaDescribedByProp;
-    const controlWrapperClassName = cn(
-      "relative inline-flex items-center",
-      isFullWidth ? "w-full" : "w-fit",
-      !validationMessage && wrapperClassName
-    );
+    const resolvedPrefixWidth = resolveCssSize(prefixWidth);
+    const resolvedSuffixWidth = resolveCssSize(suffixWidth);
+    const resolvedPrefixMinWidth = resolveCssSize(prefixMinWidth);
+    const resolvedSuffixMinWidth = resolveCssSize(suffixMinWidth);
+    const resolvedPrefixMaxWidth = resolveCssSize(prefixMaxWidth);
+    const resolvedSuffixMaxWidth = resolveCssSize(suffixMaxWidth);
+    const hasPrefixDimension = resolvedPrefixWidth || resolvedPrefixMinWidth || resolvedPrefixMaxWidth;
+    const hasSuffixDimension = resolvedSuffixWidth || resolvedSuffixMinWidth || resolvedSuffixMaxWidth;
     const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
       InputPrimitive2,
       {
@@ -15790,9 +15878,8 @@ var Input2 = React__namespace.forwardRef(
         "data-slot": "input",
         className: cn(
           inputVariants2({ controlSize, fullWidth: isFullWidth, appearance }),
-          hasPrefix && "pl-10",
-          hasSuffix && "pr-10",
-          className
+          // Only apply padding offsets in the legacy (non-flex) path
+          !hasPrefix && !hasSuffix && className
         ),
         "aria-invalid": resolvedAriaInvalid,
         "aria-describedby": describedBy || void 0,
@@ -15810,29 +15897,78 @@ var Input2 = React__namespace.forwardRef(
       addonSuffix,
       loading && (loadingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 16, variant: "muted" }))
     ] });
-    const inputWithAffixes = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "input-wrapper", className: controlWrapperClassName, children: [
+    const flexWrapperClassName = cn(
+      wrapperBorderVariants({ controlSize, appearance }),
+      isFullWidth ? "w-full" : "w-fit",
+      rest.disabled && "bg-sus-secondary-gray-3 border-sus-secondary-gray-5 hover:border-sus-secondary-gray-5",
+      resolvedAriaInvalid && "border-destructive hover:border-destructive focus-within:border-destructive",
+      !validationMessage && wrapperClassName
+    );
+    const divider = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "addon-divider", className: "self-stretch w-px shrink-0 bg-neutral-200" });
+    const flexInput = /* @__PURE__ */ jsxRuntime.jsx(
+      InputPrimitive2,
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "flex-1 min-w-0 h-full border-0 rounded-none bg-transparent px-3 outline-none ring-0",
+          "placeholder:text-neutral-400 text-neutral-900 text-sm transition-colors",
+          "focus-visible:ring-0 focus-visible:border-0",
+          "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-neutral-400",
+          className
+        ),
+        "aria-invalid": resolvedAriaInvalid,
+        "aria-describedby": describedBy || void 0,
+        onChange: handleChange,
+        ...inputProps
+      }
+    );
+    const inputWithAffixes = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "input-wrapper", className: cn("group/input-wrapper", flexWrapperClassName), children: [
       hasPrefix && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           ...prefixRest,
+          "data-slot": "addon-prefix",
           className: cn(
-            "absolute left-3 top-1/2 -translate-y-1/2 inline-flex items-center text-muted-foreground",
+            "shrink-0 inline-flex items-center px-3 text-sm text-muted-foreground",
+            hasPrefixDimension ? "overflow-hidden" : "whitespace-nowrap",
+            rest.disabled && "text-neutral-400",
             !prefixInteractive && "pointer-events-none",
             prefixClassName
           ),
+          style: hasPrefixDimension ? {
+            ...resolvedPrefixWidth && { width: resolvedPrefixWidth },
+            ...resolvedPrefixMinWidth && { minWidth: resolvedPrefixMinWidth },
+            ...resolvedPrefixMaxWidth && { maxWidth: resolvedPrefixMaxWidth },
+            boxSizing: "border-box",
+            ...prefixRest?.style
+          } : prefixRest?.style,
           children: addonPrefix
         }
       ),
-      inputElement,
+      hasPrefix && showPrefixDivider && divider,
+      flexInput,
+      hasSuffix && showSuffixDivider && divider,
       hasSuffix && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           ...suffixRest,
+          "data-slot": "addon-suffix",
           className: cn(
-            "absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-2 text-muted-foreground",
+            "shrink-0 inline-flex items-center gap-2 px-3 text-sm text-muted-foreground",
+            hasSuffixDimension ? "overflow-hidden" : "whitespace-nowrap",
+            rest.disabled && "text-neutral-400",
             !suffixInteractive && "pointer-events-none",
             suffixClassName
           ),
+          style: hasSuffixDimension ? {
+            ...resolvedSuffixWidth && { width: resolvedSuffixWidth },
+            ...resolvedSuffixMinWidth && { minWidth: resolvedSuffixMinWidth },
+            ...resolvedSuffixMaxWidth && { maxWidth: resolvedSuffixMaxWidth },
+            boxSizing: "border-box",
+            ...suffixRest?.style
+          } : suffixRest?.style,
           children: suffixContent
         }
       )
@@ -15858,63 +15994,7 @@ var Input2 = React__namespace.forwardRef(
   }
 );
 Input2.displayName = "Input";
-
-// src/components/inputNumber/helper.ts
-var createSourceInfo = (event) => ({
-  event,
-  source: event ? "event" : "prop"
-});
-var parseToNumber = (val) => {
-  if (typeof val === "number") return val;
-  if (typeof val === "string" && val !== "") {
-    const parsed = parseFloat(val);
-    if (!isNaN(parsed)) return parsed;
-  }
-  return void 0;
-};
-var truncateToFixed = (num, scale) => {
-  if (scale === 0) return Math.trunc(num).toString();
-  const sign = num < 0 ? "-" : "";
-  const abs = Math.abs(num);
-  const str = abs.toString();
-  const dotIndex = str.indexOf(".");
-  let intPart;
-  let fracPart;
-  if (dotIndex === -1) {
-    intPart = str;
-    fracPart = "";
-  } else {
-    intPart = str.slice(0, dotIndex);
-    fracPart = str.slice(dotIndex + 1, dotIndex + 1 + scale);
-  }
-  fracPart = fracPart.padEnd(scale, "0");
-  return `${sign}${intPart}.${fracPart}`;
-};
-var truncateStringToFixed = (str, scale) => {
-  const trimmed = str.trim();
-  if (trimmed === "" || trimmed === "-") return "0" + (scale > 0 ? "." + "0".repeat(scale) : "");
-  const negative = trimmed.startsWith("-");
-  const unsigned = negative ? trimmed.slice(1) : trimmed;
-  const dotIndex = unsigned.indexOf(".");
-  let intPart;
-  let fracPart;
-  if (dotIndex === -1) {
-    intPart = unsigned || "0";
-    fracPart = "";
-  } else {
-    intPart = unsigned.slice(0, dotIndex) || "0";
-    fracPart = unsigned.slice(dotIndex + 1, dotIndex + 1 + scale);
-  }
-  if (scale === 0) return (negative ? "-" : "") + intPart;
-  fracPart = fracPart.padEnd(scale, "0");
-  return (negative ? "-" : "") + intPart + "." + fracPart;
-};
-var clamp = (value, min, max) => {
-  if (max !== void 0 && value > max) return max;
-  if (min !== void 0 && value < min) return min;
-  return value;
-};
-function useAutoFormatDecimal({
+function useFillDecimalOnBlur({
   enabled,
   decimalScale,
   value,
@@ -15991,11 +16071,15 @@ var InputNumber = ({
   disabled,
   onBlur,
   isAllowed: isAllowedProp,
-  autoFormatDecimal = false,
+  fillDecimalOnBlur = false,
+  truncateDecimalOnBlur = false,
+  maxIntegerDigits,
+  invalid,
   decimalScale: decimalScaleProp,
   fixedDecimalScale: fixedDecimalScaleProp,
   ...props
 }) => {
+  const blurFormatEnabled = fillDecimalOnBlur || truncateDecimalOnBlur;
   const [internalValue, setInternalValue] = React__namespace.useState(
     () => parseToNumber(value) ?? parseToNumber(defaultValue)
   );
@@ -16010,12 +16094,24 @@ var InputNumber = ({
     }
     isBlurClampedRef.current = false;
   }, [value]);
-  const autoFormat = useAutoFormatDecimal({
-    enabled: autoFormatDecimal,
+  const autoFormat = useFillDecimalOnBlur({
+    enabled: blurFormatEnabled,
     decimalScale: decimalScaleProp,
     value,
     defaultValue
   });
+  const isAllowed = React__namespace.useMemo(() => {
+    if (maxIntegerDigits === void 0 && !isAllowedProp) return void 0;
+    return (values) => {
+      if (maxIntegerDigits !== void 0) {
+        const raw = values.value;
+        const unsigned = raw.replace(/^-/, "");
+        const intPart = unsigned.split(".")[0].replace(/^0+/, "") || "0";
+        if (intPart.length > maxIntegerDigits) return false;
+      }
+      return isAllowedProp ? isAllowedProp(values) : true;
+    };
+  }, [maxIntegerDigits, isAllowedProp]);
   const notifyChange = React__namespace.useCallback(
     (newValue, event) => {
       internalValueRef.current = newValue;
@@ -16080,16 +16176,16 @@ var InputNumber = ({
         );
         onStepChange?.(clamped);
       }
-      if (autoFormatDecimal && autoFormat.blurScale !== void 0) {
+      if (blurFormatEnabled && autoFormat.blurScale !== void 0) {
         const rawStr = wasClamped ? String(clamped) : rawValueRef.current || String(clamped);
         autoFormat.onBlur(truncateStringToFixed(rawStr, autoFormat.blurScale));
       } else {
         autoFormat.resetEditing();
       }
     },
-    [onBlur, autoFormatDecimal, autoFormat, min, max, onValueChange, onStepChange]
+    [onBlur, blurFormatEnabled, autoFormat, min, max, onValueChange, onStepChange]
   );
-  const effectiveValue = autoFormat.formattedValue !== void 0 ? autoFormat.formattedValue : isBlurClampedRef.current || stepper.changed || autoFormatDecimal ? internalValue : value;
+  const effectiveValue = autoFormat.formattedValue !== void 0 ? autoFormat.formattedValue : isBlurClampedRef.current || stepper.changed || blurFormatEnabled ? internalValue : value;
   const buttonClass = cn(
     "flex items-center justify-center h-3 w-5 transition-colors outline-none",
     "text-neutral-400 hover:text-neutral-600 active:text-neutral-900",
@@ -16103,14 +16199,12 @@ var InputNumber = ({
       defaultValue,
       onValueChange: handleValueChange,
       onBlur: handleBlur,
-      ...isAllowedProp && { isAllowed: isAllowedProp },
-      ...!autoFormatDecimal && {
-        decimalScale: decimalScaleProp,
-        fixedDecimalScale: fixedDecimalScaleProp
-      },
+      ...isAllowed && { isAllowed },
+      ...truncateDecimalOnBlur ? {} : fillDecimalOnBlur ? { decimalScale: decimalScaleProp } : { decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp },
       ...autoFormat.formattedValue !== void 0 && { valueIsNumericString: true },
       ...props,
       disabled,
+      invalid,
       ...customInputProps,
       addonSuffix: showStepper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col -space-y-px", children: [
         /* @__PURE__ */ jsxRuntime.jsx(