shad-m 1.0.2 → 1.0.3

package/dist/components/input.mjs

@@ -0,0 +1,831 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Pressable } from '@/common/interactive';
+import { CloseCircleFilledIcon } from '@/icons';
+import { debounce } from '@/lib/helpers';
+import { TRACKING_TYPE } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import { useUISystemContext } from '@/providers/UISystemProvider';
+import * as React from 'react';
+import { NumericFormat } from 'react-number-format';
+import { ReadingConfig, doReadNumber, InvalidFormatError, InvalidNumberError } from 'read-vietnamese-number';
+
+function AddonWrapper({
+  className,
+  children,
+  disabled = false,
+  validSize = "default",
+  position = "after",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-muted text-muted-foreground flex items-center justify-center font-medium",
+        position === "before" ? "rounded-l-md" : "rounded-r-md",
+        validSize === "lg" ? "h-[56px]" : "h-[46px]",
+        // Only apply fixed width if children is not a React element (e.g., string or simple node)
+        validSize === "lg" ? "w-14" : "w-12",
+        {
+          "opacity-60": disabled
+        },
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+const labelClasses = {
+  default: "px-3 py-3",
+  lg: "px-3 py-4"
+};
+const iconClasses = {
+  default: "px-2 my-3",
+  lg: "px-2 my-4"
+};
+function DsInputLayout({
+  className,
+  showRemoveIcon,
+  disabled,
+  isError,
+  addonAfter,
+  addonBefore,
+  addonBeforeClassName,
+  addonAfterClassName,
+  trackingData,
+  trackingIndex,
+  trackingName,
+  label,
+  isRequired = false,
+  buttonIcon,
+  onClearValue,
+  buttonIconClassName,
+  children,
+  classButton,
+  classLabel,
+  size = "default",
+  isTextarea
+}) {
+  const noIcon = !buttonIcon && !showRemoveIcon;
+  const iconAreaRef = React.useRef(null);
+  const [iconAreaWidth, setIconAreaWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (showRemoveIcon || buttonIcon) {
+      const iconWidth = iconAreaRef.current?.getBoundingClientRect().width || 0;
+      setIconAreaWidth(iconWidth);
+    }
+  }, [buttonIcon, showRemoveIcon]);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      trackingName,
+      trackingData,
+      trackingIndex,
+      className: cn(
+        "border-input bg-background relative flex min-w-0 items-center rounded-md border transition-colors duration-200",
+        "input-wrapper",
+        {
+          "focus-within:!border-primary hover:border-primary/60": !isError && !disabled,
+          "bg-muted": disabled,
+          "!border-destructive": isError,
+          "input--floating": !!label
+        },
+        className
+      ),
+      children: [
+        addonBefore && /* @__PURE__ */ jsx(
+          AddonWrapper,
+          {
+            disabled,
+            validSize: size,
+            position: "before",
+            className: addonBeforeClassName,
+            children: addonBefore
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "input-container relative w-full", children: [
+          children({ iconAreaWidth }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: iconAreaRef,
+              className: cn(
+                "absolute bottom-0 right-0 top-0 grid",
+                (buttonIcon || showRemoveIcon) && "grid-cols-1",
+                buttonIcon && showRemoveIcon && "grid-cols-2 divide-x",
+                noIcon && "hidden",
+                classButton
+              ),
+              children: [
+                showRemoveIcon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("flex cursor-pointer items-center", iconClasses[size], {
+                      "!mt-2 mb-[2px] items-start justify-start": isTextarea
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      CloseCircleFilledIcon,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClearValue?.();
+                        },
+                        className: "input-remove-icon"
+                      }
+                    )
+                  }
+                ),
+                buttonIcon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center",
+                      iconClasses[size],
+                      buttonIconClassName
+                    ),
+                    children: buttonIcon
+                  }
+                )
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: label,
+              className: cn(
+                "text-muted-foreground pointer-events-none absolute left-0 origin-left transform truncate whitespace-nowrap transition-all duration-100 ease-in-out",
+                isTextarea ? "top-0" : "top-0 h-full",
+                labelClasses[size],
+                classLabel,
+                disabled && "opacity-50"
+              ),
+              style: {
+                maxWidth: iconAreaWidth ? `calc(100% - 36px)` : "calc(100% - 24px)"
+                // 24px for padding when no icon
+              },
+              children: [
+                label,
+                isRequired && !disabled && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+              ]
+            }
+          )
+        ] }),
+        addonAfter && /* @__PURE__ */ jsx(
+          AddonWrapper,
+          {
+            disabled,
+            validSize: size,
+            position: "after",
+            className: addonAfterClassName,
+            children: addonAfter
+          }
+        )
+      ]
+    }
+  );
+}
+const inputClasses = {
+  default: "px-3 py-3 h-[46px]",
+  lg: "px-3 py-3 h-[54px]"
+};
+const Input = React.forwardRef(
+  ({
+    className,
+    wrapperClassName,
+    type,
+    disabled = false,
+    isError = false,
+    addonAfter,
+    addonBefore,
+    addonBeforeClassName,
+    addonAfterClassName,
+    label,
+    isRequired = false,
+    buttonIcon,
+    showRemoveIcon = true,
+    onClearValue,
+    buttonIconClassName,
+    classButton,
+    classLabel,
+    inputClassName,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    trackingInputName,
+    trackingClearName,
+    size = "default",
+    helpText,
+    errorText,
+    helpTextClassName,
+    errorTextClassName,
+    value,
+    onChange,
+    placeholder,
+    ...rest
+  }, ref) => {
+    const { sendTrack } = useUISystemContext();
+    const sendTracking = React.useMemo(() => {
+      return debounce((_text) => {
+        if (trackingInputName || trackingData?.identity) {
+          sendTrack?.(trackingInputName || `input_${trackingData?.identity}`, TRACKING_TYPE.input, {
+            ...trackingData,
+            object_type: "input_field"
+          });
+        }
+      }, 1e3);
+    }, [sendTrack, trackingInputName, trackingData]);
+    const showRemoveIconFlag = Boolean(value && !disabled && showRemoveIcon);
+    const handleClearValue = React.useCallback(() => {
+      onClearValue?.();
+      if (trackingClearName || trackingData?.identity) {
+        sendTrack?.(
+          trackingClearName || `clear_input_${trackingData?.identity}`,
+          TRACKING_TYPE.input,
+          {
+            ...trackingData,
+            object_type: "input_field"
+          }
+        );
+      }
+      const clearEvent = {
+        target: { value: "" },
+        currentTarget: { value: "" }
+      };
+      onChange?.(clearEvent);
+    }, [onClearValue, onChange]);
+    const onInputChange = React.useCallback(
+      (e) => {
+        sendTracking?.(e.target.value);
+        onChange?.(e);
+      },
+      [onChange, sendTracking]
+    );
+    const validSize = size === "lg" ? "lg" : "default";
+    const getDisplayText = () => {
+      if (isError && errorText) {
+        return { text: errorText, className: errorTextClassName, isError: true };
+      }
+      if (helpText) {
+        return { text: helpText, className: helpTextClassName, isError: false };
+      }
+      return null;
+    };
+    const displayTextInfo = getDisplayText();
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsx(
+        DsInputLayout,
+        {
+          showRemoveIcon: showRemoveIconFlag,
+          label,
+          isRequired,
+          trackingData,
+          trackingIndex,
+          trackingName,
+          disabled,
+          addonAfter,
+          addonBefore,
+          addonBeforeClassName,
+          addonAfterClassName,
+          buttonIcon,
+          className,
+          isError,
+          classButton,
+          classLabel,
+          onClearValue: handleClearValue,
+          size: validSize,
+          buttonIconClassName,
+          children: ({ iconAreaWidth }) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              type,
+              className: cn(
+                "input-placeholder w-full flex-1 rounded-md bg-transparent font-normal focus:outline-none",
+                disabled && "cursor-not-allowed opacity-50",
+                inputClasses[validSize],
+                inputClassName
+              ),
+              style: {
+                paddingRight: iconAreaWidth
+              },
+              ref,
+              disabled,
+              value,
+              onChange: onInputChange,
+              ...rest,
+              placeholder: placeholder ?? "Nh\u1EADp th\xF4ng tin"
+            }
+          )
+        }
+      ),
+      displayTextInfo && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "px-2 text-sm",
+            displayTextInfo.isError ? "text-destructive" : "text-muted-foreground",
+            displayTextInfo.className
+          ),
+          children: displayTextInfo.text
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+const InputCurrency = React.forwardRef(
+  ({
+    className,
+    disabled = false,
+    isError = false,
+    addonAfter,
+    addonBefore,
+    addonBeforeClassName,
+    addonAfterClassName,
+    label,
+    isRequired = false,
+    buttonIcon,
+    showRemoveIcon = true,
+    onClearValue,
+    buttonIconClassName,
+    classButton,
+    classLabel,
+    inputClassName,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    trackingInputName,
+    trackingClearName,
+    size = "default",
+    helpText,
+    errorText,
+    helpTextClassName,
+    errorTextClassName,
+    wrapperClassName,
+    value,
+    onValueChange,
+    showVietnameseText = false,
+    vietnameseTextUnit = "\u0111\u1ED3ng",
+    vietnameseTextClassName,
+    // NumericFormat props - Vietnamese format fixed
+    currency = "\u0111",
+    allowLeadingZeros = false,
+    getInputRef,
+    renderText,
+    valueIsNumericString = false,
+    maxIntegerLength = 14,
+    // Max 14 digits for integer part
+    type,
+    defaultValue,
+    ...rest
+  }, ref) => {
+    const { sendTrack } = useUISystemContext();
+    const sendTracking = React.useMemo(() => {
+      return debounce((_text) => {
+        if (trackingInputName || trackingData?.identity) {
+          sendTrack?.(
+            trackingInputName || `input_${trackingData?.identity}`,
+            TRACKING_TYPE.input,
+            trackingData
+          );
+        }
+      }, 1e3);
+    }, [sendTrack, trackingInputName, trackingData]);
+    const showRemoveIconFlag = Boolean(
+      value !== "" && value !== null && value !== void 0 && !disabled && showRemoveIcon
+    );
+    const handleClearValue = React.useCallback(() => {
+      onClearValue?.();
+      if (trackingClearName || trackingData?.identity) {
+        sendTrack?.(
+          trackingClearName || `clear_input_${trackingData?.identity}`,
+          TRACKING_TYPE.input,
+          {
+            ...trackingData,
+            object_type: "input_field"
+          }
+        );
+      }
+      const clearValues = {
+        value: "",
+        floatValue: void 0,
+        formattedValue: ""
+      };
+      onValueChange?.(clearValues);
+    }, [onClearValue, onValueChange]);
+    const displayValue = React.useMemo(() => {
+      if (value === "" || value === null || value === void 0) return "";
+      if (typeof value === "number" && isNaN(value)) return "";
+      const stringValue = value.toString();
+      const cleanValue = stringValue.replace(/[^\d]/g, "");
+      if (cleanValue.length > maxIntegerLength) {
+        return cleanValue.slice(0, maxIntegerLength);
+      }
+      return stringValue;
+    }, [value, maxIntegerLength]);
+    const onInputChange = React.useCallback(
+      (values) => {
+        const cleanValue = values.value.replace(/[^\d]/g, "");
+        if (cleanValue.length > maxIntegerLength) {
+          return;
+        }
+        const applyVietnameseConstraints = (val) => {
+          if (!val) return val;
+          const constrainedCleanValue = val.replace(/[^\d]/g, "");
+          let limitedInteger = constrainedCleanValue || "";
+          if (limitedInteger.length > maxIntegerLength) {
+            limitedInteger = limitedInteger.slice(0, maxIntegerLength);
+          }
+          return limitedInteger;
+        };
+        const constrainedValue = applyVietnameseConstraints(values.value);
+        const floatValue = constrainedValue === "" ? void 0 : Math.max(0, parseInt(constrainedValue) || 0);
+        const constrainedValues = {
+          ...values,
+          value: constrainedValue,
+          floatValue
+        };
+        sendTracking?.(constrainedValues.value);
+        onValueChange?.(constrainedValues);
+      },
+      [onValueChange, sendTracking, maxIntegerLength]
+    );
+    const isAllowed = React.useCallback(
+      (values) => {
+        const { value: value2 } = values;
+        if (!value2) return true;
+        if (value2.includes("-")) {
+          return false;
+        }
+        const cleanValue = value2.replace(/[^\d]/g, "");
+        const isWithinLimit = cleanValue.length <= maxIntegerLength;
+        return isWithinLimit;
+      },
+      [maxIntegerLength]
+    );
+    const validSize = size === "lg" ? "lg" : "default";
+    const vietnameseText = React.useMemo(() => {
+      if (!showVietnameseText || value === "" || value === null || value === void 0) return "";
+      try {
+        const numValue = typeof value === "number" ? value : parseFloat(
+          String(value).replace(/[^\d,.-]/g, "").replace(/,/g, "")
+        );
+        if (isNaN(numValue) || numValue <= 0) return "";
+        const config = new ReadingConfig();
+        if (vietnameseTextUnit) {
+          config.unit = [vietnameseTextUnit];
+        }
+        const result = doReadNumber(config, numValue.toString());
+        return result.charAt(0).toUpperCase() + result.slice(1);
+      } catch (error) {
+        if (error instanceof InvalidFormatError || error instanceof InvalidNumberError) {
+          return "";
+        }
+        console.warn("Error generating Vietnamese text:", error);
+        return "";
+      }
+    }, [value, showVietnameseText, vietnameseTextUnit]);
+    const getDisplayText = () => {
+      if (isError && errorText) {
+        return { text: errorText, className: errorTextClassName, isError: true };
+      }
+      if (showVietnameseText && vietnameseText && value !== "" && value !== null && value !== void 0 && !isError) {
+        return { text: vietnameseText, className: vietnameseTextClassName, isError: false };
+      }
+      if (helpText) {
+        return { text: helpText, className: helpTextClassName, isError: false };
+      }
+      return null;
+    };
+    const displayTextInfo = getDisplayText();
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        DsInputLayout,
+        {
+          showRemoveIcon: showRemoveIconFlag,
+          label,
+          isRequired,
+          trackingData,
+          trackingIndex,
+          trackingName,
+          disabled,
+          addonAfter: addonAfter || currency,
+          addonBefore,
+          addonBeforeClassName,
+          addonAfterClassName,
+          buttonIcon,
+          className,
+          isError,
+          classButton,
+          classLabel,
+          onClearValue: handleClearValue,
+          size: validSize,
+          buttonIconClassName,
+          children: ({ iconAreaWidth }) => /* @__PURE__ */ jsx(
+            NumericFormat,
+            {
+              className: cn(
+                "w-full flex-1 rounded-md font-normal focus:outline-none",
+                disabled && "cursor-not-allowed opacity-50",
+                inputClasses[validSize],
+                inputClassName
+              ),
+              style: {
+                paddingRight: iconAreaWidth
+              },
+              getInputRef: getInputRef || ref,
+              disabled,
+              value: displayValue,
+              onValueChange: onInputChange,
+              isAllowed,
+              thousandSeparator: ",",
+              decimalSeparator: ".",
+              decimalScale: 0,
+              fixedDecimalScale: false,
+              allowNegative: false,
+              allowLeadingZeros,
+              renderText,
+              displayType: "input",
+              thousandsGroupStyle: "thousand",
+              valueIsNumericString,
+              onWheel: (e) => {
+                if (document.activeElement === e.currentTarget) {
+                  e.preventDefault();
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "PageUp" || e.key === "PageDown") {
+                  e.preventDefault();
+                }
+              },
+              ...rest
+            }
+          )
+        }
+      ),
+      displayTextInfo && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "pr-2 text-sm",
+            displayTextInfo.isError ? "text-destructive" : showVietnameseText && vietnameseText && value !== "" && value !== null && value !== void 0 && !isError ? "text-foreground" : "text-foreground",
+            displayTextInfo.className
+          ),
+          children: displayTextInfo.text
+        }
+      )
+    ] });
+  }
+);
+InputCurrency.displayName = "InputCurrency";
+const InputNumber = React.forwardRef(
+  ({
+    className,
+    disabled = false,
+    isError = false,
+    addonAfter,
+    addonBefore,
+    addonBeforeClassName,
+    addonAfterClassName,
+    label,
+    isRequired = false,
+    buttonIcon,
+    showRemoveIcon = true,
+    onClearValue,
+    buttonIconClassName,
+    classButton,
+    classLabel,
+    inputClassName,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    trackingInputName,
+    trackingClearName,
+    size = "default",
+    helpText,
+    errorText,
+    helpTextClassName,
+    errorTextClassName,
+    wrapperClassName,
+    value,
+    onChange,
+    // Number specific props
+    allowDecimals = true,
+    decimalScale = 2,
+    fixedDecimalScale = false,
+    // NumericFormat props
+    allowNegative = false,
+    allowLeadingZeros = false,
+    getInputRef,
+    renderText,
+    valueIsNumericString = false,
+    maxIntegerLength = 15,
+    type,
+    defaultValue,
+    ...rest
+  }, ref) => {
+    const { sendTrack } = useUISystemContext();
+    const sendTracking = React.useMemo(() => {
+      return debounce((_text) => {
+        if (trackingInputName || trackingData?.identity) {
+          sendTrack?.(trackingInputName || `input_${trackingData?.identity}`, TRACKING_TYPE.input, {
+            ...trackingData,
+            object_type: "input_field"
+          });
+        }
+      }, 1e3);
+    }, [sendTrack, trackingInputName, trackingData]);
+    const showRemoveIconFlag = Boolean(
+      value !== "" && value !== null && value !== void 0 && !disabled && showRemoveIcon
+    );
+    const handleClearValue = React.useCallback(() => {
+      onClearValue?.();
+      if (trackingClearName || trackingData?.identity) {
+        sendTrack?.(
+          trackingClearName || `clear_input_${trackingData?.identity}`,
+          TRACKING_TYPE.input,
+          {
+            ...trackingData,
+            object_type: "input_field"
+          }
+        );
+      }
+      onChange("");
+    }, [onClearValue, onChange]);
+    const displayValue = React.useMemo(() => {
+      if (value === "" || value === null || value === void 0) return "";
+      if (typeof value === "number" && isNaN(value)) return "";
+      return value.toString();
+    }, [value]);
+    const onInputChange = React.useCallback(
+      (values) => {
+        const numericValue = values.floatValue;
+        if (values.value === "" || numericValue === void 0 || numericValue === null) {
+          onChange("");
+          return;
+        }
+        const cleanValue = values.value.replace(/[^\d.,]/g, "");
+        const integerPart = cleanValue.split(/[.,]/)[0] || "";
+        if (integerPart.length > maxIntegerLength) {
+          return;
+        }
+        sendTracking?.(values.value);
+        onChange(numericValue);
+      },
+      [onChange, sendTracking, maxIntegerLength, fixedDecimalScale, allowDecimals, decimalScale]
+    );
+    const isAllowed = React.useCallback(
+      (values) => {
+        const { value: value2 } = values;
+        if (!value2) return true;
+        if (value2.includes("-")) {
+          return false;
+        }
+        if (value2.endsWith(".") && allowDecimals) {
+          const integerPartOnly = value2.slice(0, -1).replace(/,/g, "");
+          if (integerPartOnly.length >= maxIntegerLength) {
+            return false;
+          }
+        }
+        if (!allowDecimals && value2.includes(".")) {
+          return false;
+        }
+        if (fixedDecimalScale && allowDecimals) {
+          const parts2 = value2.split(".");
+          if (parts2.length > 2) {
+            return false;
+          }
+          if (parts2.length === 2) {
+            const integerPart2 = parts2[0]?.replace(/,/g, "") || "";
+            const decimalPart2 = parts2[1] || "";
+            if (integerPart2.length > maxIntegerLength) {
+              return false;
+            }
+            if (integerPart2.length === maxIntegerLength) {
+              return false;
+            }
+            if (decimalPart2.length > decimalScale) {
+              return false;
+            }
+          }
+          return true;
+        }
+        const parts = value2.split(".");
+        const integerPart = parts[0]?.replace(/,/g, "") || "";
+        const decimalPart = parts[1] || "";
+        if (integerPart.length > maxIntegerLength) {
+          return false;
+        }
+        if (integerPart.length === maxIntegerLength && allowDecimals) {
+          if (parts.length > 1 || value2.endsWith(".")) {
+            return false;
+          }
+        }
+        if (allowDecimals && decimalPart && decimalScale !== void 0) {
+          if (fixedDecimalScale && decimalPart.length > decimalScale) {
+            return false;
+          }
+          if (!fixedDecimalScale && decimalPart.length > decimalScale) {
+            return true;
+          }
+        }
+        return true;
+      },
+      [maxIntegerLength, allowDecimals, decimalScale, fixedDecimalScale]
+    );
+    const validSize = size === "lg" ? "lg" : "default";
+    const getDisplayText = () => {
+      if (isError && errorText) {
+        return { text: errorText, className: errorTextClassName, isError: true };
+      }
+      if (helpText) {
+        return { text: helpText, className: helpTextClassName, isError: false };
+      }
+      return null;
+    };
+    const displayTextInfo = getDisplayText();
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsx(
+        DsInputLayout,
+        {
+          showRemoveIcon: showRemoveIconFlag,
+          label,
+          isRequired,
+          trackingData,
+          trackingIndex,
+          trackingName,
+          disabled,
+          addonAfter,
+          addonBefore,
+          addonBeforeClassName,
+          addonAfterClassName,
+          buttonIcon,
+          className,
+          isError,
+          classButton,
+          classLabel,
+          onClearValue: handleClearValue,
+          size: validSize,
+          buttonIconClassName,
+          children: ({ iconAreaWidth }) => /* @__PURE__ */ jsx(
+            NumericFormat,
+            {
+              className: cn(
+                "w-full flex-1 rounded-md font-normal focus:outline-none",
+                disabled && "cursor-not-allowed opacity-50",
+                inputClasses[validSize],
+                inputClassName
+              ),
+              style: {
+                paddingRight: iconAreaWidth
+              },
+              getInputRef: getInputRef || ref,
+              disabled,
+              value: displayValue,
+              onValueChange: onInputChange,
+              isAllowed,
+              thousandSeparator: ",",
+              decimalSeparator: ".",
+              decimalScale: allowDecimals ? decimalScale : 0,
+              fixedDecimalScale,
+              allowNegative,
+              allowLeadingZeros,
+              renderText,
+              displayType: "input",
+              thousandsGroupStyle: "thousand",
+              valueIsNumericString: allowDecimals,
+              onWheel: (e) => {
+                if (document.activeElement === e.currentTarget) {
+                  e.preventDefault();
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "PageUp" || e.key === "PageDown") {
+                  e.preventDefault();
+                }
+              },
+              ...rest
+            }
+          )
+        }
+      ),
+      displayTextInfo && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "px-2 text-sm",
+            displayTextInfo.isError ? "text-destructive" : "text-muted-foreground",
+            displayTextInfo.className
+          ),
+          children: displayTextInfo.text
+        }
+      )
+    ] });
+  }
+);
+InputNumber.displayName = "InputNumber";
+
+export { Input, InputCurrency, InputNumber, DsInputLayout as default };
+//# sourceMappingURL=input.mjs.map
+//# sourceMappingURL=input.mjs.map